Spaces:
Running
Running
ok, it looks better. can you make all buttons work? instead if menu being in home it works in Menu button, and memories i have option to submit image i want and it will be shown there, i can also add text, in announcements i get pop up to write what i want and it'll be posted there, in schedule dshifts i get option to schedule one it first asks me waht type of shift then i write then asks me when (date/month/year/hour/minute) and i write additional info and that. in staff info i have option to add staff name, discord username, there bio, there poisistion, there rank and that. and in legal info write out tos, and that
6ca953f verified | class CustomSidebar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| width: 16rem; | |
| background-color: #f9f5f0; | |
| border-right: 1px solid #e2d5c8; | |
| background-color: white; | |
| box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1); | |
| z-index: 40; | |
| transform: translateX(-100%); | |
| transition: transform 0.3s ease-in-out; | |
| padding-top: 4rem; | |
| } | |
| :host(.open) { | |
| transform: translateX(0); | |
| } | |
| .sidebar-content { | |
| padding: 1rem; | |
| height: 100%; | |
| overflow-y: auto; | |
| } | |
| .sidebar-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 0.75rem 1rem; | |
| border-radius: 0.375rem; | |
| margin-bottom: 0.25rem; | |
| color: #5a3c2b; | |
| background-color: #f0e6d9; | |
| text-decoration: none; | |
| transition: all 0.2s; | |
| } | |
| .sidebar-item:hover { | |
| background-color: #e2d5c8; | |
| transform: translateX(4px); | |
| box-shadow: 2px 0 8px rgba(107, 70, 43, 0.1); | |
| } | |
| .sidebar-item.active { | |
| background-color: #d4b999; | |
| color: #fff; | |
| font-weight: 500; | |
| } | |
| .sidebar-item i { | |
| margin-right: 0.75rem; | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| } | |
| @media (min-width: 768px) { | |
| :host { | |
| transform: translateX(0); | |
| } | |
| } | |
| </style> | |
| <div class="sidebar-content"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-[#5a3c2b]">Menu</h3> | |
| <button id="sidebar-minimize" class="text-[#5a3c2b] hover:text-[#3a2619]"> | |
| <i data-feather="chevron-left"></i> | |
| </button> | |
| </div> | |
| <a href="index.html" class="sidebar-item"> | |
| <i data-feather="home"></i> | |
| <span>Home</span> | |
| </a> | |
| <a href="menu.html" class="sidebar-item"> | |
| <i data-feather="coffee"></i> | |
| <span>Menu</span> | |
| </a> | |
| <a href="memories.html" class="sidebar-item"> | |
| <i data-feather="image"></i> | |
| <span>Memories</span> | |
| </a> | |
| <a href="announcements.html" class="sidebar-item"> | |
| <i data-feather="bell"></i> | |
| <span>Announcements</span> | |
| </a> | |
| <a href="shifts.html" class="sidebar-item"> | |
| <i data-feather="clock"></i> | |
| <span>Scheduled Shifts</span> | |
| </a> | |
| <a href="staff.html" class="sidebar-item"> | |
| <i data-feather="users"></i> | |
| <span>Staff Info</span> | |
| </a> | |
| <a href="legal.html" class="sidebar-item"> | |
| <i data-feather="file-text"></i> | |
| <span>Legal Info</span> | |
| </a> | |
| </div> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-sidebar', CustomSidebar); |