From b31a8caf8679ddd8647154de266083236182488e Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Tue, 17 Dec 2024 15:11:05 +0100
Subject: [PATCH] feat(ui): allow Layout component to embody Html tags (nav,
 header, ...)

---
 front/src/components/ui/Layout.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/front/src/components/ui/Layout.vue b/front/src/components/ui/Layout.vue
index 1bec59f8a..3295141d2 100644
--- a/front/src/components/ui/Layout.vue
+++ b/front/src/components/ui/Layout.vue
@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import { useCssModule } from 'vue'
 
-const props = defineProps<{ [P in "stack" | "grid" | "flex"]?: true } & { columnWidth?: number, noGap?:true }>()
+const props = defineProps<
+  { columnWidth?: number, noGap?:true }
+  & { [P in "stack" | "grid" | "flex"]?: true }
+  & { [C in "nav" | "aside" | "header" | "footer" | "main"]?:true }>()
 const classes = useCssModule()
 const columnWidth = props.columnWidth ?? 320
 </script>
 
 <template>
-  <div :class="[
+  <component
+    :is="props.nav ? 'nav' : props.aside ? 'aside' : props.header ? 'header' : props.footer ? 'footer' : props.main ? 'main' : 'div'"
+    :class="[
     classes.layout,
     noGap || classes.gap,
     props.grid ? classes.grid
@@ -15,7 +20,7 @@ const columnWidth = props.columnWidth ?? 320
         : classes.stack
   ]">
     <slot />
-  </div>
+</component>
 </template>
 
 <style module>