diff options
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/src/App.svelte | 26 |
1 files changed, 15 insertions, 11 deletions
diff --git a/ui/src/App.svelte b/ui/src/App.svelte index a648f98..292c719 100644 --- a/ui/src/App.svelte +++ b/ui/src/App.svelte @@ -20,28 +20,32 @@ <div class="flex h-screen bg-zinc-900 text-white font-sans overflow-hidden select-none"> <!-- Sidebar --> - <aside class="w-16 lg:w-64 bg-zinc-950 flex flex-col items-center lg:items-start transition-all duration-300 border-r border-zinc-800"> - <div class="p-6 w-full flex justify-center lg:justify-start"> - <div class="font-bold text-xl tracking-wider text-indigo-400">DROP<span class="text-white">OUT</span></div> + <aside class="w-20 lg:w-64 bg-zinc-950 flex flex-col items-center lg:items-start transition-all duration-300 border-r border-zinc-800 shrink-0"> + <div class="h-20 w-full flex items-center justify-center lg:justify-start lg:px-6 border-b border-zinc-800/50"> + <!-- Icon Logo (Visible on small) --> + <div class="lg:hidden text-2xl font-black bg-clip-text text-transparent bg-gradient-to-tr from-indigo-400 to-purple-400">D</div> + <!-- Full Logo (Visible on large) --> + <div class="hidden lg:block font-bold text-xl tracking-wider text-indigo-400">DROP<span class="text-white">OUT</span></div> </div> - <nav class="flex-1 w-full flex flex-col gap-2 p-2"> - <button class="flex items-center gap-4 w-full text-left px-4 py-3 rounded-lg hover:bg-zinc-800 bg-zinc-800/50 text-zinc-100 transition-colors"> - <span class="text-xl">🏠</span> - <span class="hidden lg:block font-medium">Home</span> + <nav class="flex-1 w-full flex flex-col gap-2 p-3"> + <button class="group flex items-center lg:gap-4 justify-center lg:justify-start w-full px-0 lg:px-4 py-3 rounded-lg hover:bg-zinc-800 bg-zinc-800/50 text-zinc-100 transition-all relative"> + <span class="text-xl relative z-10">🏠</span> + <span class="hidden lg:block font-medium relative z-10 transition-opacity">Home</span> + <!-- Tooltip for small screen (optional, simple css approach) --> </button> - <button class="flex items-center gap-4 w-full text-left px-4 py-3 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-colors"> + <button class="group flex items-center lg:gap-4 justify-center lg:justify-start w-full px-0 lg:px-4 py-3 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-all"> <span class="text-xl">📦</span> <span class="hidden lg:block font-medium">Versions</span> </button> - <button class="flex items-center gap-4 w-full text-left px-4 py-3 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-colors"> + <button class="group flex items-center lg:gap-4 justify-center lg:justify-start w-full px-0 lg:px-4 py-3 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-all"> <span class="text-xl">⚙️</span> <span class="hidden lg:block font-medium">Settings</span> </button> </nav> - <div class="p-4 w-full border-t border-zinc-800"> - <div class="text-xs text-center lg:text-left text-zinc-600 font-mono">v0.1.3</div> + <div class="p-4 w-full border-t border-zinc-800 flex justify-center lg:justify-start"> + <div class="text-xs text-zinc-600 font-mono">v0.1.3</div> </div> </aside> |