feat: add dark/light mode toggle to navigation, enhance sidebar styles, and update layout colors

- Implemented a button for toggling between dark and light modes in the navigation component.
- Adjusted sidebar width and improved active link indicators with shadows for better visibility.
- Updated layout colors for a more vibrant and cohesive theme, focusing on a "Pure Neutral Black + Neon" aesthetic.
- Refined ambient gradient accents for improved content readability across devices.
- Enhanced console layout for better responsiveness and user experience.
This commit is contained in:
2026-04-22 01:43:38 -04:00
parent 68043f0416
commit 6440a24390
22 changed files with 1244 additions and 59 deletions

View File

@@ -1,4 +1,4 @@
<aside class="mt-24 ml-8 w-64 h-[calc(100vh-2rem)] md:flex hidden flex-col fixed top-0 left-0 rtl:right-0 z-10">
<aside class="mt-24 ml-8 w-56 h-[calc(100vh-2rem)] md:flex hidden flex-col fixed top-0 left-0 rtl:right-0 z-10">
<div class="h-9/10 bg-background-secondary/80 backdrop-blur-md border border-neutral/50 rounded-2xl shadow-xl overflow-hidden">
<div class="flex flex-col h-full">
@@ -45,7 +45,7 @@
{{ $child['active'] ? 'text-primary bg-primary/10 border border-primary/20' : 'text-base/70 hover:text-foreground hover:bg-background/50' }}">
{{ $child['name'] }}
@if($child['active'])
<div class="ml-auto w-2 h-2 bg-primary rounded-full"></div>
<div class="ml-auto w-2 h-2 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/60"></div>
@endif
</x-navigation.link>
@endforeach
@@ -63,7 +63,7 @@
@endisset
<span>{{ $nav['name'] }}</span>
@if($nav['active'])
<div class="ml-auto w-2 h-2 bg-primary rounded-full"></div>
<div class="ml-auto w-2 h-2 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/60"></div>
@endif
</x-navigation.link>
@endif
@@ -104,7 +104,7 @@
{{ $child['active'] ? 'text-primary bg-primary/10 border border-primary/20' : 'text-base/70 hover:text-foreground hover:bg-background/50' }}">
{{ $child['name'] }}
@if($child['active'])
<div class="ml-auto w-2 h-2 bg-primary rounded-full"></div>
<div class="ml-auto w-2 h-2 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/60"></div>
@endif
</x-navigation.link>
@endif
@@ -123,7 +123,7 @@
@endisset
<span>{{ $nav['name'] }}</span>
@if($nav['active'])
<div class="ml-auto w-2 h-2 bg-primary rounded-full"></div>
<div class="ml-auto w-2 h-2 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/60"></div>
@endif
</x-navigation.link>
@endif