From 24550ad436fe2ede965ea3fc26fea68a59ab4917 Mon Sep 17 00:00:00 2001
From: andrea <posta@andreafazzi.eu>
Date: Thu, 29 Jun 2023 11:07:55 +0200
Subject: [PATCH] Add AppBar

---
 frontend/src/routes/+layout.svelte | 112 ++++++++++++++++++-----------
 1 file changed, 69 insertions(+), 43 deletions(-)

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 752ac3c..0aac7c3 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,49 +1,75 @@
 <script lang='ts'>
-	// The ordering of these imports is critical to your app working properly
-	import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
-	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
-	import '@skeletonlabs/skeleton/styles/skeleton.css';
-	// Most of your app wide CSS should be put in this file
-	import '../app.postcss';
-	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
+ // The ordering of these imports is critical to your app working properly
+ import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
+ // If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
+ import '@skeletonlabs/skeleton/styles/skeleton.css';
+ // Most of your app wide CSS should be put in this file
+ import '../app.postcss';
+ import { AppShell, AppBar, AppRail, AppRailTile, AppRailAnchor } from '@skeletonlabs/skeleton';
+
+ let currentTile;
 </script>
 
 <!-- App Shell -->
 <AppShell>
-	<svelte:fragment slot="header">
-		<!-- App Bar -->
-		<AppBar>
-			<svelte:fragment slot="lead">
-				<strong class="text-xl uppercase">Skeleton</strong>
-			</svelte:fragment>
-			<svelte:fragment slot="trail">
-				<a
-					class="btn btn-sm variant-ghost-surface"
-					href="https://discord.gg/EXqV7W8MtY"
-					target="_blank"
-					rel="noreferrer"
-				>
-					Discord
-				</a>
-				<a
-					class="btn btn-sm variant-ghost-surface"
-					href="https://twitter.com/SkeletonUI"
-					target="_blank"
-					rel="noreferrer"
-				>
-					Twitter
-				</a>
-				<a
-					class="btn btn-sm variant-ghost-surface"
-					href="https://github.com/skeletonlabs/skeleton"
-					target="_blank"
-					rel="noreferrer"
-				>
-					GitHub
-				</a>
-			</svelte:fragment>
-		</AppBar>
-	</svelte:fragment>
-	<!-- Page Route Content -->
-	<slot />
+    <svelte:fragment slot="header">
+	<!-- App Bar -->
+	<AppBar>
+	    <svelte:fragment slot="lead">
+		<strong class="text-xl uppercase">Skeleton</strong>
+	    </svelte:fragment>
+	    <svelte:fragment slot="trail">
+		<a
+		    class="btn btn-sm variant-ghost-surface"
+			   href="https://discord.gg/EXqV7W8MtY"
+			   target="_blank"
+			   rel="noreferrer"
+		>
+		    Discord
+		</a>
+		<a
+		    class="btn btn-sm variant-ghost-surface"
+			   href="https://twitter.com/SkeletonUI"
+			   target="_blank"
+			   rel="noreferrer"
+		>
+		    Twitter
+		</a>
+		<a
+		    class="btn btn-sm variant-ghost-surface"
+			   href="https://github.com/skeletonlabs/skeleton"
+			   target="_blank"
+			   rel="noreferrer"
+		>
+		    GitHub
+		</a>
+	    </svelte:fragment>
+	</AppBar>
+    </svelte:fragment>
+    <svelte:fragment slot="sidebarLeft">
+	<AppRail>
+	    <svelte:fragment slot="lead">
+		<AppRailAnchor href="/" >(icon)</AppRailAnchor>
+	    </svelte:fragment>
+	    <!-- --- -->
+	    <AppRailTile bind:group={currentTile} name="tile-1" value={0} title="tile-1">
+		<svelte:fragment slot="lead">(icon)</svelte:fragment>
+		<span>Tile 1</span>
+	    </AppRailTile>
+	    <AppRailTile bind:group={currentTile} name="tile-2" value={1} title="tile-2">
+		<svelte:fragment slot="lead">(icon)</svelte:fragment>
+		<span>Tile 2</span>
+	    </AppRailTile>
+	    <AppRailTile bind:group={currentTile} name="tile-3" value={2} title="tile-3">
+		<svelte:fragment slot="lead">(icon)</svelte:fragment>
+		<span>Tile 3</span>
+	    </AppRailTile>
+	    <!-- --- -->
+	    <svelte:fragment slot="trail">
+		<AppRailAnchor href="/" target="_blank" title="Account">(icon)</AppRailAnchor>
+	    </svelte:fragment>
+	</AppRail>
+    </svelte:fragment>
+    <!-- Page Route Content -->
+    <slot />
 </AppShell>