Design Mobile Menu ( Only Surface Items )

src/client/src/assets/sass/public/style.sass

@@ -20,6 +20,47 @@ section
   --slider-height: 4px
   --slider-bg: #A0A0A0 !important
 
+#mobile_menu
+  background-color: #fff
+  position: fixed
+  padding: 40px 0
+  z-index: 999!important
+  top: 0
+  left: 0
+  bottom: 0!important
+
+  > .logo > img
+    height: 32px!important
+
+  > .exit
+    height: 14px!important
+    width: 14px!important
+    right: 16px!important
+    top: 37px!important
+
+  > .surface
+
+    > a
+      color: #6E6E6E!important
+      text-decoration: none!important
+
+      > .icon
+        width: 65px!important
+        height: 48px!important
+        border-radius: 0 4px 4px 0!important
+
+        > img
+          width: 24px!important
+
+        > p
+          font-size: 16px!important
+
+    > .active
+      color: #68B64D!important
+
+      > .icon
+        background-color: #D1E9C9!important
+
 .share-module
   display: flex
   flex-direction: column

src/client/src/components/Layout.vue

@@ -65,7 +65,7 @@
       .mobile.d-none.row
 
         .col-4.d-flex.align-items-center.justify-content-start
-          img.cursor-pointer( src="../assets/img/icons/icon_menu.svg" alt="menu" )
+          img.cursor-pointer( src="../assets/img/icons/icon_menu.svg" alt="menu" @click="toggleMobileSidebar" )
 
         .col-4.d-flex.justify-content-center
           img.m-auto.cursor-pointer.logo( src="../assets/img/images/brand/logo.png" @click="goTo('/')" alt="Weeki" )
@@ -105,6 +105,32 @@
 
           WeekiIconBtn( icon="icons/icon_login_white.svg" @click="goTo('/account/login?back=' + $route.path)" v-else )
 
+  #mobile_menu.d-none.w3-animate-left.h-100.w-100(
+    v-if="layout === 'surface' || layout === 'error' || layout === 'single' || layout === 'dashboard'"
+  )
+
+    img.position-absolute.cursor-pointer.exit.w3-animate-zoom(
+      @click="toggleMobileSidebar"
+      src="../assets/img/icons/icon_exit.svg"
+      alt="exit"
+    )
+
+    .logo.d-flex.align-items-center.justify-content-center
+      img.w3-animate-zoom.pt-1.pb-1.cursor-pointer( src="../assets/img/images/brand/logo.png" @click="$router.push('/')" alt="weeki" )
+
+    WeekiIconButton.mt-24.mr-16.ml-16.w3-animate-zoom(
+      v-if="$route.path !== '/'"
+      text="Advanced Search"
+      icon="icons/icon_search_green.svg"
+    )
+
+    .surface.mt-24
+
+      MobileMenuItem( page="home" link="/" icon="home" )
+      MobileMenuItem( page="about" link="/about" icon="info" )
+      MobileMenuItem( page="contact" link="/contact" icon="phone" )
+      MobileMenuItem( page="faq" link="/faq" icon="question" )
+
   section.flex-grow-1( v-if="layout === 'surface' || layout === 'error' || layout === 'single'" data-surface )
 
     slot
@@ -462,9 +488,12 @@ import WeekiIconBtn from "@/components/elements/WeekiIconBtn.vue"
 import WeekiNormalModal from "@/components/elements/WeekiNormalModal.vue"
 import WeekiTextInput from "@/components/elements/WeekiTextInput.vue"
 import WeekiTextArea from "@/components/elements/WeekiTextArea.vue"
+import WeekiIconButton from "@/components/elements/WeekiIconButton.vue"
+import MobileMenuItem from "@/components/components/MobileMenuItem.vue"
 import {useDropzone} from "vue3-dropzone"
-import Swal from "sweetalert2";
-import store from "@/store";
+import Swal from "sweetalert2"
+import store from "@/store"
+
 
 /* eslint @typescript-eslint/no-var-requires: "off" */
 /* eslint-disable  @typescript-eslint/no-explicit-any */
@@ -479,7 +508,9 @@ import store from "@/store";
     WeekiIconBtn,
     WeekiNormalModal,
     WeekiTextInput,
-    WeekiTextArea
+    WeekiTextArea,
+    WeekiIconButton,
+    MobileMenuItem
   },
 
   // App Variables
@@ -563,6 +594,13 @@ import store from "@/store";
           // Load Page
           await this.load()
         }
+
+        // Define Menu Element
+        const el = document
+            .querySelector("#mobile_menu")!
+
+        // Check Null
+        if (el) if (!el.classList.contains("d-none")) el.classList.add("d-none")
       }
     },
 
@@ -983,6 +1021,11 @@ import store from "@/store";
       return final
     },
 
+    toggleMobileSidebar()
+    {
+      document.querySelector("#mobile_menu")!.classList.toggle("d-none")
+    },
+
     dashboardMenuToggle()
     {
       if(this.dashboardMenu !== "open")

src/client/src/components/components/MobileMenuItem.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+
+router-link.mobileMenuItem.d-flex.mt-16( active-class="active" :to="link" )
+
+  .icon.d-flex.justify-content-center.align-items-center.w3-animate-left
+    img( :src="require('@/assets/img/icons/icon_' + icon + ($route.path !== link? '_gray.svg' : '_green.svg'))" :alt="page" )
+
+  .text.flex-grow-1.pl-16.d-flex.justify-content-start.align-items-center.w3-animate-opacity
+    p.mb-0 {{ page }}
+
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component'
+
+@Options({
+
+  // Element Props
+  props: ["page", "link", "icon"],
+})
+export default class MobileMenuItem extends Vue {}
+</script>

src/client/src/components/elements/WeekiIconButton.vue

@@ -0,0 +1,36 @@
+<template lang="pug">
+
+.weekiIconButton.cursor-pointer.d-flex.align-items-center.justify-content-center
+
+  img( :src="require('@/assets/img/' + icon)" alt="img" )
+
+  | {{ text }}
+
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component'
+
+@Options({
+
+  // Element Props
+  props: ["icon", "type", "text"],
+})
+export default class WeekiIconButton extends Vue {}
+</script>
+
+<style scoped lang="sass">
+.weekiIconButton
+  background-color: #D1E9C9!important
+  box-shadow: 0 3px 10px #0000001A!important
+  border-radius: 4px!important
+  padding: 16px 0!important
+  color: #68B64D!important
+  font-size: 14px!important
+
+.weekiIconButton:hover
+  box-shadow: none!important
+
+.weekiIconButton > img
+  margin-right: 8px!important
+</style>