blob: e6fbf43a3366b636ecbbe61e24a6a9eb00af06a7 (
plain) (
blame)
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
|
<script lang="ts">
import { uiState } from '../stores/ui.svelte';
</script>
<aside
class="w-20 lg:w-64 dark:bg-black bg-white/80 border-r dark:border-white/5 border-gray-200/50 flex flex-col items-center lg:items-start transition-all duration-300 shrink-0 py-6 backdrop-blur-md"
>
<!-- Logo Area -->
<div
class="h-16 w-full flex items-center justify-center lg:justify-start lg:px-8 mb-6"
>
<!-- Icon Logo (Small) -->
<div
class="lg:hidden text-3xl font-black bg-clip-text text-transparent bg-gradient-to-tr from-indigo-400 to-fuchsia-400 drop-shadow-lg"
>
D
</div>
<!-- Full Logo (Large) -->
<div
class="hidden lg:block font-bold text-2xl tracking-wider dark:text-white text-gray-900"
>
<span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-fuchsia-400">DROP</span>OUT
</div>
</div>
<!-- Navigation -->
<nav class="flex-1 w-full flex flex-col gap-3 px-3">
<!-- Nav Item Helper -->
{#snippet navItem(view, icon, label)}
<button
class="group flex items-center lg:gap-4 justify-center lg:justify-start w-full px-0 lg:px-5 py-3.5 rounded-xl transition-all duration-200 relative overflow-hidden
{uiState.currentView === view
? 'bg-gradient-to-r from-indigo-500/20 to-purple-500/20 dark:text-white text-indigo-900 shadow-lg shadow-indigo-500/10 dark:border border-white/10'
: 'dark:text-zinc-400 text-gray-500 hover:text-black dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5'}"
onclick={() => uiState.setView(view)}
>
<span class="text-xl relative z-10 transition-transform group-hover:scale-110 duration-200">{icon}</span>
<span class="hidden lg:block font-medium relative z-10">{label}</span>
<!-- Active Indicator Line -->
{#if uiState.currentView === view}
<div class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-indigo-500 rounded-r-full lg:hidden"></div>
{/if}
</button>
{/snippet}
{@render navItem('home', '🏠', 'Home')}
{@render navItem('versions', '📦', 'Versions')}
{@render navItem('settings', '⚙️', 'Settings')}
</nav>
<!-- Footer Info -->
<div
class="p-4 w-full flex justify-center lg:justify-start lg:px-8 opacity-50 hover:opacity-100 transition-opacity"
>
<div class="text-xs font-mono tracking-widest text-zinc-500">v{uiState.appVersion}</div>
</div>
</aside>
|