From 1c5491c72c367b88e7817420cf7a89f657fe9cf7 Mon Sep 17 00:00:00 2001
From: Ruslan Makarov <ruslan.makarov@gmail.com>
Date: Fri, 8 Dec 2023 18:17:05 +0300
Subject: [PATCH] feat: add Mantine drawer

---
 src/assets/images/about.svg                   |  1 +
 src/assets/images/change-account.svg          |  1 +
 src/assets/images/contact-us.svg              |  1 +
 src/assets/images/home.svg                    |  1 +
 src/assets/images/logout.svg                  |  1 +
 src/components/drawers/SimpleDrawer.vue       | 12 ++-
 .../drawers/TouchSlideoutDrawer.vue           |  4 +-
 src/components/footers/MantineRichFooter.vue  |  2 +-
 .../footers/MantineSimpleFooter.vue           |  2 +-
 .../navbars/MantineSimpleNavbar.vue           | 92 +++++++++++++++++++
 .../SimpleNavbar.vue}                         |  4 +-
 src/components/ui/BaseIcon.vue                |  3 +-
 src/layouts/MainLayout.vue                    | 20 ++--
 13 files changed, 125 insertions(+), 19 deletions(-)
 create mode 100644 src/assets/images/about.svg
 create mode 100644 src/assets/images/change-account.svg
 create mode 100644 src/assets/images/contact-us.svg
 create mode 100644 src/assets/images/home.svg
 create mode 100644 src/assets/images/logout.svg
 create mode 100644 src/components/navbars/MantineSimpleNavbar.vue
 rename src/components/{AppSidebar.vue => navbars/SimpleNavbar.vue} (86%)

diff --git a/src/assets/images/about.svg b/src/assets/images/about.svg
new file mode 100644
index 0000000..830b396
--- /dev/null
+++ b/src/assets/images/about.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M5 3h14a2 2 0 0 1 2 2v14c0 .53-.21 1.04-.59 1.41c-.37.38-.88.59-1.41.59H5c-.53 0-1.04-.21-1.41-.59C3.21 20.04 3 19.53 3 19V5c0-1.11.89-2 2-2m8 6V7h-2v2h2m0 8v-6h-2v6h2Z"/></svg>
diff --git a/src/assets/images/change-account.svg b/src/assets/images/change-account.svg
new file mode 100644
index 0000000..3b3e9a5
--- /dev/null
+++ b/src/assets/images/change-account.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="NavbarSimple_linkIcon__0REQh"><path d="M16 3l4 4l-4 4"></path><path d="M10 7l10 0"></path><path d="M8 13l-4 4l4 4"></path><path d="M4 17l9 0"></path></svg>
diff --git a/src/assets/images/contact-us.svg b/src/assets/images/contact-us.svg
new file mode 100644
index 0000000..c2253ef
--- /dev/null
+++ b/src/assets/images/contact-us.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M15 12h2a5 5 0 0 0-5-5v2a3 3 0 0 1 3 3m4 0h2c0-5-4.03-9-9-9v2c3.86 0 7 3.13 7 7m1 3.5c-1.25 0-2.45-.2-3.57-.57c-.35-.11-.74-.03-1.02.25l-2.2 2.2a15.097 15.097 0 0 1-6.59-6.59l2.2-2.2c.28-.28.36-.67.25-1.02A11.36 11.36 0 0 1 8.5 4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1a17 17 0 0 0 17 17a1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1Z"/></svg>
diff --git a/src/assets/images/home.svg b/src/assets/images/home.svg
new file mode 100644
index 0000000..548fe56
--- /dev/null
+++ b/src/assets/images/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 19v-8.5a1 1 0 0 0-.4-.8l-7-5.25a1 1 0 0 0-1.2 0l-7 5.25a1 1 0 0 0-.4.8V19a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1z"/></svg>
diff --git a/src/assets/images/logout.svg b/src/assets/images/logout.svg
new file mode 100644
index 0000000..9bd0c5c
--- /dev/null
+++ b/src/assets/images/logout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="NavbarSimple_linkIcon__0REQh"><path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path><path d="M9 12h12l-3 -3"></path><path d="M18 15l3 -3"></path></svg>
diff --git a/src/components/drawers/SimpleDrawer.vue b/src/components/drawers/SimpleDrawer.vue
index f511474..bf8519c 100644
--- a/src/components/drawers/SimpleDrawer.vue
+++ b/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;
   }
diff --git a/src/components/drawers/TouchSlideoutDrawer.vue b/src/components/drawers/TouchSlideoutDrawer.vue
index 8b55f31..2032801 100644
--- a/src/components/drawers/TouchSlideoutDrawer.vue
+++ b/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;
diff --git a/src/components/footers/MantineRichFooter.vue b/src/components/footers/MantineRichFooter.vue
index 2427b50..0ccfbde 100644
--- a/src/components/footers/MantineRichFooter.vue
+++ b/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;
 
diff --git a/src/components/footers/MantineSimpleFooter.vue b/src/components/footers/MantineSimpleFooter.vue
index 7e9b15b..69de076 100644
--- a/src/components/footers/MantineSimpleFooter.vue
+++ b/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;
diff --git a/src/components/navbars/MantineSimpleNavbar.vue b/src/components/navbars/MantineSimpleNavbar.vue
new file mode 100644
index 0000000..e928e3f
--- /dev/null
+++ b/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>
diff --git a/src/components/AppSidebar.vue b/src/components/navbars/SimpleNavbar.vue
similarity index 86%
rename from src/components/AppSidebar.vue
rename to src/components/navbars/SimpleNavbar.vue
index f004cc5..826816a 100644
--- a/src/components/AppSidebar.vue
+++ b/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>
diff --git a/src/components/ui/BaseIcon.vue b/src/components/ui/BaseIcon.vue
index 9ea73ff..4b8b0b1 100644
--- a/src/components/ui/BaseIcon.vue
+++ b/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>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 3489ebf..e479e00 100644
--- a/src/layouts/MainLayout.vue
+++ b/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";