Merge pull request #55 from No-Country-simulation/PA-161-implementar-sidebar-plataforma-de-usuario

feat: ✨ Add sidebar app

Author: jfpanchi

frontend/platform/app/(authenticated)/layout.jsx

@@ -1,27 +1,35 @@
-'use client';
+"use client";
 
-import Sidebar from '@/shared/layout/sidebar/sidebar';
-import AppHeader from '@/shared/layout/appheader/header';
-import { Toaster } from '@/shared/ui/sonner';
+import { SidebarApp } from "@/shared/layout/sidebar/sidebar";
+import AppHeader from "@/shared/layout/appheader/header";
+import { Toaster } from "@/shared/ui/sonner";
+import { SidebarProvider, SidebarTrigger } from "@/shared/ui/sidebar";
 
 /**
  * Layout para todas las páginas autenticadas
  * Se aplica a todas las rutas excepto login y otras públicas
  */
 export default function AuthenticatedLayout({ children }) {
   return (
-    <div className='flex min-h-screen'>
-      {/* Sidebar fijo en el lado izquierdo */}
-      <Sidebar />
-
-      {/* Contenedor principal a la derecha del sidebar */}
-      <div className='flex-1 flex flex-col'>
-        <AppHeader />
-        <main className='flex-1 overflow-auto px-4 pt-4 pb-6 relative'>
-          {children}
-          <Toaster />
-        </main>
-      </div>
+    <div className="flex min-h-screen">
+      <SidebarProvider
+        style={{
+          "--sidebar-width": "18rem",
+          "--sidebar-width-mobile": "16rem",
+        }}
+      >
+        <SidebarApp/>
+        {/* Contenedor principal a la derecha del sidebar */}
+        <div className="flex-1 flex flex-col">
+          <AppHeader>
+          <SidebarTrigger />
+          </AppHeader>
+          <main className="flex-1 overflow-auto px-4 pt-4 pb-6 relative">
+            {children}
+            <Toaster />
+          </main>
+        </div>
+      </SidebarProvider>
     </div>
   );
 }

frontend/platform/app/globals.css

@@ -130,9 +130,9 @@
   --sidebar: #330764;
   --sidebar-foreground: oklch(0.985 0.001 106.423);
   --sidebar-primary: #330764;
-  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-accent: #b8b8d1;
-  --sidebar-accent-foreground: #330764;
+  --sidebar-primary-foreground: #f5f5f5;
+  --sidebar-accent: #5c3983;
+  --sidebar-accent-foreground: #f5f5f5;
   --sidebar-border: #b8b8d1;
   --sidebar-ring: oklch(0.709 0.01 56.259);
   --sidebar-dark-purple: #1e0339; /* Violeta más oscuro para iconos */

frontend/platform/features/auth/components/UserMenu.jsx

@@ -71,7 +71,7 @@ function UserMenu() {
 
   return (
     // Solo mostrar en vista de escritorio
-    <div className='hidden md:block'>
+    <div>
       <DropdownMenu open={open} onOpenChange={setOpen}>
         <DropdownMenuTrigger asChild>
           <button className='flex items-center space-x-2 rounded-full focus:outline-none'>

frontend/platform/hooks/use-mobile.js

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange);
+  }, [])
+
+  return !!isMobile
+}