Spaces:
Running
Running
| <html> | |
| <head> | |
| <script type="module"> | |
| import { store as sidebarStore } from "/components/sidebar/sidebar-store.js"; | |
| </script> | |
| <!-- Wrapper composes existing sidebar components --> | |
| </head> | |
| <body> | |
| <div x-data> | |
| <template x-if="$store.sidebar"> | |
| <div class="sidebar-shell" | |
| @click.window="$store.sidebar.rowMenuClick($event, $refs.rowActionsMenu)" | |
| @keydown.escape.window="$store.sidebar.rowMenuClose()"> | |
| <x-component path="sidebar/top-section/header-icons.html"></x-component> | |
| <div id="left-panel" class="panel" x-data :class="{'hidden': !$store.sidebar.isOpen}"> | |
| <x-extension id="sidebar-start"></x-extension> | |
| <!--Sidebar upper elements--> | |
| <div class="left-panel-top no-scrollbar"> | |
| <!-- Top Section: Quick Actions --> | |
| <x-component path="sidebar/top-section/sidebar-top.html"></x-component> | |
| <!-- Chats List --> | |
| <div class="config-section" id="chats-section"> | |
| <x-component path="sidebar/chats/chats-list.html"></x-component> | |
| </div> | |
| <!-- Tasks List --> | |
| <div class="config-section" id="tasks-section"> | |
| <x-component path="sidebar/tasks/tasks-list.html"></x-component> | |
| </div> | |
| </div> | |
| <!--Sidebar lower elements--> | |
| <div class="left-panel-bottom"> | |
| <x-component path="sidebar/bottom/sidebar-bottom.html"></x-component> | |
| </div> | |
| <x-extension id="sidebar-end"></x-extension> | |
| </div> | |
| <div x-ref="rowActionsMenu" class="dropdown-menu sidebar-row-actions-menu" role="menu" | |
| x-show="$store.sidebar.rowMenuOpenId" x-transition :style="$store.sidebar.rowMenuStyle" | |
| style="display: none;" @click.stop> | |
| <x-extension id="sidebar-row-actions-menu"></x-extension> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| <style> | |
| /* Left Panel styles from index.css */ | |
| #left-panel { | |
| background-color: var(--color-panel); | |
| border-right: 1px solid var(--color-border); | |
| box-sizing: border-box; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| transition: all var(--transition-speed) ease-in-out; | |
| width: 250px; | |
| min-width: 250px; | |
| color: var(--color-text); | |
| box-shadow: 1px 0 5px rgba(0, 0, 0, 0.3); | |
| user-select: none; | |
| -webkit-user-select: none; | |
| /* Safari compatibility */ | |
| height: 100vh; | |
| /* Ensure full height */ | |
| overflow: hidden; | |
| /* Prevent overall panel overflow */ | |
| } | |
| /* Ensure component host behaves like the original direct children for flex layout */ | |
| #left-panel>.left-panel-top, | |
| #left-panel>.left-panel-bottom { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| #left-panel>.left-panel-top { | |
| flex: 1; | |
| min-height: 0; | |
| /* allow inner flex children to shrink properly */ | |
| } | |
| #left-panel.hidden { | |
| margin-left: -250px; | |
| } | |
| .left-panel-top { | |
| flex: 1 1 auto; | |
| /* Take available space */ | |
| display: -webkit-flex; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| /* Critical for allowing flex children to shrink */ | |
| overflow: hidden; | |
| justify-content: space-between; | |
| margin-top: 6.5rem; | |
| padding: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md); | |
| } | |
| .left-panel-bottom { | |
| position: relative; | |
| flex-shrink: 0; | |
| flex-grow: 0; | |
| /* Prevent bottom from growing */ | |
| } | |
| .sidebar-row-actions-menu { | |
| position: fixed; | |
| z-index: 9999; | |
| margin: 0; | |
| } | |
| .config-list li.sidebar-list-divider { | |
| border-top: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent); | |
| margin-top: var(--spacing-xs); | |
| padding-top: calc(0.28rem + var(--spacing-xs)); | |
| } | |
| /* Chats section container inside sidebar */ | |
| #chats-section { | |
| display: -webkit-flex; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| flex: 1 1 auto; | |
| /* Take all available space */ | |
| max-height: 100%; | |
| margin-inline-start: calc(0px - var(--spacing-sm)); | |
| width: calc(100% + var(--spacing-sm)); | |
| overflow: hidden; | |
| } | |
| /* Tasks section container inside sidebar */ | |
| #tasks-section { | |
| display: -webkit-flex; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| flex: 0 0 auto; | |
| /* Shrink to content, no reserved space */ | |
| max-height: 40%; | |
| /* Limit to 40% of viewport height when expanded */ | |
| margin-top: 0; | |
| margin-inline-start: calc(0px - var(--spacing-sm)); | |
| width: calc(100% + var(--spacing-sm)); | |
| padding-top: var(--spacing-md); | |
| overflow: hidden; | |
| } | |
| #chats-section .section-header-row, | |
| #tasks-section .section-header { | |
| margin-inline-start: var(--spacing-sm); | |
| } | |
| /* Flatten wrapper elements to maintain flex chain for inner scroll containers */ | |
| #chats-section>x-component, | |
| #chats-section>x-component>div[x-data], | |
| #tasks-section>x-component, | |
| #tasks-section>x-component>div[x-data], | |
| #tasks-section>x-component>div[x-data]>div[x-data] { | |
| display: contents; | |
| } | |
| /* Bootstrap collapse elements need proper display for animation to work */ | |
| #tasks-section .collapse { | |
| display: flex; | |
| flex-direction: column; | |
| flex: 1; | |
| min-height: 0; | |
| } | |
| /* During the collapsing transition, allow height animation to control size */ | |
| #tasks-section .collapsing { | |
| flex: 0 0 auto ; | |
| } | |
| /* Common section header styling (Chats, Tasks) - matching Preferences style */ | |
| .section-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 6px; | |
| margin: 0 0 0.5rem 0; | |
| padding: 0; | |
| -webkit-user-select: none; | |
| /* Safari compatibility */ | |
| user-select: none; | |
| font-size: var(--font-size-normal); | |
| } | |
| /* Collapsible section headers (Tasks) */ | |
| .section-header-collapsible { | |
| cursor: pointer; | |
| } | |
| .light-mode #left-panel { | |
| box-shadow: 1px 0 10px rgba(0, 0, 0, 0.1); | |
| } | |
| @media (max-width: 768px) { | |
| #left-panel { | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 250px ; | |
| /* Force width */ | |
| min-width: 250px; | |
| z-index: 1003; | |
| transition: all var(--transition-speed) ease-in-out; | |
| } | |
| #left-panel.hidden { | |
| margin-left: -250px; | |
| } | |
| } | |
| @media (max-height: 600px) { | |
| #chats-section { | |
| min-height: 100%; | |
| } | |
| .left-panel-top { | |
| overflow-y: auto; | |
| -webkit-scroll-behavior: smooth; | |
| scroll-behavior: smooth; | |
| } | |
| } | |
| </style> | |
| </body> | |
| </html> | |