From 7f8aee80304be6720b3cc92c2c20ed296b42733d Mon Sep 17 00:00:00 2001
From: Johannes Klatt <km1938@partner.kit.edu>
Date: Mon, 24 Mar 2025 16:40:00 +0100
Subject: [PATCH] UPD: mobile interface for nav sidebar
---
src/components/NavSidebar.vue | 5 ++++-
src/components/NavSidebarButton.vue | 9 +++++++++
src/components/TopBar.vue | 7 +++++++
3 files changed, 20 insertions(+), 1 deletion(-)
create mode 100644 src/components/NavSidebarButton.vue
diff --git a/src/components/NavSidebar.vue b/src/components/NavSidebar.vue
index abdb0534f..bb37aa3bf 100644
--- a/src/components/NavSidebar.vue
+++ b/src/components/NavSidebar.vue
@@ -1,4 +1,6 @@
<script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+
const navItems = [
{
title: 'Home',
@@ -22,6 +24,7 @@ const navItems = [
active: false,
},
]
+const isMobile = useMediaQuery('(max-width: 768px)')
</script>
<template>
@@ -31,7 +34,7 @@ const navItems = [
<SidebarGroup>
<SidebarMenu>
<template v-for="item in navItems" :key="item.title">
- <NavSidebarElement v-if="!item.fromTop" :title="item.title" :url="item.url" :icon="item.icon" :active="item.active" />
+ <NavSidebarElement v-if="!item.fromTop || isMobile" :title="item.title" :url="item.url" :icon="item.icon" :active="item.active" />
</template>
</SidebarMenu>
</SidebarGroup>
diff --git a/src/components/NavSidebarButton.vue b/src/components/NavSidebarButton.vue
new file mode 100644
index 000000000..d401f1047
--- /dev/null
+++ b/src/components/NavSidebarButton.vue
@@ -0,0 +1,9 @@
+<template>
+ <Button variant="outline">
+ <Icon
+ icon="radix-icons:moon"
+ class="h-[1.2rem] w-[0.2rem]"
+ />
+ <span class="sr-only">Toggle navigation sidebar</span>
+ </Button>
+</template>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 9a11fe1fb..08e31630d 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -1,6 +1,13 @@
+<script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+
+const isMobile = useMediaQuery('(max-width: 768px)')
+</script>
+
<template>
<div h-14 b-b bg-background>
<div flex gap-2 justify-center p-2>
+ <NavSidebarButton v-if="isMobile" />
<GlobalSearch />
<UserNav />
<DarkModeToggle />
--
GitLab