Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added sidebar toggle

Browse Source
This commit is contained in:
Alexis
2025-04-29 09:28:49 +02:00
parent a5f7e1ded9
commit 387597755d
2 changed files with 38 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/calendar/CurrentDate.vue
View File

@@ -37,8 +37,8 @@ const isToday = computed(() => getDifferenceInDays(defaultDate, selectedDate.val
<template #fallback>
<div class="flex items-center gap-1">
<UiSkeleton class="h-8 w-64" />
<UiSkeleton class="h-6 w-28" />
<UiSkeleton class="h-8 w-64 max-md:max-w-full" />
<UiSkeleton class="max-md:hidden h-6 w-28" />
</div>
</template>
</ClientOnly>

47
components/global/sidebar/Sidebar.vue
View File

@@ -2,6 +2,7 @@
import { PhCompass, PhGlobeHemisphereEast, PhHurricane, PhX } from "@phosphor-icons/vue"
import type { SidebarMenuActionType, SidebarMenuIcon } from "./SidebarProps";
import { cn } from "~/lib/utils";
import { breakpointsTailwind } from "@vueuse/core"
const { revealAdvancedSearch } = useCalendar()
const { toggleSidebar } = useUiStore()
@@ -24,6 +25,10 @@ function computeMenuItemIcon(iconString: SidebarMenuIcon) {
}
}
const breakpoints = useBreakpoints(
breakpointsTailwind
)
// const sidebarRef = ref(null)
// onClickOutside(sidebarRef, () => {
@@ -35,32 +40,52 @@ function computeMenuItemIcon(iconString: SidebarMenuIcon) {
<nav
ref="sidebarRef"
:class="cn(
['md:relative md:isolate w-16 py-6 grid grid-rows-[1fr_auto] justify-center transition-all'], // Base appearance
['md:relative md:isolate w-16 py-6 grid gap-4 grid-rows-[1fr_auto] justify-center transition-all'], // Base appearance
['after:opacity-50 after:contrast-125 dark:after:opacity-75 dark:after:contrast-175 after:-hue-rotate-60'], // After styling
['border-r-[1px] bg-indigo-700 dark:bg-black text-white border-r-indigo-700 dark:border-r-indigo-950 shadow-navbar-light dark:shadow-navbar-dark'], // Colours
['max-md:absolute max-md:left-0 max-md:inset-0 max-md:z-50'], // Responsive behaviours
['max-md:justify-stretch max-md:px-4 max-md:py-4 max-md:absolute max-md:left-0 max-md:inset-0 max-md:z-50 max-md:w-30 max-md:max-w-full'], // Responsive behaviours
{
'max-md:-translate-x-16': !isSidebarOpened,
'max-md:-translate-x-30': !isSidebarOpened,
'max-md:-translate-x-0 shadow-navbar-dark dark:bg-slate-950': isSidebarOpened
}
)"
>
<menu class="flex flex-col gap-4">
<li class="mb-12">
<UiButton variant="ghost" size="icon" class="rounded-full" @click="toggleSidebar">
<PhX size="24" />
<menu class="flex flex-col gap-4 max-md:items-center">
<li class="mb-12 mt-4 max-md:self-start">
<UiButton
variant="outline"
size="icon"
class="md:hidden size-9 border-background/30"
@click="toggleSidebar"
>
<PhX size="19" />
</UiButton>
</li>
<li>
<UiTooltipProvider :delay-duration="50">
<li class="max-md:self-start">
<UiTooltipProvider :delay-duration="50" :disabled="!breakpoints.md.value">
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton variant="ghost" size="icon" class="rounded-full" as-child>
<UiButton
variant="ghost"
size="icon"
class="rounded-full max-md:hidden"
as-child
>
<RouterLink to="/explore">
<PhCompass size="24" weight="fill" />
</RouterLink>
</UiButton>
<RouterLink
to="/explore"
class="md:hidden flex items-center gap-[.6ch] underline-offset-4 hover:underline"
>
<PhCompass size="22" weight="fill" />
<span class="text-[.9em]">
{{ $t('pages.explore.menuLabel') }}
</span>
</RouterLink>
</UiTooltipTrigger>
<UiTooltipContent :side="'right'" :side-offset="6">
<p>
@@ -106,9 +131,7 @@ function computeMenuItemIcon(iconString: SidebarMenuIcon) {
</ClientOnly>
</menu>
<div ref="userMenuRef">
<UserCTA />
</div>
</nav>
</template>