mejoras

resources/views/components/folder-item.blade.php

@@ -1,9 +1,8 @@
-@props(['folder', 'currentFolder', 'expandedFolders', 'level' => 0])
-
+@props(['folder', 'currentFolder', 'expandedFolders', 'level' => 0, 'itemsCount' => 0])
 <li class="pl-{{ $level * 4 }}">
     <div class="flex items-center justify-between p-2 hover:bg-gray-50 
               {{ $folder->id === optional($currentFolder)->id ? 'bg-blue-50' : '' }}">
-        <div class="flex items-center flex-1" wire:click="selectFolder({{ $folder->id }})">
+        <div class="flex items-center relative flex-1" wire:click="selectFolder({{ $folder->id }})">
             <button wire:click.prevent="toggleFolder({{ $folder->id }})" 
                     class="mr-2">
                 @if(in_array($folder->id, $expandedFolders))
@@ -12,11 +11,13 @@
                     <x-icons icon="chevron-right" class="w-4 h-4" />
                 @endif
             </button>
-            <x-icons icon="folder" class="w-5 h-5 mr-2 text-yellow-500" />
-            <span>{{ $folder->name }}</span>
+            <flux:icon.folder class="size-5 mr-2 text-yellow-500"/> 
+            <span class="flex-1 whitespace-nowrap">{{ $folder->name }}</span>
+            @if($itemsCount > 0)
+                <flux:badge class="text-xs font-medium rounded-sm px-1 py-0.5 text-gray-700 dark:text-gray-200 bg-gray-400/15 dark:bg-white/10" size="sm" inset="top bottom">{{ $itemsCount }}</flux:badge>
+            @endif
         </div>
     </div>
-    
     @if(in_array($folder->id, $expandedFolders))
         <ul class="ml-4">
             @foreach($folder->children as $child)

resources/views/components/folder-tree.blade.php

@@ -5,9 +5,9 @@
         <div class="flex items-center flex-1" wire:click="selectFolder({{ $folder->id }})">
             <button wire:click.prevent="toggleFolder({{ $folder->id }})" class="mr-2">
                 @if(in_array($folder->id, $expandedFolders))
-                    <x-icons icon="chevron-down" class="w-4 h-4 text-gray-400" />
+                    <flux:icon.chevron-down class="size-4 text-gray-400" />
                 @else
-                    <x-icons icon="chevron-right" class="w-4 h-4 text-gray-400" />
+                    <flux:icon.chevron-right class="size-4 text-gray-400" />
                 @endif
             </button>
             <x-icons icon="folder" class="w-5 h-5 mr-2 text-yellow-500" />

resources/views/components/layouts/app.blade.php

@@ -1,4 +1,8 @@
-<x-layouts.app.header :title="$title ?? null">
+<x-layouts.app.header 
+    :title="$title ?? null"
+    :show-sidebar="$showSidebar ?? false"
+>
+
     <flux:main>
         {{ $slot }}
     </flux:main>

resources/views/components/layouts/app/header.blade.php

@@ -12,15 +12,14 @@
             </a>
 
             <flux:navbar class="-mb-px max-lg:hidden">
-                <flux:navbar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
-                    {{ __('Dashboard') }}
+                <flux:navbar.item icon="home" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
+                    {{ __('Inicio') }}
                 </flux:navbar.item>
-            </flux:navbar>
-            
-            <flux:navbar class="-mb-px max-lg:hidden">
-                <flux:navbar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
-                    {{ __('User') }}
+
+                <flux:navbar.item icon="link" :href="route('projects.index')" :current="request()->routeIs('dashboard')" wire:navigate>
+                    {{ __('Projects') }}
                 </flux:navbar.item>
+                
             </flux:navbar>
 
             <flux:spacer />
@@ -123,8 +122,24 @@
             </flux:navlist>
         </flux:sidebar>
 
-        {{ $slot }}
+        <!-- Contenedor principal con sidebar condicional -->
+        <div class="flex flex-1">        
+            @if($showSidebar)
+                <!-- Desktop Sidebar -->
+                <flux:sidebar class="hidden lg:block w-64 shrink-0 border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
+                    {{ $sidebar ?? '' }} <!-- Aquí se inyectará el contenido -->
+                    @stack('sidebar-menu')
+                </flux:sidebar>
+            @endif
+
+            <!-- Contenido principal -->
+            <main class="flex-1 overflow-auto">
+                {{ $slot }}
+            </main>
+        </div>
+
 
         @fluxScripts
+
     </body>
 </html>