refactor of menus

begin work on settings

src/components/settings/MenuDisplay.vue

@@ -0,0 +1,33 @@
+<template>
+
+</template>
+
+<script setup>
+// import AlwaysDisplayImg from '../../img/admin/layout-always-displayed.svg'
+// import WideMenuImg from '../../img/admin/layout-big-menu.svg'
+// import DefaultImg from '../../img/admin/layout-default.svg'
+// import WithCategoriesImg from '../../img/admin/layout-width-categories.svg'
+
+const choices = [
+  // {id: 1, url: AlwaysDisplayImg},
+  // {id: 2, url: WideMenuImg},
+  // {id: 3, url: DefaultImg},
+  // {id: 4, url: WithCategoriesImg},
+]
+
+const carouselConfig = {
+  itemsToShow: 1.3,
+  wrapAround: true
+}
+
+const { mode, alwaysDisplayed } = defineProps({
+  mode: {
+    type: String,
+    required: true,
+  },
+  alwaysDisplayed: {
+    type: Boolean,
+    required: true,
+  }
+})
+</script>

src/components/settings/TableContainer.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="side-menu-setting-table">
+    <slot></slot>
+  </div>
+</template>

src/components/settings/TableLabel.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="side-menu-setting-label" :class="{
+    'side-menu-setting-label-short': short,
+    'side-menu-setting-label--top': top,
+    'side-menu-setting-label--middle': middle,
+  }">
+    {{ t('side_menu', label) }}
+  </div>
+</template>
+
+<script setup>
+const { short, label } = defineProps({
+  short: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  middle: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  top: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+})
+</script>

src/components/settings/TableRow.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="side-menu-setting-row">
+    <slot></slot>
+  </div>
+</template>

src/components/settings/TableValue.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="side-menu-setting-form" :class="{'side-menu-setting-form-long': long}">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+const { long } = defineProps({
+  long: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+})
+</script>