From 2f19be09de19c4a680331a05a2d705545bc54013 Mon Sep 17 00:00:00 2001
From: iridium34 <abstergodevelopment@gmail.com>
Date: Sun, 16 Mar 2025 00:41:01 +0100
Subject: [PATCH] refactored header.blade

---
 app/Livewire/Filament/Type.php                |  2 ++
 resources/views/components/header.blade.php   | 21 ++++++++++++---
 .../components/header/header-left.blade.php   |  3 +++
 .../components/header/header-right.blade.php  |  3 +++
 resources/views/components/navbar.blade.php   | 26 +++++++++++++------
 resources/views/layouts/app.blade.php         |  3 +++
 .../views/livewire/filament/color.blade.php   |  6 +++++
 7 files changed, 52 insertions(+), 12 deletions(-)
 create mode 100644 resources/views/components/header/header-left.blade.php
 create mode 100644 resources/views/components/header/header-right.blade.php

diff --git a/app/Livewire/Filament/Type.php b/app/Livewire/Filament/Type.php
index b866485..382f03c 100644
--- a/app/Livewire/Filament/Type.php
+++ b/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()
diff --git a/resources/views/components/header.blade.php b/resources/views/components/header.blade.php
index 20ec7b1..956fc50 100644
--- a/resources/views/components/header.blade.php
+++ b/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>
\ No newline at end of file
diff --git a/resources/views/components/header/header-left.blade.php b/resources/views/components/header/header-left.blade.php
new file mode 100644
index 0000000..ca87bfc
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/views/components/header/header-right.blade.php b/resources/views/components/header/header-right.blade.php
new file mode 100644
index 0000000..365ff83
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 4bb3a36..46bbd1f 100644
--- a/resources/views/components/navbar.blade.php
+++ b/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>
 
@@ -36,4 +45,5 @@
     </flux:menu>
   </flux:dropdown>
 
-</flux:header>
\ No newline at end of file
+</flux:header>
+</section>
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index a2aa733..c4bee3b 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -50,6 +50,9 @@
             </main>
         </div>
 
+        @livewireScripts
+        @fluxScripts
+
         @stack('modals')
 
 
diff --git a/resources/views/livewire/filament/color.blade.php b/resources/views/livewire/filament/color.blade.php
index ba58d27..203702d 100644
--- a/resources/views/livewire/filament/color.blade.php
+++ b/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