Dynamic menu rendering upgrade

Raza9798 · Raza9798 · commit 314160fbab03 · 2024-08-10T16:13:21.000+05:30
diff --git a/app/Services/MenuService.php b/app/Services/MenuService.php
@@ -14,7 +14,7 @@ public function buildMenu()
 
         $menu = SpatieMenu::new()
             ->addClass('flex items-center space-x-4')
-            ->addItemClass('px-4 py-2 rounded-md bg-green-700 text-white hover:bg-green-600 transition duration-300 ease-in-out');
+            ->addItemClass('p-2 flex items-center text-sm text-white focus:outline-none focus:text-white');
 
         $this->createMenuItems($menuItems)->each(function ($item) use ($menu) {
             $menu->add($item);
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
@@ -19,5 +19,9 @@ public function run(): void
             'name' => 'Test User',
             'email' => 'test@example.com',
         ]);
+
+        $this->call([
+            MenuSeeder::class,
+        ]);
     }
 }
diff --git a/database/seeders/MenuSeeder.php b/database/seeders/MenuSeeder.php
@@ -15,39 +15,15 @@ public function run()
                 'url' => '/',
                 'order' => 1
             ],
-            [
-                'name' => 'Properties',
-                'url' => '/properties',
-                'order' => 2,
-                'children' => [
-                    ['name' => 'For Sale', 'url' => '/properties/for-sale', 'order' => 1],
-                    ['name' => 'For Rent', 'url' => '/properties/for-rent', 'order' => 2],
-                ]
-            ],
-            [
-                'name' => 'Services',
-                'url' => '/services',
-                'order' => 3,
-                'children' => [
-                    ['name' => 'Buying', 'url' => '/services/buying', 'order' => 1],
-                    ['name' => 'Selling', 'url' => '/services/selling', 'order' => 2],
-                    ['name' => 'Renting', 'url' => '/services/renting', 'order' => 3],
-                ]
-            ],
             [
                 'name' => 'About',
                 'url' => '/about',
-                'order' => 4
+                'order' => 2
             ],
             [
                 'name' => 'Contact',
                 'url' => '/contact',
-                'order' => 5
-            ],
-            [
-                'name' => 'Calculators',
-                'url' => '/calculators',
-                'order' => 6
+                'order' => 3
             ],
         ];
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
         "vite": "^5.4.0"
     },
     "dependencies": {
+        "preline": "^2.4.1",
         "vite-plugin-static-copy": "^1.0.6"
     }
 }
diff --git a/resources/views/livewire/navigation.blade.php b/resources/views/livewire/navigation.blade.php
@@ -1,11 +1,55 @@
-<nav class="navigation fixed top-0 w-full flex justify-between" style="background-color: #f0f0f0; padding: 1rem 0;">
-    <div class="container" style="max-width: 1200px; margin: auto; display: flex; justify-content: space-between; align-items: center;">
-        <a href="#" style="font-weight: bold; text-decoration: none; color: #333;">CMS ss</a>
-        <ul style="list-style: none; display: flex; gap: 20px; margin: 0; padding: 0;">
-            <li><a href="/" style="text-decoration: none; color: #333;">Home</a></li>
-            <li><a href="#" style="text-decoration: none; color: #333;">About</a></li>
-            <li><a href="#" style="text-decoration: none; color: #333;">Blog</a></li>
-            <li><a href="#" style="text-decoration: none; color: #333;">Contact</a></li>
-        </ul>
-    </div>
-</nav>
+<header class="flex flex-wrap md:justify-start md:flex-nowrap z-50 w-full bg-blue-600">
+    <nav class="relative max-w-[66rem] w-full md:flex md:items-center md:justify-between md:gap-3 mx-auto px-4 sm:px-6 lg:px-8 py-2">
+      <div class="flex items-center justify-between">
+        <a class="flex-none font-semibold text-xl text-white focus:outline-none focus:opacity-80" href="#" aria-label="Brand"> {{ config('app.name') }} </a>
+  
+        <div class="md:hidden">
+          <button type="button" class="hs-collapse-toggle relative size-9 flex justify-center items-center text-sm font-semibold rounded-lg border border-white/50 text-white hover:bg-white/10 focus:outline-none focus:bg-white/10 disabled:opacity-50 disabled:pointer-events-none" id="hs-base-header-collapse" aria-expanded="false" aria-controls="hs-base-header" aria-label="Toggle navigation" data-hs-collapse="#hs-base-header">
+            <svg class="hs-collapse-open:hidden size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
+            <svg class="hs-collapse-open:block shrink-0 hidden size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+            <span class="sr-only">Toggle navigation</span>
+          </button>
+        </div>
+      </div>
+  
+      <div id="hs-base-header" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow md:block" aria-labelledby="hs-base-header-collapse">
+        <div class="overflow-hidden overflow-y-auto max-h-[75vh] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
+          <div class="py-2 md:py-0 flex flex-col md:flex-row md:items-center md:justify-end gap-0.5 md:gap-1">
+            
+            {!! app(App\Services\MenuService::class)->buildMenu() !!}
+
+            <div class="relative flex flex-wrap items-center gap-x-1.5 md:ps-2.5 mt-1 md:mt-0 md:ms-1.5 before:block before:absolute before:top-1/2 before:-start-px before:w-px before:h-4 before:bg-white/30 before:-translate-y-1/2">
+                @if (auth()->check())
+                    @php
+                        $user = auth()->user();
+                        $role = $user->getRoleNames()->first() ?? 'user';
+                        $dashboardUrl = $role === 'admin' ? '/admin' : '/' . $role;
+                    @endphp
+
+                    <a href="{{ route('dashboard') }}"
+                        class="p-2 w-full flex items-center text-sm text-white/80 hover:text-white focus:outline-none focus:text-white">
+                        <svg class="shrink-0 size-4 me-3 md:me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                         <path d="M5 3a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5Zm14 18a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4ZM5 11a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H5Zm14 2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h4Z"/>
+                        </svg>
+                        {{ ucfirst($role) }} Dashboard
+                    </a>
+                @else
+                    <a href="{{ route('login') }}"
+                        class="p-2  flex items-center text-sm text-white/80 hover:text-white focus:outline-none focus:text-white">
+                        <svg class="shrink-0 size-4 me-3 md:me-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+                        Login
+                    </a>
+                    <a href="{{ route('register') }}"
+                        class="p-2  flex items-center text-sm text-white/80 hover:text-white focus:outline-none focus:text-white">
+                        <svg class="shrink-0 size-4 me-3 md:me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                            <path fill-rule="evenodd" d="M9 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 9a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1a4 4 0 0 0-4-4H7Zm8-1a1 1 0 0 1 1-1h1v-1a1 1 0 1 1 2 0v1h1a1 1 0 1 1 0 2h-1v1a1 1 0 1 1-2 0v-1h-1a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
+                        </svg>
+                        Register
+                    </a>
+                @endif
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </header>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,6 +9,7 @@ export default {
         './vendor/laravel/jetstream/**/*.blade.php',
         './storage/framework/views/*.php',
         './resources/views/**/*.blade.php',
+        'node_modules/preline/dist/*.js',
     ],
 
     theme: {
@@ -19,5 +20,5 @@ export default {
         },
     },
 
-    plugins: [forms, typography],
+    plugins: [forms, typography, require('preline/plugin'),],
 };

Original file line number	Diff line number	Diff line change
`@@ -19,5 +19,9 @@ public function run(): void`
`19`	`19`	`'name' => 'Test User',`
`20`	`20`	`'email' => 'test@example.com',`
`21`	`21`	`]);`
	`22`	`+`
	`23`	`+ $this->call([`
	`24`	`+ MenuSeeder::class,`
	`25`	`+ ]);`
`22`	`26`	`}`
`23`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@`
`16`	`16`	`"vite": "^5.4.0"`
`17`	`17`	`},`
`18`	`18`	`"dependencies": {`
	`19`	`+ "preline": "^2.4.1",`
`19`	`20`	`"vite-plugin-static-copy": "^1.0.6"`
`20`	`21`	`}`
`21`	`22`	`}`