home/torsearch
1
0
Fork 0
Code Issues 22 Pull Requests 1 Actions 3 Packages Projects 4 Releases Wiki Activity

patch: active/inactive styles on navbar

Browse Source
This commit is contained in:
brock
2025-05-01 23:01:15 -05:00
parent d3176baff2
commit 73b3e5179a
2 changed files with 38 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
templates/components/NavBar.html.twig
View File

@@ -1,24 +1,19 @@
<nav {{ attributes }} class="flex h-screen flex-col justify-between bg-cyan-950">
<nav {{ attributes }} {{ stimulus_controller('navbar') }} {{ stimulus_action('navbar', 'setActive')}} class="flex h-screen flex-col justify-between bg-cyan-950">
<div class="px-4 py-6">
<ul class="mt-6 space-y-1">
<li>
<a
href="{{ path('app_index') }}"
class="block rounded-lg
<a href="{{ path('app_index') }}"
class="block rounded-lg
bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60
px-4 py-2 text-sm font-medium text-gray-50"
>
px-4 py-2 text-sm font-medium text-gray-50">
Dashboard
</a>
</li>
<li>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-50 hover:bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60"
>
<span class="text-sm font-medium"> Downloads </span>
<summary class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-50 hover:bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60">
<span class="text-sm font-medium">Downloads</span>
<span class="shrink-0 transition duration-300 group-open:-rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -34,22 +29,17 @@
</svg>
</span>
</summary>
<ul class="mt-2 space-y-1 px-4">
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700"
>
<a href="{{ path('app_search') }}"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700">
In Progress
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700"
>
<a href="{{ path('app_search') }}"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700">
Complete
</a>
</li>
@@ -58,10 +48,8 @@
</li>
<li>
<a
href="{{ path('app_media_preferences') }}"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700"
>
<a href="{{ path('app_media_preferences') }}"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700">
Preferences
</a>
</li>
@@ -69,7 +57,7 @@
</div>
<div class="sticky inset-x-0 bottom-0 border-t border-orange-500">
<a href="#" class="flex items-center gap-2 p-4 bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60">
<a href="#" class="nav-foot flex items-center gap-2 p-4 bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60">
<span class="rounded-full p-2 border-orange-500 border-2">
<twig:ux:icon name="ri:user-line" width="30" class="text-gray-50"/>
</span>