ff-admin/src/layouts/Sidebar.vue

36 lines
965 B
Vue

<template>
<div class="w-full h-full flex flex-row gap-4">
<div
class="flex-col gap-4 md:min-w-72 lg:min-w-96"
:class="defaultRoute && defaultSidebar ? 'flex w-full md:w-72 lg:w-96' : 'hidden md:flex'"
>
<slot name="sidebar"></slot>
</div>
<div class="max-w-full grow flex-col gap-2" :class="defaultRoute && defaultSidebar ? 'hidden md:flex' : 'flex'">
<slot name="main"></slot>
</div>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useNavigationStore } from "@/stores/admin/navigation";
</script>
<script lang="ts">
export default defineComponent({
props: {
defaultSidebar: {
type: Boolean,
default: true,
},
},
computed: {
...mapState(useNavigationStore, ["activeLink"]),
defaultRoute() {
return ((this.$route?.name as string) ?? "").includes("-default");
},
},
});
</script>