feat: discussions

frontend/src/components/MobileLayout.vue

@@ -3,7 +3,9 @@
 		<div class="h-full overflow-auto" id="scrollContainer">
 			<slot />
 		</div>
+		{{ tabs }}
 		<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))` }"
 		>
@@ -13,27 +15,29 @@
 				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"
-					:class="[isActive(tab) ? 'text-gray-900' : 'text-gray-600']"
-				/>
+				{{ tab.label }}
+				<component :is="tab.icon" class="h-6 w-6" />
 			</button>
 		</div>
 	</div>
 </template>
-<script>
-import { scrollTo } from '@/utils/scrollContainer'
+<script setup>
 import { getSidebarLinks } from '../utils'
 import { useRouter } from 'vue-router'
+import { computed } from 'vue'
 
 const router = useRouter()
-const tabs = getSidebarLinks()
-
-let isActive = computed((tab) => {
-	return router.currentRoute.value.name === tab.to
+const tabs = computed(() => {
+	return getSidebarLinks()
 })
 
+console.log(tabs.value)
+
+/* let isActive = computed((tab) => {
+	console.log(tab);
+	return router.currentRoute.value.name === tab.to
+}) */
+
 const handleClick = (tab) => {
 	router.push({ name: tab.to })
 }