src/layouts/LeftSidebarLayout.vue

@@ -1,23 +1,12 @@
 <script setup>
 import Sidebar from '@/features/sidebar/components/Sidebar.vue';
-
-import { computed, useSlots } from 'vue';
-
-const slots = useSlots();
-
-const hasSidebarSlot = computed(() => !!slots.sidebar);
 </script>
 
 <template>
-    <div
+    <div class="layout-container">
-        class="layout-container"
-        :style="{ 'grid-template-columns': `${hasSidebarSlot ? 'minmax(auto, 340px) ' : ''}1fr` }"
-    >
-        <div v-if="hasSidebarSlot">
         <Sidebar>
             <slot name="sidebar" />
         </Sidebar>
-        </div>
         <div>
             <slot />
         </div>
@@ -27,5 +16,6 @@ const hasSidebarSlot = computed(() => !!slots.sidebar);
 <style scoped>
 .layout-container {
     display: grid;
+    grid-template-columns: min(24%, 280px) 1fr;
 }
 </style>