feat: mobile responsive

frontend/src/components/MobileLayout.vue

@@ -1,20 +1,27 @@
 <template>
 	<div class="flex h-full flex-col">
-		<div class="h-full overflow-auto" id="scrollContainer">
+		<div class="h-full" id="scrollContainer">
 			<slot />
 		</div>
 		<div
 			v-if="tabs"
-			class="grid grid-cols-5 border-t border-gray-300 standalone:pb-4"
-			:style="{ gridTemplateColumns: `repeat(${tabs.length}, minmax(0, 1fr))` }"
+			class="grid grid-cols-5 border-t border-gray-300 sticky bottom-0 z-10 bg-white standalone:pb-4"
+			:style="{
+				gridTemplateColumns: `repeat(${tabs.length - 1}, minmax(0, 1fr))`,
+			}"
 		>
 			<button
 				v-for="tab in tabs"
 				:key="tab.label"
+				:class="isVisible(tab) ? 'block' : 'hidden'"
 				class="flex flex-col items-center justify-center py-3 transition active:scale-95"
 				@click="handleClick(tab)"
 			>
-				<component :is="tab.icon" class="h-6 w-6 stroke-1.5 text-gray-700" />
+				<component
+					:is="tab.icon"
+					class="h-7 w-7 stroke-1.5"
+					:class="[isActive(tab) ? 'text-gray-900' : 'text-gray-600']"
+				/>
 			</button>
 		</div>
 	</div>
@@ -22,19 +29,33 @@
 <script setup>
 import { getSidebarLinks } from '../utils'
 import { useRouter } from 'vue-router'
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
+import { sessionStore } from '@/stores/session'
+
+const { logout, user } = sessionStore()
+let { isLoggedIn } = sessionStore()
 
 const router = useRouter()
 const tabs = computed(() => {
 	return getSidebarLinks()
 })
 
-/* let isActive = computed((tab) => {
-	console.log(tab);
-	return router.currentRoute.value.name === tab.to
-}) */
+let isActive = (tab) => {
+	return tab.activeFor?.includes(router.currentRoute.value.name)
+}
 
 const handleClick = (tab) => {
-	router.push({ name: tab.to })
+	if (tab.label == 'Log in') window.location.href = '/login'
+	else if (tab.label == 'Log out')
+		logout.submit().then(() => {
+			isLoggedIn = false
+		})
+	else router.push({ name: tab.to })
+}
+
+const isVisible = (tab) => {
+	if (tab.label == 'Log in') return !isLoggedIn
+	else if (tab.label == 'Log out') return isLoggedIn
+	else return true
 }
 </script>