ff-admin/src/layouts/Sidebar.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>