refactored header.blade

app/Livewire/Filament/Type.php

@@ -3,7 +3,9 @@
 namespace App\Livewire\Filament;
 
 use Livewire\Component;
+use Livewire\Attributes\title;
 
+#[title('Types')]
 class Type extends Component
 {
     public function render()

resources/views/components/header.blade.php

@@ -1,7 +1,20 @@
 <div class="bg-zinc-700 w-full border-b border-accent">
-  <div class="container mx-auto py-6 px-4 sm:px-6 lg:px-8">
-    <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-      {{ $slot }}
-    </h2>
+  <div class="container mx-auto py-6 px-4 sm:px-6 lg:px-8 flex justify-between">
+    <x-header.header-left>
+      @isset($headerleft)
+        {{ $headerleft }}
+      @endisset
+    </x-header.header-left>
+    <div>
+      <h2 class="font-semibold text-2xl text-gray-800 dark:text-gray-200 leading-tight">
+        {{ $slot }}
+      </h2>
+    </div>
+    <x-header.header-right>
+      @isset($headerright)
+        {{ $headerright }}
+      @endisset
+    </x-header.header-right>
+
   </div>
 </div>

resources/views/components/header/header-left.blade.php

@@ -0,0 +1,3 @@
+<div class="w-1/4 flex gap-4 justify-start items-center">
+  {{ $slot }}
+</div>

resources/views/components/header/header-right.blade.php

@@ -0,0 +1,3 @@
+<div class="w-1/4 flex gap-4 justify-end items-center">
+  {{ $slot }}
+</div>

resources/views/components/navbar.blade.php

@@ -1,23 +1,32 @@
-<flux:header container class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700">
+<section class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700">
+<flux:header class="container mx-auto flex items-center">
   <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
 
   <flux:brand href="{{ route('dashboard') }}" logo="https://fluxui.dev/img/demo/logo.png" name="Filament" class="max-lg:hidden dark:hidden" />
   <flux:brand href="{{ route('dashboard') }}" logo="https://fluxui.dev/img/demo/dark-mode-logo.png" name="Filament" class="max-lg:hidden! hidden dark:flex" />
 
   <flux:navbar class="-mb-px max-lg:hidden">
-    <flux:navbar.item icon="home" href="{{ route('dashboard') }}">Dashboard</flux:navbar.item>
-    <flux:navbar.item icon="archive-box" href="{{ route('manufacturers.index') }}">Manufacturers</flux:navbar.item>
-    <flux:navbar.item icon="circle-stack" href="{{ route('filaments.index') }}">Filaments</flux:navbar.item>
-    <flux:navbar.item icon="chart-pie" href="{{ route('types.index') }}">Types</flux:navbar.item>
-    <flux:navbar.item icon="swatch" href="{{ route('colors.index') }}">Colors</flux:navbar.item>
+    <flux:navbar.item wire:navigate icon="home" href="{{ route('dashboard') }}">Dashboard</flux:navbar.item>
+    <flux:navbar.item wire:navigate icon="archive-box" href="{{ route('manufacturers.index') }}">Manufacturers</flux:navbar.item>
+
+    <flux:dropdown>
+      <flux:navbar.item icon="circle-stack" icon-trailing="chevron-down">Filaments</flux:navbar.item>
+  
+      <flux:navmenu>
+        <flux:navmenu.item wire:navigate href="{{ route('filaments.index') }}">All Filaments</flux:navmenu.item>
+        <flux:navmenu.separator />
+        <flux:navmenu.item wire:navigate href="{{ route('colors.index') }}">Colors</flux:navmenu.item>
+        <flux:navmenu.item wire:navigate href="{{ route('types.index') }}">Types</flux:navmenu.item>
+      </flux:navmenu>
+    </flux:dropdown>
   </flux:navbar>
 
+
   <flux:spacer />
 
   <flux:navbar class="mr-4">
     <flux:navbar.item icon="magnifying-glass" href="#" label="Search" />
     <flux:navbar.item class="max-lg:hidden" icon="cog-6-tooth" href="#" label="Settings" />
-    <flux:navbar.item class="max-lg:hidden" icon="information-circle" href="#" label="Help" />
     <flux:separator vertical variant="subtle" class="my-2"/>
   </flux:navbar>
 
@@ -37,3 +46,4 @@
   </flux:dropdown>
 
 </flux:header>
+</section>

resources/views/layouts/app.blade.php

@@ -50,6 +50,9 @@
             </main>
         </div>
 
+        @livewireScripts
+        @fluxScripts
+
         @stack('modals')
 
 

resources/views/livewire/filament/color.blade.php

@@ -1,8 +1,14 @@
 <section>
     <x-header>
         {{ __('Colors') }}
+
+        <x-slot name="headerright">
+            <a href="#" class="flex gap-2 hover:*:animate-spin"><flux:icon.arrow-path class="transition ease-in duration-300" />Refresh</a>
+            <a href="#" class="bg-zinc-500 hover:bg-green-500 text-zinc-50 hover:text-zinc-700 font-bold text-base py-2 px-4 rounded cursor-pointer">Create</a>
+        </x-slot>
     </x-header>
 
+
     <div class="container m-auto my-8 bg-zinc-700 rounded">
         <form method="POST" class="flex flex-col gap-4" wire:submit="create">
             @csrf