make bottombar more flexible

ssciwr · Aug 26, 2024 · 2ea5f1d · 2ea5f1d
1 parent aa26ad5
commit 2ea5f1d
Showing 1 changed file with 32 additions and 25 deletions.
diff --git a/src/lib/components/AbstractContent.svelte b/src/lib/components/AbstractContent.svelte
@@ -10,42 +10,49 @@
 
 	// variables for communication upon hitting the page
 	// FIXME: these are placeholders and must later be changed using contexts or other better mechanisms for inter component comunication
-	export let lastpage = '/';
-	export let nextpage = '/';
-	export let infopage = '/';
+	export let lastpage = null;
+	export let nextpage = null;
+	export let infopage = null;
 </script>
 
 <!-- Top element: basic navigation-->
 
 <!--Page content goes here-->
-<div class="mx-auto max-w-6xl flex-1 overflow-x-auto overflow-y-auto p-4 pb-20">
+<div
+	class="container mx-auto max-w-6xl flex-1 items-center justify-center overflow-x-auto overflow-y-auto p-4 pb-20"
+>
 	<slot></slot>
 </div>
 
 {#if showBottomNavbar}
 	<BottomNav
-		class="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+		class="fixed bottom-0 left-0 right-0 justify-center border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
 		classInner="grid-cols-3"
 	>
-		<BottomNavElement
-			href={lastpage}
-			description={'Zurück'}
-			Icon={CaretLeftSolid}
-			tooltip={'Zur letzten Seite'}
-		/>
-
-		<BottomNavElement
-			href={infopage}
-			description={'Hilfe'}
-			Icon={LightbulbSolid}
-			tooltip={'Zusätzliche Informationen'}
-		/>
-
-		<BottomNavElement
-			href={nextpage}
-			description={'Weiter'}
-			Icon={CaretRightSolid}
-			tooltip={'Zur nächsten Seite'}
-		/>
+		{#if lastpage}
+			<BottomNavElement
+				href={lastpage}
+				description={'Zurück'}
+				Icon={CaretLeftSolid}
+				tooltip={'Zur letzten Seite'}
+			/>
+		{/if}
+
+		{#if infopage}
+			<BottomNavElement
+				href={infopage}
+				description={'Hilfe'}
+				Icon={LightbulbSolid}
+				tooltip={'Zusätzliche Informationen'}
+			/>
+		{/if}
+		{#if nextpage}
+			<BottomNavElement
+				href={nextpage}
+				description={'Weiter'}
+				Icon={CaretRightSolid}
+				tooltip={'Zur nächsten Seite'}
+			/>
+		{/if}
 	</BottomNav>
 {/if}