Initial commit: Second Brain Platform
Complete platform with unified design system and real API integration. Apps: Dashboard, Fitness, Budget, Inventory, Trips, Reader, Media, Settings Infrastructure: SvelteKit + Python gateway + Docker Compose
This commit is contained in:
Yusuf Suleman
215
frontend-v2/src/lib/components/layout/Navbar.svelte
Normal file
215
frontend-v2/src/lib/components/layout/Navbar.svelte
Normal file
@@ -0,0 +1,215 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { toggleTheme, isDark } from '$lib/stores/theme.svelte';
|
||||
import { Map, Sun, Moon, User, Search } from '@lucide/svelte';
|
||||
|
||||
interface Props {
|
||||
onOpenCommand?: () => void;
|
||||
}
|
||||
|
||||
let { onOpenCommand }: Props = $props();
|
||||
|
||||
let tripsOpen = $state(false);
|
||||
let fitnessOpen = $state(false);
|
||||
|
||||
function isActive(path: string): boolean {
|
||||
return page.url.pathname === path || page.url.pathname.startsWith(path + '/');
|
||||
}
|
||||
|
||||
function closeDropdowns() {
|
||||
tripsOpen = false;
|
||||
fitnessOpen = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onclick={closeDropdowns} />
|
||||
|
||||
<nav class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<a href="/" class="navbar-logo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/><path d="M9 4v13"/><path d="M15 7v13"/></svg>
|
||||
Platform
|
||||
</a>
|
||||
|
||||
<div class="navbar-links">
|
||||
<a href="/" class="navbar-link" class:active={page.url.pathname === '/'}>Dashboard</a>
|
||||
|
||||
<!-- Trips dropdown -->
|
||||
<a href="/trips" class="navbar-link" class:active={isActive('/trips')}>Trips</a>
|
||||
|
||||
<!-- Fitness dropdown -->
|
||||
<div class="nav-dropdown" role="menu">
|
||||
<button
|
||||
class="navbar-link"
|
||||
class:active={isActive('/fitness')}
|
||||
onclick={(e) => { e.stopPropagation(); fitnessOpen = !fitnessOpen; tripsOpen = false; }}
|
||||
>Fitness</button>
|
||||
{#if fitnessOpen}
|
||||
<div class="nav-dropdown-menu" onclick={(e) => e.stopPropagation()}>
|
||||
<a href="/fitness" class="nav-dropdown-item" onclick={closeDropdowns}>Dashboard</a>
|
||||
<a href="/fitness/foods" class="nav-dropdown-item" onclick={closeDropdowns}>Foods</a>
|
||||
<a href="/fitness/goals" class="nav-dropdown-item" onclick={closeDropdowns}>Goals</a>
|
||||
<a href="/fitness/templates" class="nav-dropdown-item" onclick={closeDropdowns}>Templates</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<a href="/inventory" class="navbar-link" class:active={isActive('/inventory')}>Inventory</a>
|
||||
<a href="/budget" class="navbar-link" class:active={isActive('/budget')}>Budget</a>
|
||||
<a href="/reader" class="navbar-link" class:active={isActive('/reader')}>Reader</a>
|
||||
<a href="/media" class="navbar-link" class:active={isActive('/media')}>Media</a>
|
||||
</div>
|
||||
|
||||
<button class="search-trigger" onclick={onOpenCommand}>
|
||||
<Search size={14} />
|
||||
Search...
|
||||
<kbd>⌘K</kbd>
|
||||
</button>
|
||||
|
||||
<div class="navbar-right">
|
||||
<button class="navbar-icon" onclick={toggleTheme} title="Toggle theme">
|
||||
{#if isDark()}
|
||||
<Sun size={18} />
|
||||
{:else}
|
||||
<Moon size={18} />
|
||||
{/if}
|
||||
</button>
|
||||
<a href="/settings" class="navbar-icon" title="Settings">
|
||||
<User size={18} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.navbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
background: var(--nav-bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
.navbar-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 56px;
|
||||
padding: 0 var(--sp-6);
|
||||
gap: var(--sp-6);
|
||||
}
|
||||
.navbar-logo {
|
||||
font-weight: 600;
|
||||
font-size: var(--text-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
color: var(--text-1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.navbar-logo svg { width: 20px; height: 20px; }
|
||||
|
||||
.navbar-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-0.5);
|
||||
flex: 1;
|
||||
}
|
||||
.navbar-link {
|
||||
padding: 6px var(--sp-3);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 500;
|
||||
color: var(--text-3);
|
||||
transition: all var(--transition);
|
||||
background: none;
|
||||
border: none;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
.navbar-link:hover { color: var(--text-1); background: var(--accent-dim); }
|
||||
.navbar-link.active { color: var(--text-1); background: var(--accent-dim); }
|
||||
|
||||
.nav-dropdown { position: relative; }
|
||||
.nav-dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
min-width: 160px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--card-shadow);
|
||||
padding: var(--sp-1);
|
||||
z-index: 60;
|
||||
margin-top: var(--sp-1);
|
||||
}
|
||||
.nav-dropdown-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--text-2);
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
transition: all var(--transition);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-dropdown-item:hover { background: var(--accent-dim); color: var(--text-1); }
|
||||
|
||||
.navbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-1);
|
||||
margin-left: auto;
|
||||
}
|
||||
.navbar-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-3);
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.navbar-icon:hover { color: var(--text-1); background: var(--accent-dim); }
|
||||
|
||||
.search-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
padding: 6px var(--sp-3);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface-secondary);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-3);
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
min-width: 200px;
|
||||
}
|
||||
.search-trigger:hover { border-color: var(--accent); color: var(--text-2); }
|
||||
.search-trigger kbd {
|
||||
margin-left: auto;
|
||||
font-size: var(--text-xs);
|
||||
font-family: var(--mono);
|
||||
background: var(--canvas);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-xs);
|
||||
color: var(--text-4);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar-links, .search-trigger { display: none !important; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user