feat(ui): allow Layout component to embody Html tags (nav, header, ...)

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>