|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | + <title>@yield('title', 'bun-queue')</title> |
| 7 | + @stack('head') |
| 8 | + <style> |
| 9 | + *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
| 10 | + body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } |
| 11 | + |
| 12 | + /* Sidebar collapsed state overrides */ |
| 13 | + .sidebar.collapsed { width: 56px !important; } |
| 14 | + .sidebar.collapsed .sidebar-brand-text { display: none; } |
| 15 | + .sidebar.collapsed .sidebar-toggle-btn { margin-left: auto; margin-right: auto; } |
| 16 | + .sidebar.collapsed .nav-label { opacity: 0; height: 0; padding: 0; overflow: hidden; } |
| 17 | + .sidebar.collapsed .nav-item-text { display: none; } |
| 18 | + .main-wrapper.sidebar-collapsed { margin-left: 56px !important; } |
| 19 | + </style> |
| 20 | + @stack('styles') |
| 21 | +</head> |
| 22 | +<body class="bg-[#0a0a0f] text-zinc-50 leading-relaxed min-h-screen @yield('body-class')"> |
| 23 | + @include('../partials/sidebar') |
| 24 | + |
| 25 | + <!-- Main Content --> |
| 26 | + <div class="main-wrapper transition-all duration-200 ease-in-out @yield('main-class', 'min-h-screen')" id="main-wrapper" ref="main-wrapper" style="margin-left: 240px;"> |
| 27 | + @yield('content') |
| 28 | + </div> |
| 29 | + |
| 30 | + <script> |
| 31 | + // Sidebar toggle |
| 32 | + const sidebar = useRef('sidebar') |
| 33 | + const mainWrapper = useRef('main-wrapper') |
| 34 | + const sidebarStorage = useLocalStorage('sidebar-collapsed', false) |
| 35 | + |
| 36 | + if (sidebarStorage.get() === true || sidebarStorage.get() === 'true') { |
| 37 | + sidebar.classList.add('collapsed') |
| 38 | + mainWrapper.classList.add('sidebar-collapsed') |
| 39 | + } |
| 40 | + |
| 41 | + useEventListener('click', () => { |
| 42 | + sidebar.classList.toggle('collapsed') |
| 43 | + mainWrapper.classList.toggle('sidebar-collapsed') |
| 44 | + sidebarStorage.set(sidebar.classList.contains('collapsed')) |
| 45 | + }, { target: '#sidebar-toggle' }) |
| 46 | + |
| 47 | + // Active nav highlighting based on current route |
| 48 | + const currentPath = useRoute().path |
| 49 | + const navItems = document.querySelectorAll('#sidebar .nav-item') |
| 50 | + navItems.forEach((item) => { |
| 51 | + const href = item.getAttribute('href') |
| 52 | + if (!href) return |
| 53 | + const isActive = href === '/' ? currentPath === '/' : currentPath.startsWith(href) |
| 54 | + if (isActive) { |
| 55 | + item.classList.remove('text-zinc-400', 'hover:bg-[#1e1e26]', 'hover:text-zinc-50') |
| 56 | + item.classList.add('bg-indigo-500', 'text-white') |
| 57 | + const icon = item.querySelector('svg') |
| 58 | + if (icon) { |
| 59 | + icon.classList.remove('opacity-70') |
| 60 | + icon.classList.add('opacity-100') |
| 61 | + } |
| 62 | + } |
| 63 | + }) |
| 64 | + </script> |
| 65 | + @stack('scripts') |
| 66 | +</body> |
| 67 | +</html> |
0 commit comments