Dasshboard Changes

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

@@ -17,6 +17,7 @@
       font-family: 'Inter', Arial, sans-serif;
       display: flex;
       flex-direction: row;
+      transition: all 0.3s ease-in-out;
     }
 
     /* ✨ Sidebar Glass + Animated Highlight Effect */
@@ -36,7 +37,13 @@
       position: fixed;
       top: 0;
       left: 0;
+    }
 
+    /* Sidebar collapsed state */
+    .sidebar.collapsed {
+      transform: translateX(-100%);
+      opacity: 0;
+      visibility: hidden;
     }
 
     .sidebar .logo {
@@ -73,7 +80,6 @@
       overflow: hidden;
       transition: all 0.25s ease;
       z-index: 0;
-      
     }
 
     /* Background Animation */
@@ -151,6 +157,39 @@
       flex-direction: column;
       width: calc(100vw - 190px);
       margin-left: 190px;
+      transition: all 0.3s ease-in-out;
+    }
+
+    /* Main content when sidebar is collapsed */
+    .main-content.expanded {
+      margin-left: 0;
+      width: 100vw;
+    }
+
+    /* Header hamburger button */
+    .header-toggle {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 8px;
+      margin-right: 15px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.3s ease;
+      width: 40px;
+      height: 40px;
+      border-radius: 8px;
+    }
+
+    .header-toggle:hover {
+      transform: scale(1.1);
+      background: rgba(43, 92, 182, 0.1);
+    }
+
+    .header-toggle i {
+      font-size: 1.6rem;
+      color: #2b5cb6;
     }
 
     header {
@@ -165,6 +204,11 @@
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     }
 
+    .header-left {
+      display: flex;
+      align-items: center;
+    }
+
     .content-wrapper {
       padding: 18px 16px 16px 16px;
       flex-grow: 1;
@@ -222,16 +266,16 @@
     <a href="{{ route('admin.staff') }}" class="{{ request()->routeIs('admin.staff') ? 'active' : '' }}"><i class="bi bi-person-badge"></i> Staff</a>
     <a href="{{ route('admin.account') }}" class="{{ request()->routeIs('admin.account') ? 'active' : '' }}"><i class="bi bi-gear"></i> Account</a>
     <a href="{{ route('admin.marklist.index') }}" class="{{ request()->routeIs('admin.marklist.index') ? 'active' : '' }}"><i class="bi bi-list-check"></i> Mark List</a>
-
-    <!-- <form method="POST" action="{{ route('admin.logout') }}" class="mt-4 px-3">
-      @csrf
-      <button type="submit" class="btn btn-danger w-100"><i class="bi bi-box-arrow-right"></i> Logout</button>
-    </form> -->
   </div>
 
   <div class="main-content">
     <header>
-      <h5>@yield('page-title')</h5>
+      <div class="header-left">
+        <button class="header-toggle" id="headerToggle">
+          <i class="bi bi-list"></i>
+        </button>
+        <h5 class="mb-0">@yield('page-title')</h5>
+      </div>
       <div class="d-flex align-items-center gap-3">
         <i class="bi bi-bell position-relative fs-4">
           <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">2</span>
@@ -260,5 +304,23 @@
   </div>
   
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const headerToggle = document.getElementById('headerToggle');
+      const sidebar = document.querySelector('.sidebar');
+      const mainContent = document.querySelector('.main-content');
+      
+      // Function to toggle sidebar
+      function toggleSidebar() {
+        sidebar.classList.toggle('collapsed');
+        mainContent.classList.toggle('expanded');
+      }
+      
+      // Header toggle button click event
+      if (headerToggle) {
+        headerToggle.addEventListener('click', toggleSidebar);
+      }
+    });
+  </script>
 </body>
 </html>