zias/serengo
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:sidebar toggle

Browse Source
This commit is contained in:
ッ
2025-11-22 14:11:38 +01:00
parent 42d7246cff
commit 4c73b6f919
1 changed files with 61 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/routes/+page.svelte
View File

@@ -253,17 +253,8 @@
/>
</div>
<!-- Toggle button -->
<button class="sidebar-toggle" onclick={toggleSidebar} aria-label="Toggle finds list">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
{#if isSidebarVisible}
<path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
{:else}
<path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
{/if}
</svg>
</button>
<!-- Sidebar container -->
<div class="sidebar-container">
<!-- Left sidebar with finds list -->
<div class="finds-sidebar" class:hidden={!isSidebarVisible}>
<div class="finds-header">
@@ -280,6 +271,22 @@
<FindsList {finds} onFindExplore={handleFindExplore} hideTitle={true} />
</div>
</div>
<!-- Toggle button -->
<button
class="sidebar-toggle"
class:collapsed={!isSidebarVisible}
onclick={toggleSidebar}
aria-label="Toggle finds list"
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
{#if isSidebarVisible}
<path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
{:else}
<path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
{/if}
</svg>
</button>
</div>
</div>
<!-- Modals -->
@@ -320,10 +327,14 @@
box-shadow: none !important;
}
.sidebar-container {
display: flex;
flex-direction: row;
margin-left: 20px;
gap: 12px;
}
.sidebar-toggle {
position: fixed;
top: 90px;
left: 20px;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.95);
@@ -349,9 +360,6 @@
}
.finds-sidebar {
position: fixed;
top: 80px;
left: 80px;
width: 40%;
max-width: 1000px;
min-width: 500px;
@@ -370,6 +378,7 @@
}
.finds-sidebar.hidden {
display: none;
transform: translateX(-100%);
opacity: 0;
pointer-events: none;
@@ -395,32 +404,38 @@
}
@media (max-width: 768px) {
.sidebar-toggle {
top: auto;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.sidebar-toggle svg {
transform: rotate(90deg);
}
.finds-sidebar {
top: auto;
.sidebar-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column-reverse;
align-items: center;
margin: 0;
}
.sidebar-toggle.collapsed {
margin: 12px auto;
}
.sidebar-toggle svg {
transform: rotate(-90deg);
}
.finds-sidebar {
width: 100%;
max-width: 100vw;
min-width: 0;
height: 50vh;
border-radius: 20px 20px 0 0;
box-sizing: border-box;
}
.finds-sidebar.hidden {
transform: translateY(100%);
display: none;
transform: translateX(-100%);
opacity: 0;
pointer-events: none;
}
.finds-header {