Kaizen.1

assets/css/custom.css

@@ -0,0 +1,150 @@
+
+/* Import Google Font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+    --primary-color: #4F46E5;
+    --secondary-color: #10B981;
+    --light-bg: #F3F4F6;
+    --light-surface: #FFFFFF;
+    --light-text: #111827;
+    --dark-bg: #1F2937;
+    --dark-surface: #374151;
+    --dark-text: #F9FAFB;
+    --border-radius: 0.5rem;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body.light-mode {
+    background-color: var(--light-bg);
+    color: var(--light-text);
+}
+
+body.dark-mode {
+    background-color: var(--dark-bg);
+    color: var(--dark-text);
+}
+
+.surface {
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.light-mode .surface {
+    background-color: var(--light-surface);
+    color: var(--light-text);
+    border: 1px solid #E5E7EB;
+}
+
+.dark-mode .surface {
+    background-color: var(--dark-surface);
+    color: var(--dark-text);
+    border: 1px solid #4B5563;
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+.btn-primary:hover {
+    opacity: 0.9;
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.form-check-input:checked {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.sidebar {
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 280px;
+    padding-top: 56px; /* Navbar height */
+}
+
+.light-mode .sidebar {
+     background-color: var(--light-surface);
+}
+
+.dark-mode .sidebar {
+     background-color: var(--dark-surface);
+}
+
+
+.main-content {
+    margin-left: 280px;
+    padding-top: 72px; /* Navbar height + padding */
+    transition: margin-left 0.3s;
+}
+
+.sidebar.collapsed {
+    width: 0;
+    overflow: hidden;
+}
+
+.main-content.expanded {
+    margin-left: 0;
+}
+
+@media (max-width: 768px) {
+    .sidebar {
+        width: 280px; /* Fixed width for the overlay sidebar */
+        position: fixed; /* Ensure it overlays content */
+        top: 0;
+        left: 0;
+        height: 100vh;
+        z-index: 1040; /* Above most content, below modals */
+        transform: translateX(0); /* Default to visible, then hide if collapsed */
+        transition: transform 0.3s ease-in-out; /* Smooth transition */
+        padding-top: 56px; /* Navbar height */
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Optional shadow */
+    }
+    .sidebar.collapsed { /* When the collapsed class is present, hide the sidebar */
+        transform: translateX(-280px);
+    }
+    /* On small screens, main-content should always be full width */
+    .main-content {
+        margin-left: 0;
+    }
+}
+
+.navbar-brand svg {
+    height: 2rem;
+}
+
+.nav-link {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    border-radius: var(--border-radius);
+    margin-bottom: 0.25rem;
+}
+
+.light-mode .nav-link {
+    color: #374151;
+}
+.dark-mode .nav-link {
+    color: #D1D5DB;
+}
+
+.light-mode .nav-link:hover, .light-mode .nav-link.active {
+    background-color: #E0E7FF;
+    color: var(--primary-color);
+}
+.dark-mode .nav-link:hover, .dark-mode .nav-link.active {
+    background-color: #4338CA;
+    color: white;
+}
+
+.nav-link svg {
+    width: 1.25rem;
+    height: 1.25rem;
+}

assets/js/main.js

@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const themeToggle = document.getElementById('theme-toggle');
+    const sidebarToggle = document.getElementById('sidebar-toggle');
+    const sidebar = document.querySelector('.sidebar');
+    const mainContent = document.querySelector('.main-content');
+    const currentTheme = localStorage.getItem('theme');
+
+    if (currentTheme) {
+        document.body.classList.add(currentTheme);
+        if (currentTheme === 'dark-mode') {
+            themeToggle.checked = true;
+        }
+    }
+
+    themeToggle.addEventListener('change', function () {
+        if (this.checked) {
+            document.body.classList.remove('light-mode');
+            document.body.classList.add('dark-mode');
+            localStorage.setItem('theme', 'dark-mode');
+        } else {
+            document.body.classList.remove('dark-mode');
+            document.body.classList.add('light-mode');
+            localStorage.setItem('theme', 'light-mode');
+        }
+    });
+
+    sidebarToggle.addEventListener('click', function () {
+        sidebar.classList.toggle('collapsed');
+        mainContent.classList.toggle('expanded');
+    });
+});