Merge pull request #628 from markusgeert/fix/prevent-sidenav-flicker

fix: prevent sidenav flicker

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">