Spaces:
Running
Running
This is a crucial correction. You want the **Nextra Documentation Layout** (the structure) combined with the **Tactical Ops Color Palette & Font** (the skin), but **without** the "roleplay" elements (no "SYSTEM ONLINE" widgets, no dense data grids, no radar charts, no forced uppercase).
2d1d74f verified | class CustomSidebar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| padding: 2rem 1.5rem; | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .nav-group { | |
| margin-bottom: 2rem; | |
| } | |
| .nav-group-title { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: #888888; | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| } | |
| .nav-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .nav-item { | |
| margin-bottom: 0.25rem; | |
| } | |
| .nav-link { | |
| display: block; | |
| padding: 0.375rem 0; | |
| padding-left: 0.75rem; | |
| color: #888888; | |
| text-decoration: none; | |
| font-size: 0.875rem; | |
| border-left: 2px solid transparent; | |
| transition: all 0.2s ease; | |
| } | |
| .nav-link:hover { | |
| color: #e5e5e5; | |
| background-color: #111111; | |
| } | |
| /* Active State Logic handled by class addition in main JS, but we style the class here */ | |
| .nav-link.nav-item-active { | |
| color: #ff6600; | |
| border-left-color: #ff6600; | |
| font-weight: 500; | |
| } | |
| </style> | |
| <div> | |
| <div class="nav-group"> | |
| <div class="nav-group-title">Getting Started</div> | |
| <ul class="nav-list"> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link nav-item-active">Introduction</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link">Installation</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link">Configuration</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="nav-group"> | |
| <div class="nav-group-title">Core Concepts</div> | |
| <ul class="nav-list"> | |
| <li class="nav-item"> | |
| <a href="#architecture" class="nav-link sidebar-link">Architecture</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link sidebar-link">Data Flow</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link sidebar-link">Security</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="nav-group"> | |
| <div class="nav-group-title">Community</div> | |
| <ul class="nav-list"> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link sidebar-link">Contributing</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link sidebar-link">Changelog</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-sidebar', CustomSidebar); |