delay · ak4zh · May 19, 2023
diff --git a/languages/de.json b/languages/de.json
@@ -12,7 +12,7 @@
   "lastName": "Nachname",
   "profile": "Profil",
   "home": "Startseite",
-  "protected": "Geschützt",
+  "dashboard": "Armaturenbrett",
   "auth": {
     "password": {
       "reset": {

diff --git a/languages/en.json b/languages/en.json
@@ -14,6 +14,7 @@
   "profile": "Profile",
   "home": "Home",
   "protected": "Protected",
+  "dashboard": "Dashboard",
   "auth": {
     "password": {
       "reset": {

diff --git a/languages/es.json b/languages/es.json
@@ -13,6 +13,7 @@
   "profile": "Perfil",
   "home": "Inicio",
   "protected": "Protegido",
+  "dashboard": "Panel",
   "auth": {
     "password": {
       "reset": {

diff --git a/src/lib/components/BottomBar.svelte b/src/lib/components/BottomBar.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { page } from '$app/stores';
+	import type { NavItems } from '$lib/config/constants';
+    import { i } from '@inlang/sdk-js';
+    export let navItems: NavItems;
+</script>
+
+<div class="card h-16 md:hidden">
+    <div class="h-full max-w-sm flex mx-auto justify-center">
+        {#each navItems||[] as nav}
+            {#if nav.title === 'signout'}
+                {#if $page.data.user}
+                    <form
+                            use:enhance
+                            action="/auth/sign-out"
+                            method="post"
+                        >
+                            <button type="submit" class="btn"
+                                ><span><svelte:component this={nav.icon}/></span><span>{i(nav.title)}</span></button
+                            >
+                    </form>
+                {/if}
+            {:else if (nav.alwaysVisible || ($page.data.user && nav.protected) || (!$page.data.user && !nav.protected))}
+                <a class="btn variant-glass inline-flex flex-col items-center justify-center card {$page.url.pathname === nav.url ? 'bg-primary-active-token' : ''}" href="{nav.url}">
+                    <svelte:component this={nav.icon} />
+                    <span class="text-sm">{i(nav.title)}</span>
+                </a>
+            {/if}
+        {/each}
+    </div>
+</div>
diff --git a/src/lib/components/navigation.svelte b/src/lib/components/navigation.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
-	import { LightSwitch, dataTableHandler } from '@skeletonlabs/skeleton';
+	import { LightSwitch } from '@skeletonlabs/skeleton';
 	import { enhance } from '$app/forms';
 	import { drawerStore } from '@skeletonlabs/skeleton';
 	import { i, languages, language, switchLanguage } from '@inlang/sdk-js';
 
-	function drawerClose(): void {
-		drawerStore.close();
-	}
-	import { LogIn, LogOut, Contact2, UserCircle2, Lock } from 'lucide-svelte';
-	import Logo from '$lib/components/logo.svelte';
-	export let user: any;
+	function drawerClose(): void { drawerStore.close() };
+
+	import { page } from '$app/stores';
+	import type { NavItems } from '$lib/config/constants';
+    export let navItems: NavItems;
 	let selectedLanguage: string = language || 'en';
 </script>
 
@@ -31,49 +30,32 @@
 			<LightSwitch />
 		</div>
 	</div>
-
 	<ul class="list mt-8">
-		<li>
-			<a href="/" on:click={drawerClose}>
-				<span><Logo size="24" /></span><span class="flex-auto">{i('home')}</span></a
-			>
-		</li>
-		<li>
-			<a href="/dashboard" on:click={drawerClose}>
-				<span><Lock /></span><span class="flex-auto">{i('protected')}</span></a
-			>
-		</li>
-		{#if user}
-			<li>
-				<a href="/profile" on:click={drawerClose}>
-					<span><Contact2 /></span><span class="flex-auto">{i('profile')}</span></a
-				>
-			</li>
-			<li>
-				<form
-					use:enhance
-					action="/auth/sign-out"
-					method="post"
-					on:click={drawerClose}
-					on:keydown={drawerClose}
-				>
-					<button type="submit" class="btn"
-						><span><LogOut /></span><span>{i('signout')}</span></button
-					>
-				</form>
-			</li>
-		{/if}
-		{#if !user}
-			<li>
-				<a href="/auth/sign-in" on:click={drawerClose}>
-					<span><LogIn /></span><span class="flex-auto">{i('signin')}</span></a
-				>
-			</li>
-			<li>
-				<a href="/auth/sign-up" on:click={drawerClose}>
-					<span><UserCircle2 /></span><span class="flex-auto">{i('signup')}</span></a
-				>
-			</li>
-		{/if}
+		{#each navItems||[] as nav}
+			{#if nav.title === 'signout'}
+				{#if $page.data.user}
+					<li>
+						<form
+								use:enhance
+								action="/auth/sign-out"
+								method="post"
+								on:click={drawerClose}
+								on:keydown={drawerClose}
+							>
+								<button type="submit" class="btn"
+									><span><svelte:component this={nav.icon}/></span><span>{i(nav.title)}</span></button
+								>
+						</form>
+					</li>
+				{/if}
+			{:else if (nav.alwaysVisible || ($page.data.user && nav.protected) || (!$page.data.user && !nav.protected))}
+				<li>
+					<a href="{nav.url}" on:click={drawerClose} class="{$page.url.pathname === nav.url ? 'bg-primary-active-token' : ''}">
+						<span><svelte:component this={nav.icon}/></span>
+						<span class="flex-auto">{i(nav.title)}</span>
+					</a>
+				</li>
+			{/if}
+		{/each}
 	</ul>
 </nav>
diff --git a/src/lib/config/constants.ts b/src/lib/config/constants.ts
@@ -1,4 +1,6 @@
 import { dev } from '$app/environment';
+import { LogIn, LogOut, Contact2, UserCircle2, Lock, Home, LayoutDashboard } from 'lucide-svelte';
+
 export const BASE_URL = dev ? 'http://localhost:5173' : 'https://sveltekit-auth.uv-ray.com';
 export const APP_NAME = 'Sveltekit Auth Starter';
 export const CONTACT_EMAIL = '[email protected]';
@@ -13,3 +15,15 @@ export const TERMS_PRIVACY_APP_NAME = 'Your App';
 export const TERMS_PRIVACY_APP_PRICING_AND_SUBSCRIPTIONS =
 	'[Details about the pricing, subscription model, refund policy]';
 export const TERMS_PRIVACY_COUNTRY = 'United States';
+
+
+export const navItems = [
+	{ title: "home", url: "/", icon: Home, alwaysVisible: true },
+	{ title: 'dashboard', url: '/dashboard', icon: LayoutDashboard, alwaysVisible: true },
+	{ title: 'profile', url: '/profile', icon: LayoutDashboard, protected: true },
+	{ title: 'signout', url: '/auth/sign-out', icon: LogOut, protected: true },
+	{ title: 'signin', url: '/auth/sign-in', icon: LogIn },
+	{ title: 'signup', url: '/auth/sign-up', icon: UserCircle2 },
+]
+
+export type NavItems = typeof navItems;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -13,59 +13,51 @@
 		Drawer,
 		Modal,
 		Toast,
-		dataTableHandler,
 		drawerStore
 	} from '@skeletonlabs/skeleton';
 	import Navigation from '$lib/components/navigation.svelte';
-	import { APP_NAME } from '$lib/config/constants';
+	import { APP_NAME, navItems } from '$lib/config/constants';
 	import Footer from '$lib/components/footer.svelte';
 	import { Menu } from 'lucide-svelte';
 	import convertNameToInitials from '$lib/_helpers/convertNameToInitials';
-	import { onMount } from 'svelte';
+	import BottomBar from '$lib/components/BottomBar.svelte';
 	export let data;
-
-	function drawerOpen(): void {
-		drawerStore.open();
-	}
-	//console.log(JSON.stringify(data));
-	let initials = '';
-	onMount(() => {
-		if (data?.user?.firstName && data?.user?.lastName) {
-			initials = convertNameToInitials(data?.user?.firstName, data?.user?.lastName);
-		}
-	});
-	//$: initials = convertNameToInitials(data.user.firstName, data.user.lastName);
-	$: initials = initials;
 </script>
 
 <Toast position="tr" />
 <Modal />
 <Drawer>
-	<Navigation user={data.user} />
+	<Navigation {navItems} />
 </Drawer>
 
 <AppShell slotSidebarLeft="w-0 md:w-52 bg-surface-500/10">
 	<svelte:fragment slot="header">
 		<AppBar>
 			<svelte:fragment slot="lead">
-				<button class="md:hidden btn btn-sm mr-4" aria-label="Menu Button" on:click={drawerOpen}>
+				<button class="md:hidden btn btn-sm mr-4" aria-label="Menu Button" on:click={() => drawerStore.open()}>
 					<span>
 						<Menu />
 					</span>
 				</button>
 				<strong class="text-xl uppercase">{APP_NAME}</strong>
 			</svelte:fragment>
 			<svelte:fragment slot="trail">
-				{#if data?.user}<Avatar {initials} width="w-10" background="bg-primary-500" />{/if}
+				{#if data?.user}
+					<Avatar initials={convertNameToInitials(data?.user?.firstName||'', data?.user?.lastName||'')} width="w-10" background="bg-primary-500" />
+				{/if}
 			</svelte:fragment>
 		</AppBar>
 	</svelte:fragment>
 	<svelte:fragment slot="sidebarLeft">
-		<Navigation user={data.user} />
+		<Navigation {navItems} />
 	</svelte:fragment>
 	<!-- Main Content -->
 	<div class="container lg:p-10 mx-auto">
 		<slot />
 	</div>
 	<svelte:fragment slot="pageFooter"><Footer /></svelte:fragment>
+	<svelte:fragment slot="footer">
+			<BottomBar {navItems}/>
+	</svelte:fragment>
+
 </AppShell>