92 lines
3.0 KiB
Vue
92 lines
3.0 KiB
Vue
<script lang="ts" setup>
|
|
import { PhCompass, PhList } from "@phosphor-icons/vue"
|
|
import type { SidebarMenuActionType } from "./SidebarProps";
|
|
|
|
const { revealAdvancedSearch } = useCalendar()
|
|
const { currentMenu } = storeToRefs(useUiStore())
|
|
|
|
// const user = useSupabaseUser()
|
|
|
|
function handleMenuItemAction(actionType: SidebarMenuActionType) {
|
|
if (actionType === "event-search") {
|
|
revealAdvancedSearch()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="w-16 py-6 border-r-[1px] bg-indigo-700 dark:bg-black text-white border-r-indigo-700 dark:border-r-indigo-950 grid grid-rows-[1fr_auto] justify-center transition-colors after:opacity-50 after:contrast-125 dark:after:opacity-75 dark:after:contrast-175 after:-hue-rotate-60">
|
|
<menu class="flex flex-col gap-4">
|
|
<li class="mb-12">
|
|
<UiButton variant="ghost" size="icon" class="rounded-full" @click="console.log">
|
|
<PhList size="27" />
|
|
</UiButton>
|
|
</li>
|
|
|
|
<li>
|
|
<UiTooltipProvider :delay-duration="50">
|
|
<UiTooltip>
|
|
<UiTooltipTrigger as-child>
|
|
<UiButton variant="ghost" size="icon" class="rounded-full" as-child>
|
|
<RouterLink to="/explore">
|
|
<PhCompass size="24" weight="fill" />
|
|
</RouterLink>
|
|
</UiButton>
|
|
</UiTooltipTrigger>
|
|
<UiTooltipContent :side="'right'" :side-offset="6">
|
|
<p>
|
|
{{ $t('pages.explore.menuLabel') }}
|
|
</p>
|
|
</UiTooltipContent>
|
|
</UiTooltip>
|
|
</UiTooltipProvider>
|
|
</li>
|
|
|
|
<li v-for="(item, i) in currentMenu" :key="i">
|
|
<UiTooltipProvider :delay-duration="50">
|
|
<UiTooltip>
|
|
<UiTooltipTrigger as-child>
|
|
<UiButton v-if="item.to" variant="ghost" size="icon" class="rounded-full" as-child>
|
|
<RouterLink :to="item.to">
|
|
<component :is="item.phIcon" size="24" weight="fill" />
|
|
</RouterLink>
|
|
</UiButton>
|
|
<UiButton v-if="item.action" variant="ghost" size="icon" class="rounded-full" @click="handleMenuItemAction(item.action!)">
|
|
<component :is="item.phIcon" size="24" weight="fill" />
|
|
</UiButton>
|
|
</UiTooltipTrigger>
|
|
<UiTooltipContent :side="'right'" :side-offset="6">
|
|
<p>{{ item.tooltip }}</p>
|
|
</UiTooltipContent>
|
|
</UiTooltip>
|
|
</UiTooltipProvider>
|
|
</li>
|
|
</menu>
|
|
|
|
<UserCTA />
|
|
</nav>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
nav {
|
|
position: relative;
|
|
isolation: isolate;
|
|
|
|
&::after {
|
|
display: block;
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
inset-inline: 0;
|
|
height: 25rem;
|
|
max-height: 100%;
|
|
background-image: url("/images/sidebar.png");
|
|
background-position: bottom;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
mask-image: linear-gradient(to top, black 25%, transparent 50%, transparent);
|
|
z-index: -1;
|
|
}
|
|
}
|
|
</style>
|