Spaces:
Running
Running
Okay now add nitro as ssr and add an express backend with a simple login and authentication system that creates session id and stores session id as http only cookie and in the ssr middleware for all routes we do have a check for the http only cookie to check if is present or expired to redirect to home page or to login page
d502d70 verified | class AppSidebar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| width: 250px; | |
| background-color: #0f172a; /* slate-900 */ | |
| border-right: 1px solid #1e293b; /* slate-800 */ | |
| padding: 1.5rem 1rem; | |
| display: none; /* Hidden on mobile by default */ | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| @media (min-width: 1024px) { | |
| :host { | |
| display: flex; | |
| } | |
| } | |
| .menu-label { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: #64748b; /* slate-500 */ | |
| margin-bottom: 0.5rem; | |
| padding-left: 0.75rem; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| padding: 0.75rem; | |
| color: #cbd5e1; /* slate-300 */ | |
| text-decoration: none; | |
| border-radius: 0.5rem; | |
| transition: background 0.2s, color 0.2s; | |
| font-size: 0.9rem; | |
| } | |
| .nav-item:hover { | |
| background-color: #1e293b; /* slate-800 */ | |
| color: white; | |
| } | |
| .nav-item.active { | |
| background-color: #4f46e5; /* indigo-600 */ | |
| color: white; | |
| } | |
| .nav-item i { | |
| width: 18px; | |
| height: 18px; | |
| } | |
| </style> | |
| <div class="menu-label">Main</div> | |
| <a href="#" class="nav-item active"> | |
| <i data-feather="grid"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="#" class="nav-item"> | |
| <i data-feather="layers"></i> | |
| <span>Projects</span> | |
| </a> | |
| <a href="#" class="nav-item"> | |
| <i data-feather="users"></i> | |
| <span>Team</span> | |
| </a> | |
| <div class="menu-label" style="margin-top: 1rem;">Development</div> | |
| <a href="#" class="nav-item"> | |
| <i data-feather="code"></i> | |
| <span>Components</span> | |
| </a> | |
| <a href="#" class="nav-item"> | |
| <i data-feather="database"></i> | |
| <span>API Keys</span> | |
| </a> | |
| <a href="#" class="nav-item"> | |
| <i data-feather="terminal"></i> | |
| <span>Logs</span> | |
| </a> | |
| `; | |
| feather.replace(); | |
| } | |
| } | |
| customElements.define('app-sidebar', AppSidebar); |