prehistoric-systems/web
1
0
Fork 0
mirror of https://codeberg.org/Freedium-cfd/web.git synced 2026-03-11 09:04:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(Header): enhance usability and design improvements

Browse source
This commit is contained in:
ZhymabekRoman 2024-11-02 04:45:53 +05:00
parent 1a7954d54e
commit 57da4b77bc
1 changed files with 33 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
new-web/src/lib/elements/Header.svelte
View file

@ -21,11 +21,14 @@
const toggleSearch = () => {
isSearchOpen = !isSearchOpen;
};
// Add transition duration variable
const transitionDuration = 200;
</script>
<nav
id="header"
class="sticky top-0 z-20 w-full bg-white border-b shadow-sm dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800"
class="sticky top-0 z-20 w-full border-b shadow-sm bg-white/95 backdrop-blur-sm dark:bg-zinc-900/95 border-zinc-200 dark:border-zinc-800"
>
<Advertise />
<ProgressLine />
@ -37,11 +40,12 @@
<div class="flex-grow max-w-md mx-2">
<Button
class="items-center hidden w-full h-8 gap-2 pl-2 pr-3 text-sm transition bg-white rounded-full ui-not-focus-visible:outline-none text-zinc-500 ring-1 ring-zinc-900/10 hover:ring-zinc-900/20 lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20"
class="items-center hidden w-full h-8 gap-2 pl-2 pr-3 text-sm transition bg-white rounded-full ui-not-focus-visible:outline-none text-zinc-500 ring-1 ring-zinc-900/10 hover:ring-zinc-900/20 hover:bg-zinc-50 focus-visible:ring-2 focus-visible:ring-primary lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20 dark:hover:bg-white/10"
on:click={toggleSearch}
aria-label="Open search"
>
<Icon icon="heroicons:magnifying-glass" />
Search
<span>Search articles, topics, and more...</span>
</Button>
</div>
@ -57,7 +61,7 @@
url="https://liberapay.com/ZhymabekRoman/"
icon="simple-icons:liberapay"
/>
<!-- <PayButtons name="PayPal" url="" icon="simple-icons:paypal" /> -->
<PayButtons name="Discord" url="discord.gg/dAxCuG9nYM" icon="simple-icons:discord" />
<div class="w-px h-6 bg-zinc-300 dark:bg-zinc-700"></div>
<ThemeToggle />
<ReportProblem />
@ -68,19 +72,38 @@
<Icon class="size-5" icon="heroicons:magnifying-glass" />
</Button>
<ThemeToggle />
<Button variant="ghost" size="icon" on:click={toggleNav}>
<Menu />
<Button
variant="ghost"
size="icon"
on:click={toggleNav}
aria-expanded={isNavOpen}
aria-controls="mobile-menu"
class="hover:bg-zinc-100 dark:hover:bg-zinc-800"
>
<Menu aria-hidden="true" />
<span class="sr-only">Toggle menu</span>
</Button>
</div>
</div>
{#if isNavOpen}
<div
class="!sticky w-full bg-white border-b shadow-sm md:hidden dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800"
id="mobile-menu"
class="!sticky w-full bg-white/95 backdrop-blur-sm border-b shadow-sm md:hidden dark:bg-zinc-900/95 border-zinc-200 dark:border-zinc-800"
>
<div
class="sticky z-20 flex flex-wrap items-center justify-center px-4 py-2 mx-auto space-x-2 space-y-2"
>
<div class="sticky z-20 flex flex-wrap items-center justify-center gap-2 px-4 py-3 mx-auto">
<PayButtons
name="Ko-fi"
url="https://ko-fi.com/zhymabekroman"
icon="teenyicons:cup-solid"
/>
<PayButtons
name="Liberapay"
url="https://liberapay.com/ZhymabekRoman/"
icon="simple-icons:liberapay"
/>
<PayButtons name="Discord" url="discord.gg/dAxCuG9nYM" icon="simple-icons:discord" />
<!-- <ExtensionsButton /> -->
<ReportProblem />
</div>
</div>