Spaces:

Alsmwal
/

UniversityAI

Runtime error

App Files Files

Alsmwal commited on Jan 22

Commit

40bf1a3

verified ·

1 Parent(s): 2581b53

Update Admin-Dashboard.html

Browse files

Files changed (1) hide show

Admin-Dashboard.html +168 -8

Admin-Dashboard.html CHANGED Viewed

@@ -49,10 +49,11 @@
             height: 100dvh;
             padding: 20px;
             transition: all 0.3s ease;
-            z-index: 100;
             display: flex;
             flex-direction: column;
             overflow-y: auto;
         }
         .light-mode .sidebar {
@@ -65,12 +66,20 @@
             box-shadow: 2px 0 10px rgba(0,0,0,0.3);
         }
         .logo {
             font-size: 24px;
             font-weight: bold;
             color: var(--olive-light);
-            margin-bottom: 40px;
-            text-align: center;
         }
         .menu-item {
@@ -131,6 +140,7 @@
             margin-left: 250px;
             padding: 30px;
             min-height: 100vh;
         }
         .header-bar {
@@ -153,6 +163,7 @@
             position: relative;
             cursor: pointer;
             transition: all 0.3s ease;
         }
         .theme-toggle::after {
@@ -503,6 +514,11 @@
             cursor: pointer;
             box-shadow: 0 2px 5px rgba(0,0,0,0.2);
             font-size: 20px;
         }
         .sidebar-overlay {
@@ -518,6 +534,64 @@
             transition: opacity 0.3s;
         }
         @media (max-width: 768px) {
             .sidebar {
                 transform: translateX(-100%);
@@ -563,6 +637,15 @@
                 overflow-x: auto;
                 -webkit-overflow-scrolling: touch;
             }
         }
         /* Modal Styles */
@@ -650,7 +733,7 @@
 </head>
 <body class="light-mode">
     <!-- Mobile Menu Toggle -->
-    <button class="menu-toggle" onclick="toggleSidebar()">☰</button>
     <!-- Sidebar Overlay -->
     <div class="sidebar-overlay" onclick="toggleSidebar()"></div>
@@ -663,7 +746,13 @@
     <!-- Sidebar -->
     <div class="sidebar" id="sidebar">
-        <div class="logo">🎓 University AI</div>
         <div class="menu-item active" data-section="dashboard">
             <span>📊</span> Dashboard
@@ -681,13 +770,14 @@
         <button class="logout-btn" onclick="logout()">
             🚪 Logout
         </button>
     </div>
     <!-- Main Content -->
     <div class="main-content">
         <div class="header-bar">
             <h1>Admin Dashboard 👨‍💼</h1>
-            <div class="theme-toggle" onclick="toggleTheme()"></div>
         </div>
         <div id="alert" class="alert"></div>
@@ -865,8 +955,72 @@
         // Toggle Sidebar for Mobile
         function toggleSidebar() {
             document.getElementById('sidebar').classList.toggle('active');
-            const overlay = document.querySelector('.sidebar-overlay');
-            overlay.classList.toggle('active');
         }
         // Loading Spinner Functions
@@ -885,6 +1039,12 @@
             document.body.classList.remove("light-mode", "dark-mode");
             document.body.classList.add(savedTheme + "-mode");
             await checkAuth();
             await loadStats();

             height: 100dvh;
             padding: 20px;
             transition: all 0.3s ease;
+            z-index: 1000;
             display: flex;
             flex-direction: column;
             overflow-y: auto;
+            box-sizing: border-box;
         }
         .light-mode .sidebar {
             box-shadow: 2px 0 10px rgba(0,0,0,0.3);
         }
+        .sidebar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 30px;
+            width: 100%;
+            position: relative;
+        }
         .logo {
             font-size: 24px;
             font-weight: bold;
             color: var(--olive-light);
+            margin: 0;
         }
         .menu-item {
             margin-left: 250px;
             padding: 30px;
             min-height: 100vh;
+            transition: margin-left 0.3s ease;
         }
         .header-bar {
             position: relative;
             cursor: pointer;
             transition: all 0.3s ease;
+            flex-shrink: 0;
         }
         .theme-toggle::after {
             cursor: pointer;
             box-shadow: 0 2px 5px rgba(0,0,0,0.2);
             font-size: 20px;
+            transition: all 0.3s ease;
+        }
+        .menu-toggle.active {
+            left: 220px;
         }
         .sidebar-overlay {
             transition: opacity 0.3s;
         }
+        /* Desktop Sidebar Toggle */
+        .icon-btn {
+            background: transparent;
+            border: none;
+            color: var(--olive-light);
+            font-size: 24px;
+            cursor: pointer;
+            padding: 5px;
+            border-radius: 5px;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .icon-btn:hover {
+            background: rgba(58, 102, 42, 0.1);
+        }
+        /* Resizer Styles */
+        .resizer {
+            width: 6px;
+            height: 100%;
+            background: transparent;
+            position: absolute;
+            right: 0;
+            top: 0;
+            cursor: col-resize;
+            z-index: 102;
+            transition: background 0.2s;
+        }
+        .resizer:hover, .sidebar:hover .resizer {
+            background: rgba(58, 102, 42, 0.2);
+        }
+        body.resizing {
+            cursor: col-resize;
+            user-select: none;
+        }
+        body.resizing .sidebar,
+        body.resizing .main-content {
+            transition: none !important;
+        }
+        @media (min-width: 769px) {
+            body.sidebar-collapsed .sidebar {
+                transform: translateX(-100%);
+            }
+            body.sidebar-collapsed .main-content {
+                margin-left: 0 !important;
+            }
+            body.sidebar-collapsed #expandSidebarBtn {
+                display: block !important;
+            }
+        }
         @media (max-width: 768px) {
             .sidebar {
                 transform: translateX(-100%);
                 overflow-x: auto;
                 -webkit-overflow-scrolling: touch;
             }
+            #collapseSidebarBtn {
+                display: none;
+            }
+            #expandSidebarBtn {
+                display: none !important;
+            }
+            .resizer {
+                display: none;
+            }
         }
         /* Modal Styles */
 </head>
 <body class="light-mode">
     <!-- Mobile Menu Toggle -->
+    <button class="menu-toggle" id="menuToggle" onclick="toggleSidebar()">☰</button>
     <!-- Sidebar Overlay -->
     <div class="sidebar-overlay" onclick="toggleSidebar()"></div>
     <!-- Sidebar -->
     <div class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <div class="logo">🎓 University AI</div>
+            <div style="display: flex; gap: 10px; align-items: center;">
+                <div class="theme-toggle" onclick="toggleTheme()"></div>
+                <button id="collapseSidebarBtn" class="icon-btn" title="Collapse Sidebar">◀</button>
+            </div>
+        </div>
         <div class="menu-item active" data-section="dashboard">
             <span>📊</span> Dashboard
         <button class="logout-btn" onclick="logout()">
             🚪 Logout
         </button>
+        <div class="resizer" id="sidebarResizer"></div>
     </div>
     <!-- Main Content -->
     <div class="main-content">
         <div class="header-bar">
+            <button id="expandSidebarBtn" class="icon-btn" style="display: none; margin-right: 15px;" title="Show Sidebar">☰</button>
             <h1>Admin Dashboard 👨‍💼</h1>
         </div>
         <div id="alert" class="alert"></div>
         // Toggle Sidebar for Mobile
         function toggleSidebar() {
             document.getElementById('sidebar').classList.toggle('active');
+            document.querySelector('.sidebar-overlay').classList.toggle('active');
+            const toggleBtn = document.getElementById('menuToggle');
+            toggleBtn.classList.toggle('active');
+            if (toggleBtn.classList.contains('active')) {
+                toggleBtn.innerHTML = '←';
+            } else {
+                toggleBtn.innerHTML = '☰';
+            }
+        }
+        // Desktop Sidebar Logic
+        function toggleDesktopSidebar() {
+            document.body.classList.toggle('sidebar-collapsed');
+            const isCollapsed = document.body.classList.contains('sidebar-collapsed');
+            localStorage.setItem('sidebar_collapsed', isCollapsed);
+        }
+        function initSidebarState() {
+            const isCollapsed = localStorage.getItem('sidebar_collapsed') === 'true';
+            if (isCollapsed && window.innerWidth > 768) {
+                document.body.classList.add('sidebar-collapsed');
+            }
+        }
+        function initResizer() {
+            const sidebar = document.getElementById('sidebar');
+            const resizer = document.getElementById('sidebarResizer');
+            const mainContent = document.querySelector('.main-content');
+            let isResizing = false;
+            // Load saved width
+            const savedWidth = localStorage.getItem('sidebar_width');
+            if (savedWidth && window.innerWidth > 768) {
+                sidebar.style.width = savedWidth;
+                if (!document.body.classList.contains('sidebar-collapsed')) {
+                    mainContent.style.marginLeft = savedWidth;
+                }
+            }
+            resizer.addEventListener('mousedown', (e) => {
+                isResizing = true;
+                document.body.classList.add('resizing');
+                const handleMouseMove = (e) => {
+                    if (!isResizing) return;
+                    let newWidth = e.clientX;
+                    if (newWidth < 200) newWidth = 200;
+                    if (newWidth > 500) newWidth = 500;
+                    sidebar.style.width = `${newWidth}px`;
+                    mainContent.style.marginLeft = `${newWidth}px`;
+                };
+                const handleMouseUp = () => {
+                    isResizing = false;
+                    document.body.classList.remove('resizing');
+                    document.removeEventListener('mousemove', handleMouseMove);
+                    document.removeEventListener('mouseup', handleMouseUp);
+                    localStorage.setItem('sidebar_width', sidebar.style.width);
+                };
+                document.addEventListener('mousemove', handleMouseMove);
+                document.addEventListener('mouseup', handleMouseUp);
+            });
         }
         // Loading Spinner Functions
             document.body.classList.remove("light-mode", "dark-mode");
             document.body.classList.add(savedTheme + "-mode");
+            initSidebarState();
+            initResizer();
+            document.getElementById('collapseSidebarBtn').addEventListener('click', toggleDesktopSidebar);
+            document.getElementById('expandSidebarBtn').addEventListener('click', toggleDesktopSidebar);
             await checkAuth();
             await loadStats();