Navigation active route classes and side bar list items --styles

Raccoon254 · May 18, 2024 · c1adad5 · c1adad5
1 parent e16fe78
commit c1adad5
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 6 deletions.
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -20,3 +20,16 @@ input:-webkit-autofill:active {
 input:-webkit-autofill {
     background-color: transparent !important;
 }
+
+.side{
+    @apply h-12 rounded-lg mb-2;
+}
+
+.side> a{
+    @apply flex gap-3 h-full px-4 items-center;
+}
+
+/*Side active */
+.active{
+    @apply bg-gray-100 text-blue-500;
+}
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -16,12 +16,12 @@
         @vite(['resources/css/app.css', 'resources/js/app.js'])
     </head>
     <body class="font-sans antialiased">
-        <div class="min-h-screen bg-gray-100">
+        <div class="min-h-screen bg-white">
             @include('layouts.navigation')
             <div class="flex relative gap-2 p-2">
                 @include('layouts.sidebar')
                 <!-- Page Content -->
-                <main class="w-full bg-white rounded-lg">
+                <main class="w-full bg-gray-100 rounded-lg">
                     {{ $slot }}
                 </main>
             </div>

diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
@@ -1,4 +1,4 @@
-<div class="navbar">
+<div class="navbar bg-white">
     <div class="navbar-start">
         <label for="my-drawer-2" class="md:hidden">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"

diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php
@@ -5,10 +5,20 @@
     </div>
     <div class="drawer-side">
         <label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
-        <ul class="menu bg-gray-100 p-4 w-60 min-h-full text-black/90">
+        <ul class="menu bg-white px-4 pt-0 w-60 min-h-full text-black/90">
             <!-- Sidebar content here -->
-            <li><a>Sidebar Item 1</a></li>
-            <li><a>Sidebar Item 2</a></li>
+            <li class="side {{ request()->routeIs('dashboard') ? 'active' : '' }}">
+                <a href="{{ route('dashboard') }}" class="flex items-center gap-2 p-2 hover:bg-gray-200">
+                    <i class="fas fa-home"></i>
+                    <span>Discover</span>
+                </a>
+            </li>
+            <li class="side {{ request()->routeIs('profile.edit') ? 'active' : '' }}">
+                <a href="{{ route('profile.edit') }}" class="flex items-center gap-2 p-2 hover:bg-gray-200">
+                    <i class="fas fa-user"></i>
+                    <span>Profile</span>
+                </a>
+            </li>
         </ul>
     </div>
 </div>