finished the front for the task manager

front/src/routes/+layout.svelte

@@ -1,9 +1,102 @@
 <script lang="ts">
-	import './layout.css';
-	import favicon from '$lib/assets/favicon.svg';
+    import './layout.css';
+    import favicon from '$lib/assets/favicon.svg';
+    import { onMount } from 'svelte';
+    import {
+        CheckCheckIcon,
+        StoreIcon,
+        HouseIcon,
+        SailboatIcon,
+        SettingsIcon,
+    } from 'lucide-svelte';
+    import { Navigation } from '@skeletonlabs/skeleton-svelte';
+	import { Avatar } from '@skeletonlabs/skeleton-svelte';
 
-	let { children } = $props();
+    let { children } = $props();
+
+    // 1. Logic to handle responsive layout type
+    let navLayout = $state<'sidebar' | 'bar'>('sidebar');
+
+    onMount(() => {
+        const updateLayout = () => {
+            navLayout = window.innerWidth < 768 ? 'bar' : 'sidebar';
+        };
+        updateLayout(); // Set initial
+        window.addEventListener('resize', updateLayout);
+        return () => window.removeEventListener('resize', updateLayout);
+    });
+
+    const linksSidebar = {
+        gestiong: [
+            { label: 'Taches', href: '/taches/', icon: CheckCheckIcon },
+			{ label: 'courses', href: '/courses/', icon: StoreIcon },
+        ],
+        recreation: [
+            { label: 'Sailing', href: '/#', icon: SailboatIcon },
+        ],
+
+    };
 </script>
 
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
-{@render children()}
+
+<div class="w-full h-dvh grid overflow-hidden
+    {navLayout === 'sidebar' ? 'grid-cols-[auto_1fr]' : 'grid-rows-[1fr_auto]'}">
+
+    <main class="overflow-y-auto  {navLayout === "bar" ? '' : ' order-2'} ">
+        {@render children()}
+    </main>
+
+    <Navigation 
+        layout={navLayout} 
+        class="border-r-2 preset-filled-primary-500 font-bold text-2xl {navLayout === 'sidebar' ? 'h-full' : 'w-full '}"
+    >
+        <Navigation.Header class="p-6 {navLayout === 'bar' ? 'hidden' : ''}">
+            <Avatar class="size-20 py-6">
+				<Avatar.Image src="rex.png" alt="big" />
+				<Avatar.Fallback>rex the cool</Avatar.Fallback>
+			</Avatar>
+        </Navigation.Header>
+		
+        <Navigation.Content class={navLayout === 'bar' ? 'flex flex-row justify-center w-full' : ''}>
+            <Navigation.Group>
+                <Navigation.Menu>
+                    <Navigation.TriggerAnchor href="/">
+                        <HouseIcon class="size-4" />
+                        <Navigation.TriggerText>Home</Navigation.TriggerText>
+                    </Navigation.TriggerAnchor>
+                </Navigation.Menu>
+            </Navigation.Group>
+
+            {#each Object.entries(linksSidebar) as [category, links]}
+                <Navigation.Group>
+                    <Navigation.Label class="capitalize pl-2 {navLayout === 'bar' ? 'hidden' : ''}">
+                        {category}
+                    </Navigation.Label>
+                    <Navigation.Menu>
+                        {#each links as link}
+                            {@const Icon = link.icon}
+                            <Navigation.TriggerAnchor href={link.href} title={link.label}>
+                                <Icon class="size-4" />
+                                <Navigation.TriggerText >{link.label}</Navigation.TriggerText>
+                            </Navigation.TriggerAnchor>
+                        {/each}
+                    </Navigation.Menu>
+                </Navigation.Group>
+            {/each}
+
+			<Navigation.Footer>
+				<Navigation.TriggerAnchor href="/" title="Settings">
+					<SettingsIcon class="size-4" />
+					<Navigation.TriggerText>Settings</Navigation.TriggerText>
+				</Navigation.TriggerAnchor>
+			</Navigation.Footer>
+
+        </Navigation.Content>
+        
+    </Navigation>
+
+    
+</div>
+
+<div class="grid-background -z-10 bg-surface-50/20"></div>

front/src/routes/+page.svelte

@@ -1,3 +1,4 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<h1>IF YOU READ THIS, YOU'RE GAY</h1>
+
+
 <button type="button" class="btn preset-filled-primary-500">Button</button>

front/src/routes/courses/+page.svelte

@@ -0,0 +1,5 @@
+<main class="h-full w-full p-0 m-0">
+    <div class="w-full h-10/100 preset-filled-primary-500 border-b-2 content-center">
+        <h1 class="h3 ml-3 text-primary-900"> Truk à acheter</h1>
+    </div>
+    </main>

front/src/routes/layout.css

@@ -1,8 +1,23 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/forms';
 @plugin '@tailwindcss/typography';
-
+@custom-variant dark (&:where(.dark, .dark *));
 
 @import '@skeletonlabs/skeleton'; 
 @import '@skeletonlabs/skeleton-svelte'; 
-@import '@skeletonlabs/skeleton/themes/cerberus';
+@import '@skeletonlabs/skeleton/themes/mona';
+@import '@skeletonlabs/skeleton/themes/concord';
+@import '../goupiliot';
+
+
+.grid-background {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  width: 100%;
+  background-image: linear-gradient(to right, #80808012 1px, transparent 1px),
+    linear-gradient(to bottom, #80808012 1px, transparent 1px);
+  background-size: 24px 24px;
+  z-index: -1;
+  
+}

front/src/routes/taches/+page.svelte

@@ -0,0 +1,75 @@
+<script>
+    import { ChevronDownIcon, Inspect } from 'lucide-svelte';
+	import { Accordion } from '@skeletonlabs/skeleton-svelte';
+	import { slide } from 'svelte/transition';
+    import { Switch } from '@skeletonlabs/skeleton-svelte';
+
+    const tasks = {
+        "Be gay" : {
+            "done" : false, 
+            "desc" : "and do crimes"
+        },
+        "Eat the rich" : {
+            "done" : false, 
+            "desc" : "nothing else to say"
+        }
+        
+    };
+    
+    $: {
+        console.log('Tasks updated:', tasks);
+        const completed = Object.entries(tasks).filter(([_, t]) => t.done);
+        console.log('Completed count:', completed.length);
+    }
+
+</script>
+<main class="h-full w-full p-0 m-0">
+    <div class="w-full h-10/100 preset-filled-primary-500 border-b-2 content-center">
+        <h1 class="h3 ml-3 text-primary-900"> Truk a faire</h1>
+    </div>
+
+    <div class="flex-columns justify-stretch w-95/100">
+    <Accordion multiple class="m-3">
+
+    {#each Object.entries(tasks) as [name, info]}
+        <div class="card lg:ml-30 lg:mr-30 bg-primary-400/50  text-left border flex flex-row justify-between">
+
+            <Switch class="m-3"
+                checked={info.done} 
+                onCheckedChange={(e) => { info.done = e.checked; }}>
+                <Switch.Control class="preset-filled-surface-500 data-[state=checked]:preset-filled-secondary-500">
+                    <Switch.Thumb />
+                </Switch.Control>
+                <Switch.HiddenInput />
+            </Switch>
+
+            <div class="w-full m-3">
+                <Accordion.Item value={name}>
+                <h3>
+                    <Accordion.ItemTrigger class="hover:preset-tonal font-bold flex items-center justify-between gap-2">
+                        {name}
+                        <Accordion.ItemIndicator class="group">
+                            <ChevronDownIcon class="h-5 w-5 transition group-data-[state=open]:rotate-180" />
+                        </Accordion.ItemIndicator>
+                    </Accordion.ItemTrigger>
+                </h3>
+                <Accordion.ItemContent>
+                    {#snippet element(attributes)}
+                        {#if !attributes.hidden}
+                            <div {...attributes} transition:slide={{ duration: 50 }}>
+                                {info.desc}
+                            </div>
+                        {/if}
+                    {/snippet}
+                </Accordion.ItemContent>
+            </Accordion.Item>
+        </div>
+        
+
+        </div>
+    {/each}
+    </Accordion>
+
+    </div>
+</main>
+