add an avatar button, reorganize stylings

.gitignore

@@ -21,4 +21,4 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
 # packaging
-packaging-lock.json
+package-lock.json

src/lib/components/AbstractContent.svelte

@@ -1,5 +1,6 @@
 <script>
 	import {
+		Avatar,
 		BottomNav,
 		BottomNavItem,
 		DarkMode,
@@ -31,21 +32,31 @@
 	export let nextpage = '/';
 	export let infopage = '/';
 
-	// button stylings
-	const basicBtnForm = 'rounded-lg text-xl p-2';
+	export let name = 'Registrieren';
 
-	const basicColorBehavior =
-		'text-gray-500 dark:text-gray-400 hover:text-primary-800 dark:hover:text-primary-500 group-hover:text-primary-800 dark:group-hover:text-primary-500';
+	const basicStyle = {
+		basicBtnForm: 'rounded-lg text-xl p-2',
+		basicColorBehavior:
+			'text-gray-500 dark:text-gray-400 hover:text-primary-800 dark:hover:text-primary-500 group-hover:text-primary-800 dark:group-hover:text-primary-500'
+	};
 
-	const topBarBtnClass = basicColorBehavior + basicBtnForm;
+	const topNavStyle = {
+		topBarBtnStyle: basicStyle.basicColorBehavior + basicStyle.basicBtnForm,
+		navULStyle:
+			'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-lg md:font-medium'
+	};
 
-	const bottomBarBtnClass = 'w-8 h-8 mb-1' + basicColorBehavior;
+	const bottomNavStyle = {
+		bottomBarBtnStyle: 'w-8 h-8 mb-1' + basicStyle.basicColorBehavior,
+		bottomNavStyleInner: 'grid-cols-3'
+	};
 
-	// styling for the nav
-	const navULclass =
-		'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-lg md:font-medium';
-
-	const contentContainerClass = 'mx-auto max-w-6xl p-4';
+	const avatar_style = {
+		outer: 'flex items-center space-x-4 rtl:space-x-reverse',
+		avatar: 'flex items-center space-x-4 rtl:space-x-reverse',
+		inner: 'space-y-1' + basicStyle.basicColorBehavior
+	};
+	const contentContainerStyle = 'mx-auto max-w-6xl p-4';
 </script>
 
 <!-- Top element-->
@@ -55,37 +66,42 @@
 		<img src={logo_dark} class="hidden h-16 dark:block" alt="MONDEY Logo" />
 	</NavBrand>
 	<NavHamburger />
-	<NavUl ulClass={navULclass}>
+	<NavUl ulClass={topNavStyle.navULStyle}>
 		<NavLi href="/" active={true}>Home</NavLi>
 		<NavLi href="/">Aktuelles</NavLi>
 		<NavLi href="/">Downloads</NavLi>
 		<NavLi href="/">Kontakt</NavLi>
-		<DarkMode class={topBarBtnClass}>
+		<DarkMode class={topNavStyle.topBarBtnStyle}>
 			<MoonSolid slot="darkIcon" />
 			<SunSolid slot="lightIcon" />
 		</DarkMode>
 		<Tooltip arrow={false}>Darkmode ein- oder ausschalten</Tooltip>
 	</NavUl>
+	<div class={avatar_style.outer}>
+		<Avatar class={avatar_style.avatar} rounded border />
+		<div class={avatar_style.inner}>{name}</div>
+		<Tooltip>Registrieren oder einloggen</Tooltip>
+	</div>
 </Navbar>
 
 <!--Content goes here-->
-<div class={contentContainerClass}>
+<div class={contentContainerStyle}>
 	<slot></slot>
 </div>
 
 {#if showBottomNavbar}
 	<!-- bottom element: back, info and next buttons-->
-	<BottomNav position="absolute" classInner="grid-cols-3">
-		<BottomNavItem href={lastpage} btnName="Zurück" btnClass={basicColorBehavior}>
-			<CaretLeftSolid class={bottomBarBtnClass} />
+	<BottomNav position="absolute" classInner={bottomNavStyle.bottomNavStyleInner}>
+		<BottomNavItem href={lastpage} btnName="Zurück" btnClass={bottomNavStyle.basicColorBehavior}>
+			<CaretLeftSolid class={bottomNavStyle.bottomBarBtnStyle} />
 			<Tooltip arrow={false}>Zur letzten Seite</Tooltip>
 		</BottomNavItem>
-		<BottomNavItem href={infopage} btnName="Hilfe" btnClass={basicColorBehavior}>
-			<LightbulbSolid class={bottomBarBtnClass} />
+		<BottomNavItem href={infopage} btnName="Hilfe" btnClass={bottomNavStyle.basicColorBehavior}>
+			<LightbulbSolid class={bottomNavStyle.bottomBarBtnStyle} />
 			<Tooltip arrow={false}>Hilfe</Tooltip>
 		</BottomNavItem>
-		<BottomNavItem href={nextpage} btnName="Weiter" btnClass={basicColorBehavior}>
-			<CaretRightSolid class={bottomBarBtnClass} />
+		<BottomNavItem href={nextpage} btnName="Weiter" btnClass={bottomNavStyle.basicColorBehavior}>
+			<CaretRightSolid class={bottomNavStyle.bottomBarBtnStyle} />
 			<Tooltip arrow={false}>Zur nächsten Seite</Tooltip>
 		</BottomNavItem>
 	</BottomNav>