feat: add Mantine drawer

src/components/drawers/SimpleDrawer.vue

@@ -3,7 +3,7 @@ const isDrawerOpen = defineModel<boolean>();
 </script>
 
 <template>
-  <aside class="simple-drawer" :class="{ open: isDrawerOpen }">
+  <aside class="navigation-drawer" :class="{ open: isDrawerOpen }">
     <slot />
   </aside>
   <div
@@ -14,21 +14,23 @@ const isDrawerOpen = defineModel<boolean>();
 </template>
 
 <style scoped lang="scss">
-.simple-drawer {
+.navigation-drawer {
   z-index: 9999;
   position: fixed;
   // top: 0;
   left: 0;
   height: 100%;
-  width: 300px;
+  width: 270px;
   translate: -300px 0;
   transition: all 0.2s ease;
-  background-color: #eee;
+  // background-color: #eee;
+  background-color: white;
   .notebook &,
   .desktop & {
     position: initial;
+    translate: 0;
   }
-  &.open {
+  .mobile &.open, .tablet &.open {
     translate: 0 0;
     transition: all 0.4s ease;
   }

src/components/drawers/TouchSlideoutDrawer.vue

@@ -208,7 +208,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <aside ref="touchSlideout" class="touch-slideout" :class="{ open: isDrawerOpen }">
+  <aside ref="touchSlideout" class="navigation-drawer" :class="{ open: isDrawerOpen }">
     <div ref="touchSlideoutWrapper" class="touch-slideout-wrapper">
       <div class="touch-slideout-drawer">
         <slot :close-drawer="close" />
@@ -223,7 +223,7 @@ onUnmounted(() => {
 </template>
 
 <style scoped lang="scss">
-.touch-slideout {
+.navigation-drawer {
   z-index: 9999;
   position: fixed;
   // top: 0;

src/components/footers/MantineRichFooter.vue

@@ -81,7 +81,7 @@ const socials = [
 <style lang="scss" scoped>
 .footer {
   padding: 1em;
-  margin-top: 5rem;
+  margin-top: 1rem;
   border-top: 1px solid #e9ecef;
   background-color: #f8f9fa;
 

src/components/footers/MantineSimpleFooter.vue

@@ -68,7 +68,7 @@ const socials = [
 
 <style lang="scss" scoped>
 .footer {
-  margin-top: 5rem;
+  margin-top: 1rem;
   border-top: 1px solid #e9ecef;
   // .footer-inner {
   align-items: none;

src/components/navbars/MantineSimpleNavbar.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import BaseIcon from "@/components/ui/BaseIcon.vue";
+import { useAppConfig } from "@/composables/useAppConfig";
+
+const { closeDrawer } = useAppConfig();
+
+const links = [
+  { name: "home", label: "Home", icon: "home" },
+  { name: "about", label: "About", icon: "about" },
+  { name: "contacts", label: "Contact us", icon: "contact-us" },
+];
+const footerLinks = [
+  { name: "home", label: "Change account", icon: "change-account" },
+  { name: "home", label: "Logout", icon: "logout" },
+];
+</script>
+
+<template>
+  <nav class="navbar">
+    <div class="main">
+      <ul>
+        <li v-for="link in links" :key="link.label">
+          <router-link v-slot="{ navigate }" :to="{ name: link.name }" custom @click="closeDrawer">
+            <BaseIcon size="30" :name="link.icon" class="icon" fill1="currentColor" />
+            <a role="link" @click="navigate">{{ link.label }}</a>
+          </router-link>
+        </li>
+      </ul>
+    </div>
+    <div class="footer">
+      <ul>
+        <li v-for="link in footerLinks" :key="link.label">
+          <router-link v-slot="{ navigate }" :to="{ name: link.name }" custom @click="closeDrawer">
+            <BaseIcon size="30" :name="link.icon" class="icon" />
+            <a role="link" @click="navigate">{{ link.label }}</a>
+          </router-link>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>
+
+<style lang="scss" scoped>
+.navbar {
+  min-width: 220px;
+  padding: 1em;
+  border-right: 1px solid #ccc;
+
+  .notebook & {
+    min-width: 220px;
+  }
+
+  .main, .footer {
+    ul {
+      list-style-type: none;
+      padding-left: 0;
+
+      li {
+        line-height: 3em;
+        display: flex;
+        align-items: center;
+        color: #888;
+        // border-bottom: solid 1px rgb(200, 200, 200);
+        &:hover {
+          color: #444;
+          background-color: #f9f9f9;
+        }
+
+        a {
+          cursor: pointer;
+          display: block;
+          padding: 0 2em 0 1em;
+          color: #888;
+        }
+        // .icon {
+        //   color: #444;
+        // }
+      }
+
+    }
+  }
+  .main {
+    padding-bottom: 2em;
+  }
+  .footer {
+    // padding-top: 1em;
+    margin-top: 1em;
+    border-top: 1px solid #ccc;
+
+  }
+}
+</style>

src/components/AppSidebar.vue → src/components/navbars/SimpleNavbar.vue

@@ -6,7 +6,7 @@ const { closeDrawer } = useAppConfig();
 const links = [
   { name: "home", label: "Home" },
   { name: "about", label: "About" },
-  { name: "contacts", label: "Contacts" },
+  { name: "contacts", label: "Contact us" },
 ];
 </script>
 
@@ -15,7 +15,7 @@ const links = [
     <ul>
       <li v-for="link in links" :key="link.label">
         <router-link v-slot="{ navigate }" :to="{ name: link.name }" custom @click="closeDrawer">
-          <a role="link" @click="navigate" @keypress.enter="navigate">{{ link.label }}</a>
+          <a role="link" @click="navigate">{{ link.label }}</a>
         </router-link>
       </li>
     </ul>

src/components/ui/BaseIcon.vue

@@ -46,7 +46,7 @@ const height = computed(() => {
     v-if="getSvgIcon(props.name)"
     class="base-icon"
     :data-name="props.name"
-    :fill="props.fill ?? 'currentColor'"
+    :fill1="props.fill ?? 'currentColor'"
     stroke="currentColor"
     :style="{
       width,
@@ -78,6 +78,7 @@ const height = computed(() => {
     stroke: currentColor;
     stroke-width: 1.5;
     fill: v-bind('props.fill');
+    // fill: v-bind('props.fill ?? "currentColor"');
   }
 }
 </style>

src/layouts/MainLayout.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
 import AppContentPane from "@/components/AppContentPane.vue";
-import AppNavigationDrawer from "@/components/drawers/TouchSlideoutDrawer.vue";
-import AppSidebar from "@/components/AppSidebar.vue";
+import AppNavigationDrawer from "@/components/drawers/SimpleDrawer.vue";
+
+// import AppNavigationDrawer from "@/components/drawers/TouchSlideoutDrawer.vue";
+
+// import AppSidebar from "@/components/navbars/SimpleNavbar.vue";
+import AppSidebar from "@/components/navbars/MantineSimpleNavbar.vue";
+
+import AppHeader from "@/components/headers/MantineSimpleHeader.vue";
 
-// import AppHeader from "@/components/headers/MantineSimpleHeader.vue";
-// import AppHeader from "@/components/headers/MantineSimpleHeader.vue";
 // import AppHeader from "@/components/headers/MantineLayeredHeader.vue";
-import AppHeader from "@/components/headers/SimpleHeader.vue";
+// import AppHeader from "@/components/headers/SimpleHeader.vue";
 
 // import AppFooter from "@/components/footers/RichFooter.vue";
 // import AppFooter from "@/components/footers/DistributedFooter.vue";
-// import AppFooter from "@/components/footers/MantineSimpleFooter.vue";
+import AppFooter from "@/components/footers/MantineSimpleFooter.vue";
+
 // import AppFooter from "@/components/footers/MantineRichFooter.vue";
-import AppFooter from "@/components/footers/SimpleFooter.vue";
+
+// import AppFooter from "@/components/footers/SimpleFooter.vue";
 
 import { useAppConfig } from "@/composables/useAppConfig";