generated from Seekra/repository-template
Include sidebar in the left sidebar layout
This commit is contained in:
@@ -1,23 +1,12 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Sidebar from '@/features/sidebar/components/Sidebar.vue';
|
import Sidebar from '@/features/sidebar/components/Sidebar.vue';
|
||||||
|
|
||||||
import { computed, useSlots } from 'vue';
|
|
||||||
|
|
||||||
const slots = useSlots();
|
|
||||||
|
|
||||||
const hasSidebarSlot = computed(() => !!slots.sidebar);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div class="layout-container">
|
||||||
class="layout-container"
|
<Sidebar>
|
||||||
:style="{ 'grid-template-columns': `${hasSidebarSlot ? 'minmax(auto, 340px) ' : ''}1fr` }"
|
<slot name="sidebar" />
|
||||||
>
|
</Sidebar>
|
||||||
<div v-if="hasSidebarSlot">
|
|
||||||
<Sidebar>
|
|
||||||
<slot name="sidebar" />
|
|
||||||
</Sidebar>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
@@ -27,5 +16,6 @@ const hasSidebarSlot = computed(() => !!slots.sidebar);
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.layout-container {
|
.layout-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
grid-template-columns: min(24%, 280px) 1fr;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user