w33b/hstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(nav): redesign navigation bar and add Browse/Community links

Browse Source 
Enhance the navigation with a modern floating glass design, new Browse and Community dropdown links, and improved theme/blur toggles that now handle multiple instances. Update dropdown components with rounded styling and support for wider widths, refine nav-link active states, and add navigation feature tests.
This commit is contained in:
w33b
2026-08-09 10:13:54 +02:00
parent d08e280ce0
commit 338c190ae8
16 changed files with 393 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/partials/blurswitcher.blade.php
+26 -34
View File
@@ -1,36 +1,28 @@
<div class="grid grid-cols-2">
<p class="cursor-default">{{ __('Blur effects') }}</p>
<div class="flex items-center">
<div class="absolute right-6">
<label for="toggleBlur" class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<!-- input -->
<input id="toggleBlur" type="checkbox" class="sr-only" checked />
<!-- line -->
<div class="w-10 h-4 bg-rose-600 dark:bg-gray-400 rounded-full shadow-inner">
</div>
<!-- dot -->
<div
class="dot absolute w-6 h-6 bg-white dark:bg-neutral-950 rounded-full shadow -left-1 -top-1 transition">
<div class="items-center ml-[4px] w-6 h-6 font-medium flex">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-blur">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M12 21a9.01 9.01 0 0 0 2.32 -.302a9 9 0 0 0 1.74 -16.733a9 9 0 1 0 -4.06 17.035z" />
<path d="M12 3v17" />
<path d="M12 12h9" />
<path d="M12 9h8" />
<path d="M12 6h6" />
<path d="M12 18h6" />
<path d="M12 15h8" />
</svg>
</div>
</div>
</div>
</label>
<div class="flex w-full items-center justify-between gap-3 px-3 py-2">
<p class="cursor-default text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('Blur effects') }}</p>
<label for="toggleBlur" class="relative flex cursor-pointer items-center">
<!-- input -->
<input id="toggleBlur" type="checkbox" class="sr-only" checked />
<!-- line -->
<div class="w-9 h-5 bg-rose-600 dark:bg-neutral-700 rounded-full shadow-inner">
</div>
</div>
<!-- dot -->
<div class="dot absolute w-4 h-4 bg-white dark:bg-neutral-950 rounded-full shadow left-0.5 top-0.5 transition">
<div class="flex h-full w-full items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-blur text-gray-600 dark:text-gray-200">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M12 21a9.01 9.01 0 0 0 2.32 -.302a9 9 0 0 0 1.74 -16.733a9 9 0 1 0 -4.06 17.035z" />
<path d="M12 3v17" />
<path d="M12 12h9" />
<path d="M12 9h8" />
<path d="M12 6h6" />
<path d="M12 18h6" />
<path d="M12 15h8" />
</svg>
</div>
</div>
</label>
</div>
resources/views/partials/themeswitcher.blade.php
+9 -15
View File
@@ -1,16 +1,10 @@
<label for="toogleTheme" class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<!-- input -->
<input id="toogleTheme" type="checkbox" class="sr-only" />
<!-- line -->
<div class="w-10 h-4 bg-rose-600 dark:bg-gray-400 rounded-full shadow-inner"></div>
<!-- dot -->
<div class="dot absolute w-6 h-6 bg-white dark:bg-neutral-950 rounded-full shadow -left-1 -top-1 transition">
<div class="items-center ml-[5px] w-6 h-6 font-medium flex">
<i class="fa-regular fa-moon text-white hidden dark:inline"></i>
<i class="fa-regular fa-sun text-yellow-400 dark:hidden"></i>
</div>
</div>
<label for="toogleTheme"
class="relative flex h-9 w-9 cursor-pointer items-center justify-center rounded-full ring-1 ring-gray-200 transition-colors hover:bg-rose-50 dark:ring-neutral-700 dark:hover:bg-rose-950/40">
<!-- input -->
<input id="toogleTheme" type="checkbox" class="sr-only" />
<!-- icon -->
<div class="theme-icon flex items-center justify-center transition-transform duration-200">
<i class="fa-regular fa-moon text-gray-600 dark:text-gray-200 hidden dark:inline"></i>
<i class="fa-regular fa-sun text-yellow-400 dark:hidden"></i>
</div>
</label>
</label>