add loading state in layout

src/App.tsx

@@ -28,7 +28,7 @@ import { Toaster } from "./components/ui/sonner";
 import { Settings } from "lucide-react";
 
 export default function App() {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null); // null = loading
   const [user, setUser] = useState({
     name: "Admin User",
     email: "admin@klc.edu",
@@ -41,9 +41,7 @@ export default function App() {
 
   useEffect(() => {
     const authToken = localStorage.getItem("klc_auth_token");
-    if (authToken) {
-      setIsAuthenticated(true);
-    }
+    setIsAuthenticated(!!authToken); // true if token exists, false otherwise
   }, []);
 
   const login = () => {
@@ -58,6 +56,11 @@ export default function App() {
     navigate("/login");
   };
 
+  if (isAuthenticated === null) {
+    // while checking localStorage
+    return <div className="flex justify-center items-center h-screen">Loading...</div>;
+  }
+
   return (
     <div className="min-h-screen bg-background">
       <Routes>

src/components/layout/AuthenticatedLayout.tsx

@@ -174,12 +174,12 @@ const navigationItems: NavigationItem[] = [
 export function AuthenticatedLayout({
   children,
   currentRoute,
-  // onNavigate, 
   onLogout,
   user,
   breadcrumbs = []
 }: AuthenticatedLayoutProps) {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const navigate = useNavigate(); // Move useNavigate to the top level
 
   const isActiveRoute = (route: string) => {
     return currentRoute === route ||
@@ -205,20 +205,17 @@ export function AuthenticatedLayout({
     const isParentActive = activeParent === item.id;
     const Icon = item.icon;
 
-    const navigate = useNavigate();
-
     return (
       <div key={item.id}>
         <Button
           variant="ghost"
-          className={`w-full justify-start min-h-[44px] ${
-            isActive 
+          className={`w-full justify-start min-h-[44px] ${isActive
               ? 'bg-primary text-primary-foreground'
               : isParentActive && !isChild
                 ? 'bg-accent text-accent-foreground'
                 : 'hover:bg-accent hover:text-accent-foreground'
             } ${isChild ? 'ml-4 text-sm' : ''}`}
-          onClick={() => navigate(item.route)}
+          onClick={() => navigate(item.route)} // Use the navigate from the top level
         >
           <Icon className={`${sidebarCollapsed ? 'mx-auto' : 'mr-2'} h-4 w-4 flex-shrink-0`} />
           {!sidebarCollapsed && (
@@ -235,7 +232,6 @@ export function AuthenticatedLayout({
       </div>
     );
   };
- const navigate = useNavigate();
   return (
     <div className="flex h-screen bg-background">
       {/* Left Sidebar */}
@@ -275,7 +271,6 @@ export function AuthenticatedLayout({
 
         {/* User Section */}
         <div className="p-4 border-t border-sidebar-border"
-        onClick={() => navigate('/profile')}
         >
           <DropdownMenu>
             <DropdownMenuTrigger asChild>

src/components/ui/dropdown-menu.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu@2.1.6";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react@0.487.0";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
 import { cn } from "./utils";