diff --git a/src/components/NavSidebar.vue b/src/components/NavSidebar.vue index abdb0534f84a8f753af337a302a6cbab4587e435..bb37aa3bfe429f5a9e00fbaa75f22ce9e4dbf146 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 0000000000000000000000000000000000000000..d401f10477da23c2b697f47457b651f6bafe9637 --- /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 9a11fe1fb66a8ea384b451c72d47629947456adb..08e31630d2ef989c1546415605190bbb3e4d79bf 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 />