🐛 fix: Move useEffect before conditional return in AppLayout (#41)

The `useEffect` hook was called after a conditional early return,
violating React's Rules of Hooks. Moved `toggleSidebar` and its
`useEffect` above the `AccessDenied` guard so hooks are always
called in the same order.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: chemsseddine

src/routes/_app.tsx

@@ -50,15 +50,6 @@ function AppLayout() {
   });
   const pathname = router.state.location.pathname;
 
-  if (!isLoading && !isError && !hasCapability(SystemCapabilities.ACCESS_ADMIN)) {
-    return <AccessDenied />;
-  }
-
-  const matchedKey = Object.keys(ROUTE_TITLE_KEYS).find((route) =>
-    route === '/' ? pathname === '/' : pathname.startsWith(route),
-  );
-  const title = matchedKey ? localize(ROUTE_TITLE_KEYS[matchedKey]) : undefined;
-
   const toggleSidebar = () =>
     setSidebarCollapsed((prev) => {
       const next = !prev;
@@ -77,6 +68,15 @@ function AppLayout() {
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, []);
 
+  if (!isLoading && !isError && !hasCapability(SystemCapabilities.ACCESS_ADMIN)) {
+    return <AccessDenied />;
+  }
+
+  const matchedKey = Object.keys(ROUTE_TITLE_KEYS).find((route) =>
+    route === '/' ? pathname === '/' : pathname.startsWith(route),
+  );
+  const title = matchedKey ? localize(ROUTE_TITLE_KEYS[matchedKey]) : undefined;
+
   return (
     <div className="flex h-screen overflow-hidden">
       <Sidebar user={user} collapsed={sidebarCollapsed} onToggle={toggleSidebar} />