fix tax log
This commit is contained in:
437
frontend/src/lib/components/layout/Sidebar.svelte
Normal file
437
frontend/src/lib/components/layout/Sidebar.svelte
Normal file
@@ -0,0 +1,437 @@
|
||||
<!-- [DEF:Sidebar:Component] -->
|
||||
<script>
|
||||
/**
|
||||
* @TIER: CRITICAL
|
||||
* @PURPOSE: Persistent left sidebar with resource categories navigation
|
||||
* @LAYER: UI
|
||||
* @RELATION: BINDS_TO -> sidebarStore
|
||||
* @SEMANTICS: Navigation
|
||||
* @INVARIANT: Always shows active category and item
|
||||
*
|
||||
* @UX_STATE: Idle -> Sidebar visible with current state
|
||||
* @UX_STATE: Toggling -> Animation plays for 200ms
|
||||
* @UX_FEEDBACK: Active item highlighted with different background
|
||||
* @UX_RECOVERY: Click outside on mobile closes overlay
|
||||
*/
|
||||
|
||||
import { onMount } from "svelte";
|
||||
import { page } from "$app/stores";
|
||||
import {
|
||||
sidebarStore,
|
||||
toggleSidebar,
|
||||
setActiveItem,
|
||||
closeMobile,
|
||||
} from "$lib/stores/sidebar.js";
|
||||
import { t } from "$lib/i18n";
|
||||
import { browser } from "$app/environment";
|
||||
|
||||
// Sidebar categories with sub-items matching Superset-style navigation
|
||||
let categories = [
|
||||
{
|
||||
id: "dashboards",
|
||||
label: $t.nav?.dashboards || "DASHBOARDS",
|
||||
icon: "M3 3h18v18H3V3zm16 16V5H5v14h14z", // Grid icon
|
||||
path: "/dashboards",
|
||||
subItems: [
|
||||
{ label: $t.nav?.overview || "Overview", path: "/dashboards" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "datasets",
|
||||
label: $t.nav?.datasets || "DATASETS",
|
||||
icon: "M3 3h18v18H3V3zm2 2v14h14V5H5zm2 2h10v2H7V7zm0 4h10v2H7v-2zm0 4h6v2H7v-2z", // List icon
|
||||
path: "/datasets",
|
||||
subItems: [
|
||||
{ label: $t.nav?.all_datasets || "All Datasets", path: "/datasets" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "storage",
|
||||
label: $t.nav?.storage || "STORAGE",
|
||||
icon: "M4 4h16v16H4V4zm2 2v12h12V6H6zm2 2h8v2H8V8zm0 4h8v2H8v-2zm0 4h5v2H8v-2z", // Folder icon
|
||||
path: "/storage",
|
||||
subItems: [
|
||||
{ label: $t.nav?.backups || "Backups", path: "/storage/backups" },
|
||||
{
|
||||
label: $t.nav?.repositories || "Repositories",
|
||||
path: "/storage/repos",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "admin",
|
||||
label: $t.nav?.admin || "ADMIN",
|
||||
icon: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z", // User icon
|
||||
path: "/admin",
|
||||
subItems: [
|
||||
{ label: $t.nav?.admin_users || "Users", path: "/admin/users" },
|
||||
{ label: $t.nav?.admin_roles || "Roles", path: "/admin/roles" },
|
||||
{ label: $t.nav?.settings || "Settings", path: "/settings" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
let isExpanded = true;
|
||||
let activeCategory = "dashboards";
|
||||
let activeItem = "/dashboards";
|
||||
let isMobileOpen = false;
|
||||
let expandedCategories = new Set(["dashboards"]); // Track expanded categories
|
||||
|
||||
// Subscribe to sidebar store
|
||||
$: if ($sidebarStore) {
|
||||
isExpanded = $sidebarStore.isExpanded;
|
||||
activeCategory = $sidebarStore.activeCategory;
|
||||
activeItem = $sidebarStore.activeItem;
|
||||
isMobileOpen = $sidebarStore.isMobileOpen;
|
||||
}
|
||||
|
||||
// Reactive categories to update translations
|
||||
$: categories = [
|
||||
{
|
||||
id: "dashboards",
|
||||
label: $t.nav?.dashboards || "DASHBOARDS",
|
||||
icon: "M3 3h18v18H3V3zm16 16V5H5v14h14z", // Grid icon
|
||||
path: "/dashboards",
|
||||
subItems: [
|
||||
{ label: $t.nav?.overview || "Overview", path: "/dashboards" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "datasets",
|
||||
label: $t.nav?.datasets || "DATASETS",
|
||||
icon: "M3 3h18v18H3V3zm2 2v14h14V5H5zm2 2h10v2H7V7zm0 4h10v2H7v-2zm0 4h6v2H7v-2z", // List icon
|
||||
path: "/datasets",
|
||||
subItems: [
|
||||
{ label: $t.nav?.all_datasets || "All Datasets", path: "/datasets" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "storage",
|
||||
label: $t.nav?.storage || "STORAGE",
|
||||
icon: "M4 4h16v16H4V4zm2 2v12h12V6H6zm2 2h8v2H8V8zm0 4h8v2H8v-2zm0 4h5v2H8v-2z", // Folder icon
|
||||
path: "/storage",
|
||||
subItems: [
|
||||
{ label: $t.nav?.backups || "Backups", path: "/storage/backups" },
|
||||
{
|
||||
label: $t.nav?.repositories || "Repositories",
|
||||
path: "/storage/repos",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "admin",
|
||||
label: $t.nav?.admin || "ADMIN",
|
||||
icon: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z", // User icon
|
||||
path: "/admin",
|
||||
subItems: [
|
||||
{ label: $t.nav?.admin_users || "Users", path: "/admin/users" },
|
||||
{ label: $t.nav?.admin_roles || "Roles", path: "/admin/roles" },
|
||||
{ label: $t.nav?.settings || "Settings", path: "/settings" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// Update active item when page changes
|
||||
$: if ($page && $page.url.pathname !== activeItem) {
|
||||
// Find matching category
|
||||
const matched = categories.find((cat) =>
|
||||
$page.url.pathname.startsWith(cat.path),
|
||||
);
|
||||
if (matched) {
|
||||
activeCategory = matched.id;
|
||||
activeItem = $page.url.pathname;
|
||||
}
|
||||
}
|
||||
|
||||
// Handle click on sidebar item
|
||||
function handleItemClick(category) {
|
||||
console.log(`[Sidebar][Action] Clicked category ${category.id}`);
|
||||
setActiveItem(category.id, category.path);
|
||||
closeMobile();
|
||||
if (browser) {
|
||||
window.location.href = category.path;
|
||||
}
|
||||
}
|
||||
|
||||
// Handle click on category header to toggle expansion
|
||||
function handleCategoryToggle(categoryId, event) {
|
||||
event.stopPropagation();
|
||||
|
||||
if (!isExpanded) {
|
||||
console.log(
|
||||
`[Sidebar][Action] Expand sidebar and category ${categoryId}`,
|
||||
);
|
||||
toggleSidebar();
|
||||
expandedCategories.add(categoryId);
|
||||
expandedCategories = expandedCategories;
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`[Sidebar][Action] Toggle category ${categoryId}`);
|
||||
if (expandedCategories.has(categoryId)) {
|
||||
expandedCategories.delete(categoryId);
|
||||
} else {
|
||||
expandedCategories.add(categoryId);
|
||||
}
|
||||
expandedCategories = expandedCategories; // Trigger reactivity
|
||||
}
|
||||
|
||||
// Handle click on sub-item
|
||||
function handleSubItemClick(categoryId, path) {
|
||||
console.log(`[Sidebar][Action] Clicked sub-item ${path}`);
|
||||
setActiveItem(categoryId, path);
|
||||
closeMobile();
|
||||
// Force navigation if it's a link
|
||||
if (browser) {
|
||||
window.location.href = path;
|
||||
}
|
||||
}
|
||||
|
||||
// Handle toggle button click
|
||||
function handleToggleClick(event) {
|
||||
event.stopPropagation();
|
||||
console.log("[Sidebar][Action] Toggle sidebar");
|
||||
toggleSidebar();
|
||||
}
|
||||
|
||||
// Handle mobile overlay click
|
||||
function handleOverlayClick() {
|
||||
console.log("[Sidebar][Action] Close mobile overlay");
|
||||
closeMobile();
|
||||
}
|
||||
|
||||
// Close mobile overlay on route change
|
||||
$: if (isMobileOpen && $page) {
|
||||
closeMobile();
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Mobile overlay (only on mobile) -->
|
||||
{#if isMobileOpen}
|
||||
<div
|
||||
class="mobile-overlay"
|
||||
on:click={handleOverlayClick}
|
||||
on:keydown={(e) => e.key === "Escape" && handleOverlayClick()}
|
||||
role="presentation"
|
||||
></div>
|
||||
{/if}
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div
|
||||
class="sidebar {isExpanded ? 'expanded' : 'collapsed'} {isMobileOpen
|
||||
? 'mobile'
|
||||
: 'mobile-hidden'}"
|
||||
>
|
||||
<!-- Header (simplified, toggle moved to footer) -->
|
||||
<div class="sidebar-header {isExpanded ? '' : 'collapsed'}">
|
||||
{#if isExpanded}
|
||||
<span class="font-semibold text-gray-800">Menu</span>
|
||||
{:else}
|
||||
<span class="text-xs text-gray-500">M</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Navigation items -->
|
||||
<nav class="nav-section">
|
||||
{#each categories as category}
|
||||
<div class="category">
|
||||
<!-- Category Header -->
|
||||
<div
|
||||
class="category-header {activeCategory === category.id
|
||||
? 'active'
|
||||
: ''}"
|
||||
on:click={(e) => handleCategoryToggle(category.id, e)}
|
||||
on:keydown={(e) =>
|
||||
(e.key === "Enter" || e.key === " ") &&
|
||||
handleCategoryToggle(category.id, e)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label={category.label}
|
||||
aria-expanded={expandedCategories.has(category.id)}
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
class="nav-icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d={category.icon} />
|
||||
</svg>
|
||||
{#if isExpanded}
|
||||
<span class="nav-label">{category.label}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if isExpanded}
|
||||
<svg
|
||||
class="category-toggle {expandedCategories.has(category.id)
|
||||
? 'expanded'
|
||||
: ''}"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M6 9l6 6 6-6" />
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Sub Items (only when expanded) -->
|
||||
{#if isExpanded && expandedCategories.has(category.id)}
|
||||
<div class="sub-items">
|
||||
{#each category.subItems as subItem}
|
||||
<div
|
||||
class="sub-item {activeItem === subItem.path ? 'active' : ''}"
|
||||
on:click={() => handleSubItemClick(category.id, subItem.path)}
|
||||
on:keydown={(e) =>
|
||||
(e.key === "Enter" || e.key === " ") &&
|
||||
handleSubItemClick(category.id, subItem.path)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
{subItem.label}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<!-- Footer with Collapse button -->
|
||||
{#if isExpanded}
|
||||
<div class="sidebar-footer">
|
||||
<button class="collapse-btn" on:click={handleToggleClick}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
class="mr-2"
|
||||
>
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</svg>
|
||||
Collapse
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="sidebar-footer">
|
||||
<button class="collapse-btn" on:click={handleToggleClick} aria-label="Expand sidebar">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M9 18l6-6-6-6" />
|
||||
</svg>
|
||||
<span class="collapse-btn-text">Expand</span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- [/DEF:Sidebar:Component] -->
|
||||
|
||||
<style>
|
||||
.sidebar {
|
||||
@apply bg-white border-r border-gray-200 flex flex-col h-screen fixed left-0 top-0 z-30;
|
||||
transition: width 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.sidebar.expanded {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.sidebar.mobile {
|
||||
@apply translate-x-0;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.sidebar.mobile-hidden {
|
||||
@apply -translate-x-full md:translate-x-0;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
@apply flex items-center justify-between p-4 border-b border-gray-200;
|
||||
}
|
||||
|
||||
.sidebar-header.collapsed {
|
||||
@apply justify-center;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
@apply w-5 h-5 flex-shrink-0;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
@apply ml-3 text-sm font-medium truncate;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
@apply flex items-center justify-between px-4 py-3 cursor-pointer transition-colors hover:bg-gray-100;
|
||||
}
|
||||
|
||||
.category-header.active {
|
||||
@apply bg-blue-50 text-blue-600 md:border-r-2 md:border-blue-600;
|
||||
}
|
||||
|
||||
.category-toggle {
|
||||
@apply text-gray-400 transition-transform duration-200;
|
||||
}
|
||||
|
||||
.category-toggle.expanded {
|
||||
@apply rotate-180;
|
||||
}
|
||||
|
||||
.sub-items {
|
||||
@apply bg-gray-50 overflow-hidden transition-all duration-200;
|
||||
}
|
||||
|
||||
.sub-item {
|
||||
@apply flex items-center px-4 py-2 pl-12 cursor-pointer transition-colors text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900;
|
||||
}
|
||||
|
||||
.sub-item.active {
|
||||
@apply bg-blue-50 text-blue-600;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
@apply border-t border-gray-200 p-4;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
@apply flex items-center justify-center w-full px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors;
|
||||
}
|
||||
|
||||
.collapse-btn-text {
|
||||
@apply ml-2;
|
||||
}
|
||||
|
||||
/* Mobile overlay */
|
||||
.mobile-overlay {
|
||||
@apply fixed inset-0 bg-black bg-opacity-50 z-20;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.mobile-overlay {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user