feat: Add settings menu to sidebar

Adds a settings menu item to the sidebar.

src/App.tsx

@@ -1,4 +1,3 @@
-
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { Suspense, lazy, useEffect } from 'react';
 import { Toaster } from "@/components/ui/sonner";
@@ -16,6 +15,7 @@ const WhatsApp = lazy(() => import('./pages/WhatsApp'));
 const GruposWhatsApp = lazy(() => import('./pages/GruposWhatsApp'));
 const NotFound = lazy(() => import('./pages/NotFound'));
 const CartoesCredito = lazy(() => import('./pages/CartoesCredito'));
+const Configuracoes = lazy(() => import('./pages/Configuracoes'));
 
 function App() {
   const isLoggedIn = authStore((state) => state.isLoggedIn);
@@ -61,6 +61,13 @@ function App() {
         <Route path="/calendario" element={<ProtectedRoute><Suspense fallback={<div>Carregando...</div>}><Calendario /></Suspense></ProtectedRoute>} />
         <Route path="/whatsapp" element={<ProtectedRoute><Suspense fallback={<div>Carregando...</div>}><WhatsApp /></Suspense></ProtectedRoute>} />
         <Route path="/grupos-whatsapp" element={<ProtectedRoute><Suspense fallback={<div>Carregando...</div>}><GruposWhatsApp /></Suspense></ProtectedRoute>} />
+        <Route path="/configuracoes" element={
+          <ProtectedRoute>
+            <Suspense fallback={<div className="flex items-center justify-center min-h-screen">Carregando...</div>}>
+              <Configuracoes />
+            </Suspense>
+          </ProtectedRoute>
+        } />
         
         {/* Not found route */}
         <Route path="*" element={

src/components/layout/Sidebar.tsx

@@ -1,4 +1,3 @@
-
 import { Link, NavLink, useLocation } from 'react-router-dom';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { 
@@ -11,7 +10,8 @@ import {
   MessageSquareText,
   Users,
   Menu,
-  X
+  X,
+  Settings
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
@@ -125,6 +125,21 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
             </NavLink>
           </div>
         </div>
+        <div className="px-3 py-2">
+          <h2 className="mb-2 px-3 text-sm font-semibold tracking-tight">
+            Configurações
+          </h2>
+          <div className="space-y-1">
+            <NavLink 
+              to="/configuracoes"
+              className={({ isActive }) => getNavLinkClass(isActive)}
+              onClick={isMobile ? onClose : undefined}
+            >
+              <Settings className="mr-2 h-4 w-4" />
+              <span>Configurações</span>
+            </NavLink>
+          </div>
+        </div>
       </div>
     </aside>
   );

src/components/settings/SettingsSidebar.tsx

@@ -0,0 +1,42 @@
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+} from "@/components/ui/sidebar";
+import { Settings } from "lucide-react";
+import { useLocation, NavLink } from "react-router-dom";
+
+export default function SettingsSidebar() {
+  const location = useLocation();
+
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>
+            Configurações
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild isActive={location.pathname === "/configuracoes"}>
+                  <NavLink to="/configuracoes">
+                    <Settings className="mr-2" />
+                    <span>Geral</span>
+                  </NavLink>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              {/* Adicione outros itens de configuração aqui futuramente */}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}

src/pages/Configuracoes.tsx

@@ -0,0 +1,18 @@
+
+import SettingsSidebar from "@/components/settings/SettingsSidebar";
+
+const Configuracoes = () => {
+  return (
+    <div className="flex min-h-screen bg-background">
+      <div className="hidden md:block w-64 flex-shrink-0 border-r">
+        <SettingsSidebar />
+      </div>
+      <main className="flex-1 p-6">
+        <h1 className="text-2xl font-bold mb-4">Configurações</h1>
+        {/* Aqui virá o conteúdo das configurações que você solicitar */}
+      </main>
+    </div>
+  );
+};
+
+export default Configuracoes;