diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue index d0212c48..76756e64 100644 --- a/components/nav/NavSide.vue +++ b/components/nav/NavSide.vue @@ -1,11 +1,14 @@ <script setup lang="ts"> +const { command } = defineProps<{ + command?: boolean +}>() const { notifications } = useNotifications() </script> <template> <nav sm:px3 sm:py4 flex="~ col gap2" text-size-base leading-normal md:text-lg> - <NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only /> - <NavSideItem :text="$t('nav.notifications')" to="/notifications" icon="i-ri:notification-4-line" user-only> + <NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" /> + <NavSideItem :text="$t('nav.notifications')" to="/notifications" icon="i-ri:notification-4-line" user-only :command="command"> <template #icon> <div flex relative> <div class="i-ri:notification-4-line" md:text-size-inherit text-xl /> @@ -17,13 +20,13 @@ const { notifications } = useNotifications() </NavSideItem> <!-- Use Search for small screens once the right sidebar is collapsed --> - <NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" lg:hidden /> - <NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" /> + <NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" lg:hidden :command="command" /> + <NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" :command="command" /> - <NavSideItem :text="$t('nav.local')" :to="`/${currentServer}/public/local`" icon="i-ri:group-2-line " /> - <NavSideItem :text="$t('nav.federated')" :to="`/${currentServer}/public`" icon="i-ri:earth-line" /> - <NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only /> - <NavSideItem :text="$t('nav.favourites')" to="/favourites" icon="i-ri:heart-3-line" user-only /> - <NavSideItem :text="$t('nav.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line " user-only /> + <NavSideItem :text="$t('nav.local')" :to="`/${currentServer}/public/local`" icon="i-ri:group-2-line " :command="command" /> + <NavSideItem :text="$t('nav.federated')" :to="`/${currentServer}/public`" icon="i-ri:earth-line" :command="command" /> + <NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only :command="command" /> + <NavSideItem :text="$t('nav.favourites')" to="/favourites" icon="i-ri:heart-3-line" user-only :command="command" /> + <NavSideItem :text="$t('nav.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line " user-only :command="command" /> </nav> </template> diff --git a/components/nav/NavSideItem.vue b/components/nav/NavSideItem.vue index 64249591..97ab525e 100644 --- a/components/nav/NavSideItem.vue +++ b/components/nav/NavSideItem.vue @@ -1,9 +1,12 @@ <script setup lang="ts"> +import { warn } from 'vue' + const props = withDefaults(defineProps<{ text?: string icon: string to: string | Record<string, string> userOnly?: boolean + command?: boolean }>(), { userOnly: false, }) @@ -20,6 +23,7 @@ useCommand({ name: () => props.text ?? (typeof props.to === 'string' ? props.to as string : props.to.name), icon: () => props.icon, + visible: () => props.command, onActivate() { router.push(props.to) diff --git a/components/settings/SettingsNavItem.vue b/components/settings/SettingsNavItem.vue index 74ac04dd..9189db80 100644 --- a/components/settings/SettingsNavItem.vue +++ b/components/settings/SettingsNavItem.vue @@ -8,18 +8,17 @@ const props = defineProps<{ const router = useRouter() -if (props.command) { - useCommand({ - scope: 'Settings', +useCommand({ + scope: 'Settings', - name: () => props.text ?? (typeof props.to === 'string' ? props.to as string : props.to.name), - icon: () => props.icon || '', + name: () => props.text ?? (typeof props.to === 'string' ? props.to as string : props.to.name), + icon: () => props.icon || '', + visible: () => props.command, - onActivate() { - router.push(props.to) - }, - }) -} + onActivate() { + router.push(props.to) + }, +}) </script> <template> diff --git a/layouts/default.vue b/layouts/default.vue index 466e335f..390b767b 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -13,7 +13,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false) <NavTitle mt4 mb2 lg:mx-3 /> <div flex="~ col" overflow-y-auto justify-between h-full max-w-full> <div flex flex-col> - <NavSide /> + <NavSide command /> <PublishButton m="y5 xa" lg:m="r5 l3" lg:rtl-m="l5 r3" /> </div> <div v-if="isMastoInitialised" flex flex-col>