From 7b727feb3c94065bbce3f390f081e1e430e09d70 Mon Sep 17 00:00:00 2001
From: Max Stevens <maxstevens2708@gmail.com>
Date: Thu, 26 Sep 2024 11:57:16 +0200
Subject: [PATCH] fix: prevent sidenav flicker

---
 .../src/components/ui/page-layout.tsx            | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/apps/admin-server/src/components/ui/page-layout.tsx b/apps/admin-server/src/components/ui/page-layout.tsx
index c54cae29d..2ecc98f1a 100644
--- a/apps/admin-server/src/components/ui/page-layout.tsx
+++ b/apps/admin-server/src/components/ui/page-layout.tsx
@@ -6,6 +6,10 @@ import { Sidenav } from './sidenav';
 import { SidenavProject } from './sidenav-project';
 import { useRouter } from 'next/router';
 
+function pathIsSpecificProject(pathname: string) {
+  return pathname.startsWith('/projects/[project]')
+}
+
 export function PageLayout({
   children,
   className,
@@ -19,25 +23,17 @@ export function PageLayout({
   breadcrumbs: any;
   action?: ReactNode;
 }) {
-  const [openSideMenu, setOpenSideMenu] = useState(false);
-
   const router = useRouter();
-  const [location, setLocation] = useState('');
-  const [hasProjectSidenav, setHasProjectSidenav] = useState(false);
-
-  useEffect(() => {
-    setHasProjectSidenav(location.startsWith('/projects/[project]'));
-  }, [location]);
+  const [hasProjectSidenav, setHasProjectSidenav] = useState(pathIsSpecificProject(router.pathname));
 
   useEffect(() => {
-    setLocation(router.pathname);
+    setHasProjectSidenav(pathIsSpecificProject(router.pathname));
   }, [router]);
 
   return (
     <main className="flex flex-row min-h-screen bg-muted">
       <Sidenav
         narrow={hasProjectSidenav}
-        className={openSideMenu ? 'translate-x-0' : ''}
       />
       {hasProjectSidenav ? <SidenavProject /> : null}
       <section className="col-span-full w-full">