Spaces:
Paused
Paused
File size: 5,451 Bytes
dff1e71 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 | <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 id="left-panel" class="panel" x-data :class="{'hidden': !$store.sidebar.isOpen}">
<!--Sidebar upper elements-->
<div class="left-panel-top">
<!-- Top Section: Header Icons + 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>
</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: 3.5rem;
padding: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
scrollbar-width: none;
-ms-overflow-style: none;
}
.left-panel-top::-webkit-scrollbar {
width: 0px;
}
.left-panel-bottom {
position: relative;
flex-shrink: 0;
flex-grow: 0;
/* Prevent bottom from growing */
}
/* 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%;
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;
padding-top: var(--spacing-md);
overflow: hidden;
}
/* 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 !important;
}
/* 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;
}
@media (max-width: 768px) {
#left-panel {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 250px !important;
/* 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> |