feat: mobile responsive

frontend/src/components/SidebarLink.vue

@@ -1,5 +1,6 @@
 <template>
 	<button
+		v-if="link && !link.onlyMobile"
 		class="flex h-7 cursor-pointer items-center rounded text-gray-800 duration-300 ease-in-out focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-gray-400"
 		:class="isActive ? 'bg-white shadow-sm' : 'hover:bg-gray-100'"
 		@click="handleClick"
@@ -8,10 +9,13 @@
 			class="flex items-center duration-300 ease-in-out"
 			:class="isCollapsed ? 'p-1' : 'px-2 py-1'"
 		>
-			<Tooltip :text="label" placement="right">
+			<Tooltip :text="link.label" placement="right">
 				<slot name="icon">
 					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
-						<component :is="icon" class="h-5 w-5 stroke-1.5 text-gray-800" />
+						<component
+							:is="link.icon"
+							class="h-5 w-5 stroke-1.5 text-gray-800"
+						/>
 					</span>
 				</slot>
 			</Tooltip>
@@ -23,7 +27,7 @@
 						: 'ml-2 w-auto opacity-100'
 				"
 			>
-				{{ label }}
+				{{ link.label }}
 			</span>
 		</div>
 	</button>
@@ -37,20 +41,9 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 
 const props = defineProps({
-	icon: {
-		type: Function,
-	},
-	label: {
-		type: String,
-		default: '',
-	},
-	to: {
-		type: String,
-		default: '',
-	},
-	activeFor: {
-		type: Array,
-		default: [],
+	link: {
+		type: Object,
+		required: true,
 	},
 	isCollapsed: {
 		type: Boolean,
@@ -59,10 +52,10 @@ const props = defineProps({
 })
 
 function handleClick() {
-	router.push({ name: props.to })
+	router.push({ name: props.link.to })
 }
 
 let isActive = computed(() => {
-	return props.activeFor.includes(router.currentRoute.value.name)
+	return props.link?.activeFor?.includes(router.currentRoute.value.name)
 })
 </script>