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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user