main layout

src/layouts/FullContent.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="w-full h-full flex flex-row gap-4">
+    <div class="max-w-full flex grow gap-4 md:flex-row flex-col">
+      <slot name="main"></slot>
+    </div>
+  </div>
+</template>

src/layouts/Sidebar.vue

@@ -0,0 +1,36 @@
+<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-4" :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.activeLink == null;
+    },
+  },
+});
+</script>