khaerulikhfan/adminfusion-framework
0
1class AdminLayout extends HTMLElement {2 connectedCallback() {3 this.attachShadow({ mode: 'open' });4 this.shadowRoot.innerHTML = `5 <style>6 .sidebar-enter {7 transform: translateX(-100%);8 }9 .sidebar-enter-active {10 transform: translateX(0);11 transition: transform 300ms ease-out;12 }13 .sidebar-exit {14 transform: translateX(0);15 }16 .sidebar-exit-active {17 transform: translateX(-100%);18 transition: transform 300ms ease-in;19 }20 </style>21 <div class="flex h-screen overflow-hidden">22 <!-- Sidebar -->23 <aside class="w-64 bg-white dark:bg-gray-800 shadow-md transform transition-all duration-300 fixed lg:relative z-20" id="sidebar">24 <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">25 <h1 class="text-xl font-bold text-primary-500 dark:text-primary-400">AdminFusion</h1>26 <button id="sidebar-collapse" class="lg:hidden">27 <i data-feather="x"></i>28 </button>29 </div>30 <div class="p-4 border-b border-gray-200 dark:border-gray-700">31 <div class="flex items-center">32 <div class="h-10 w-10 rounded-full bg-primary-500 flex items-center justify-center text-white font-medium">AD</div>33 <div class="ml-3">34 <p class="text-sm font-medium dark:text-gray-300">Admin User</p>35 <p class="text-xs text-gray-500 dark:text-gray-400">Super Admin</p>36 </div>37 </div>38 </div>39 <div class="p-4 overflow-y-auto" style="height: calc(100% - 140px)">40 <custom-sidebar-menu>41 <div class="nav-item">42 <a href="/" class="nav-link active">43 <i data-feather="home" class="nav-icon"></i>44 <span class="nav-label">Dashboard</span>45 <span class="nav-badge">New</span>46 </a>47 </div>48 <custom-sidebar-dropdown icon="users" title="User Management">49 <div class="nav-item">50 <a href="/users" class="nav-link">51 <i data-feather="user" class="nav-icon"></i>52 <span class="nav-label">Users</span>53 </a>54 </div>55 <div class="nav-item">56 <a href="/roles" class="nav-link">57 <i data-feather="shield" class="nav-icon"></i>58 <span class="nav-label">Roles</span>59 </a>60 </div>61 </custom-sidebar-dropdown>62 <custom-sidebar-dropdown icon="settings" title="System">63 <div class="nav-item">64 <a href="/settings" class="nav-link">65 <i data-feather="settings" class="nav-icon"></i>66 <span class="nav-label">Settings</span>67 </a>68 </div>69 <div class="nav-item">70 <a href="/logs" class="nav-link">71 <i data-feather="file-text" class="nav-icon"></i>72 <span class="nav-label">Logs</span>73 </a>74 </div>75 </custom-sidebar-dropdown>76 <div class="nav-item">77 <button id="theme-toggle" class="nav-link w-full text-left">78 <i data-feather="moon" class="nav-icon"></i>79 <span class="nav-label">Toggle Theme</span>80 </button>81 </div>82 </custom-sidebar-menu>83 </div>84 <div class="p-4 border-t border-gray-200 dark:border-gray-700">85 <a href="/logout" class="flex items-center text-sm text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">86 <i data-feather="log-out" class="mr-2"></i>87 Logout88 </a>89 </div>90</aside>91 <!-- Main content -->92 <div class="flex-1 overflow-auto">93 <!-- Header -->94 <header class="bg-white dark:bg-gray-800 shadow-sm p-4 flex justify-between items-center">95 <button id="sidebar-toggle" class="lg:hidden">96 <i data-feather="menu"></i>97 </button>98 <div class="flex items-center space-x-4">99 <div class="relative">100 <button id="notifications-btn" class="relative p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">101 <i data-feather="bell"></i>102 <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-secondary-500"></span>103 </button>104 </div>105 <div class="relative">106 <button id="messages-btn" class="relative p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">107 <i data-feather="mail"></i>108 <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-secondary-500"></span>109 </button>110 </div>111 <div class="flex items-center">112 <div class="h-8 w-8 rounded-full bg-primary-500 flex items-center justify-center text-white font-medium">AD</div>113 <span class="ml-2 text-sm font-medium dark:text-gray-300">Admin</span>114 <i data-feather="chevron-down" class="ml-1 h-4 w-4"></i>115 </div>116 </div>117 </header>118 119 <!-- Breadcrumb -->120 <div class="px-6 pt-4">121 <nav class="flex" aria-label="Breadcrumb">122 <ol class="inline-flex items-center space-x-1 md:space-x-3">123 <li class="inline-flex items-center">124 <a href="/" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary-500 dark:text-gray-400 dark:hover:text-white">125 <i data-feather="home" class="mr-2 h-4 w-4"></i>126 Home127 </a>128 </li>129 <li>130 <div class="flex items-center">131 <i data-feather="chevron-right" class="h-4 w-4 text-gray-400"></i>132 <a href="#" class="ml-1 text-sm font-medium text-primary-500 hover:text-primary-600 md:ml-2 dark:text-primary-400">Dashboard</a>133 </div>134 </li>135 </ol>136 </nav>137 </div>138 139 <!-- Page content -->140 <main class="p-6 bg-gray-50 dark:bg-gray-900 min-h-[calc(100vh-120px)]">141<slot></slot>142 </main>143 </div>144 </div>145 `;146 147 // Add event listeners148 this.shadowRoot.getElementById('theme-toggle').addEventListener('click', toggleTheme);149 this.shadowRoot.getElementById('sidebar-toggle').addEventListener('click', () => {150 const sidebar = this.shadowRoot.getElementById('sidebar');151 sidebar.classList.toggle('hidden');152 });153 }154}155 156customElements.define('custom-admin-layout', AdminLayout);