Fix: Resolve import error in App.tsx

Fixes an import error in `App.tsx` related to the `authStore`.  The error message "Failed to resolve import "./stores/authStore" from "src/App.tsx". Does the file exist?" indicates that the specified module could not be found.  This commit addresses the issue by ensuring the correct import path or by creating the missing file.

package-lock.json

@@ -57,7 +57,8 @@
         "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7",
         "vaul": "^0.9.3",
-        "zod": "^3.23.8"
+        "zod": "^3.23.8",
+        "zustand": "^4.4.7"
       },
       "devDependencies": {
         "@eslint/js": "^9.9.0",
@@ -7052,6 +7053,15 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -7346,6 +7356,34 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/zustand": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.7.tgz",
+      "integrity": "sha512-QFJWJMdlETcI69paJwhSMJz7PPWjVP8Sjhclxmxmxv/RYI7ZOvR5BHX+ktH0we9gTWQMxcne8q1OY8xxz604gw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
     }
   }
 }

package.json

@@ -60,7 +60,8 @@
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.3",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

src/components/layout/Layout.tsx

@@ -14,6 +14,7 @@ interface LayoutProps {
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   const { toast } = useToast();
   const [isMobile, setIsMobile] = useState(false);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
   
   useEffect(() => {
     const checkIfMobile = () => {
@@ -27,11 +28,15 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
       window.removeEventListener('resize', checkIfMobile);
     };
   }, []);
+
+  const handleCloseSidebar = () => {
+    setSidebarOpen(false);
+  };
   
   return (
     <div className="flex h-screen overflow-hidden">
       {isMobile ? (
-        <Sheet>
+        <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
           <SheetTrigger asChild>
             <Button variant="ghost" size="icon" className="md:hidden fixed top-2 left-2 z-20">
               <Menu className="h-5 w-5" />
@@ -39,11 +44,11 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
             </Button>
           </SheetTrigger>
           <SheetContent side="left" className="p-0 w-[250px]">
-            <Sidebar className="w-full border-none" />
+            <Sidebar isOpen={true} onClose={handleCloseSidebar} />
           </SheetContent>
         </Sheet>
       ) : (
-        <Sidebar />
+        <Sidebar isOpen={true} onClose={() => {}} />
       )}
       <div className="flex flex-col flex-1 overflow-hidden">
         <Header />

src/components/layout/Sidebar.tsx

@@ -1,5 +1,6 @@
+
 import { Link, NavLink, useLocation } from 'react-router-dom';
-import { useMobile } from '@/hooks/use-mobile';
+import { useIsMobile } from '@/hooks/use-mobile';
 import { 
   Home, 
   ListFilter, 
@@ -28,7 +29,7 @@ const getNavLinkClass = (isActive: boolean) => {
 };
 
 export default function Sidebar({ isOpen, onClose }: SidebarProps) {
-  const isMobile = useMobile();
+  const isMobile = useIsMobile();
   const location = useLocation();
 
   return (

src/hooks/use-mobile.tsx

@@ -1,19 +1,23 @@
-import * as React from "react"
 
-const MOBILE_BREAKPOINT = 768
+import { useState, useEffect } from 'react';
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+  const [isMobile, setIsMobile] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const checkIfMobile = () => {
-    const onChange = () => {
+      setIsMobile(window.innerWidth < 768);
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    };
-    }
+    
-    mql.addEventListener("change", onChange)
+    // Verificar inicialmente
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    checkIfMobile();
-    return () => mql.removeEventListener("change", onChange)
+    
-  }, [])
+    // Adicionar listener para redimensionamento
+    window.addEventListener('resize', checkIfMobile);
+    
+    // Limpar listener quando componente for desmontado
+    return () => window.removeEventListener('resize', checkIfMobile);
+  }, []);
 
-  return !!isMobile
+  return isMobile;
 }

src/stores/authStore.ts

@@ -0,0 +1,12 @@
+
+import { create } from 'zustand';
+
+interface AuthState {
+  isLoggedIn: boolean;
+  setLoggedIn: (status: boolean) => void;
+}
+
+export const authStore = create<AuthState>((set) => ({
+  isLoggedIn: localStorage.getItem('autenticado') === 'true',
+  setLoggedIn: (status) => set({ isLoggedIn: status }),
+}));