anotherhadi/iknowyou
1
Fork 0
mirror of https://github.com/anotherhadi/iknowyou.git synced 2026-05-21 01:32:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve docs, responsive, add Material Icons

Browse Source 
Signed-off-by: Hadi <112569860+anotherhadi@users.noreply.github.com>
This commit is contained in:
Hadi
2026-04-12 16:42:19 +02:00
parent 72c382bb07
commit 302166c87d
37 changed files with 176 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/components/Nav.svelte
+33 -12
View File
@@ -13,6 +13,15 @@
} from "@lucide/svelte";
import type { Snippet } from "svelte";
let mobileMenuOpen = $state(false);
function onDocumentClick(e: MouseEvent) {
if (!mobileMenuOpen) return;
if (!(e.target as HTMLElement).closest("[data-mobile-nav]")) {
mobileMenuOpen = false;
}
}
let {
action,
}: {
@@ -46,17 +55,20 @@
];
</script>
<svelte:document onclick={onDocumentClick} />
<div class="bg-base-200">
<div class="navbar max-w-5xl m-auto">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<Menu size={20} />
</div>
<ul
tabindex="-1"
class="menu menu-sm dropdown-content bg-base-300 rounded-box z-50 mt-3 w-52 p-2"
<div class="relative" data-mobile-nav>
<button
class="btn btn-ghost lg:hidden"
onclick={(e) => { e.stopPropagation(); mobileMenuOpen = !mobileMenuOpen; }}
>
<Menu size={20} />
</button>
{#if mobileMenuOpen}
<ul class="menu menu-sm absolute bg-base-300 rounded-box z-50 mt-1 w-52 p-2">
{#each navLinks as link}
<li>
{#if link.children}
@@ -64,7 +76,11 @@
<ul class="p-2">
{#each link.children as sublink}
<li>
<a href={sublink.href} class="flex items-center gap-2">
<a
href={sublink.href}
class="flex items-center gap-2"
onclick={() => (mobileMenuOpen = false)}
>
{#if sublink.icon}
{@const Icon = sublink.icon}
<Icon size={12} />
@@ -75,7 +91,11 @@
{/each}
</ul>
{:else}
<a href={link.href} class="flex items-center gap-2">
<a
href={link.href}
class="flex items-center gap-2"
onclick={() => (mobileMenuOpen = false)}
>
{#if link.icon}
{@const Icon = link.icon}
<Icon size={12} />
@@ -86,8 +106,9 @@
</li>
{/each}
</ul>
{/if}
</div>
<!-- Logo à gauche sur écran moyen et grand -->
<!-- Logo on medium/large screens -->
<a
href="/"
class="btn btn-ghost text-xl hidden sm:flex justify-center gap-2 items-center"
@@ -98,7 +119,7 @@
</div>
<div class="navbar-center lg:flex">
<!-- Logo centré sur petit écran (mobile) -->
<!-- Logo centered on mobile -->
<a
href="/"
class="btn btn-ghost text-xl flex sm:hidden justify-center gap-2 items-center"
@@ -106,7 +127,7 @@
<img src="/logo.svg" class="m-auto h-4" alt="iky logo" />
<img src="/logo-large.svg" class="m-auto h-4" alt="iky logo large" />
</a>
<!-- Nav links sur grand écran -->
<!-- Nav links on large screens -->
<ul class="menu menu-horizontal px-1 hidden lg:flex">
{#each navLinks as link}
<li>