45 lines
1.3 KiB
Vue
45 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import type { HTMLAttributes } from "vue";
|
|
import { PanelLeftClose, PanelLeftOpen } from "lucide-vue-next";
|
|
import { cn } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useSidebar } from "./utils";
|
|
import { useLocalization } from "@/composables/useLocalization";
|
|
|
|
const props = defineProps<{
|
|
class?: HTMLAttributes["class"];
|
|
}>();
|
|
|
|
const { isMobile, state, openMobile, toggleSidebar } = useSidebar();
|
|
const { t } = useLocalization();
|
|
</script>
|
|
|
|
<template>
|
|
<Button
|
|
data-sidebar="trigger"
|
|
data-slot="sidebar-trigger"
|
|
variant="ghost"
|
|
size="icon"
|
|
type="button"
|
|
aria-controls="app-navigation"
|
|
:aria-expanded="isMobile ? openMobile : state === 'expanded'"
|
|
:aria-label="
|
|
isMobile
|
|
? t(openMobile ? 'navigation.close' : 'navigation.open')
|
|
: t(
|
|
state === 'collapsed'
|
|
? 'navigation.expand'
|
|
: 'navigation.collapse',
|
|
)
|
|
"
|
|
:class="cn('size-control', props.class)"
|
|
@click="toggleSidebar"
|
|
>
|
|
<PanelLeftOpen
|
|
v-if="isMobile || state === 'collapsed'"
|
|
aria-hidden="true"
|
|
/>
|
|
<PanelLeftClose v-else aria-hidden="true" />
|
|
</Button>
|
|
</template>
|