Dashboard Mobile Menu

Version 1.0.3
YasTechOrg · Apr 23, 2022 · 5134c6c · 5134c6c
1 parent daca923
commit 5134c6c
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 25 deletions.
diff --git a/src/client/src/assets/sass/public/style.sass b/src/client/src/assets/sass/public/style.sass
@@ -28,38 +28,30 @@ section
   top: 0
   left: 0
   bottom: 0!important
+  overflow: auto!important
 
   > .logo > img
-    height: 32px!important
+    height: 40px!important
 
   > .exit
     height: 14px!important
     width: 14px!important
     right: 16px!important
     top: 37px!important
 
-  > .surface
+  > .dashboard > .part > .part_title
+    width: 100%!important
+    background-color: #F5F5F5!important
+    padding: 12px 24px!important
 
-    > 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
+    > img
+      height: 16px!important
+      width: 16px!important
 
-        > p
-          font-size: 16px!important
-
-    > .active
-      color: #68B64D!important
-
-      > .icon
-        background-color: #D1E9C9!important
+    > p
+      color: #6E6E6E!important
+      font-size: 16px!important
+      line-height: 16px!important
 
 .share-module
   display: flex

diff --git a/src/client/src/components/Layout.vue b/src/client/src/components/Layout.vue
@@ -131,6 +131,20 @@
       MobileMenuItem( page="contact" link="/contact" icon="phone" )
       MobileMenuItem( page="faq" link="/faq" icon="question" )
 
+    .dashboard( v-if="checkAuth" )
+
+      .part.mt-12( v-for="(item, index) in dashboard_menu_titles" :key="item" )
+
+        .part_title.d-flex.align-items-center.justify-content-start
+
+          img.mr-16( :src="require(`@/assets/img/icons/${ item.icon }.svg`)" :alt="item.name" )
+
+          p.mb-0 {{ item.name }}
+
+        .menu_items( v-if="typeof this.userInfo['access'] !== 'undefined' && this.userInfo['access'] != null" )
+
+          MobileMenuItem( v-for="link in dashboard_menu(index)" :key="link" :page="link.name" :link="link.path" :icon="link.icon" item="dash" )
+
   section.flex-grow-1( v-if="layout === 'surface' || layout === 'error' || layout === 'single'" data-surface )
 
     slot
@@ -282,7 +296,7 @@
 
         .line.w-100
 
-        p.mt-24.mb-0.text-center © {{ new Date().getFullYear() }} Weeki All Right Reserved. | #[a( :href="authorUrl" ) {{ authorName }}] made this site with 💙 | version 1.0.2
+        p.mt-24.mb-0.text-center © {{ new Date().getFullYear() }} Weeki All Right Reserved. | #[a( :href="authorUrl" ) {{ authorName }}] made this site with 💙 | version 1.0.3
 
 WeekiNormalModal(
   v-if="checkPage(['employee', 'my_contacts'])"

diff --git a/src/client/src/components/components/MobileMenuItem.vue b/src/client/src/components/components/MobileMenuItem.vue
@@ -3,7 +3,8 @@
 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" )
+    img( :src="require('@/assets/img/icons/icon_' + icon + ($route.path !== link? '_gray.svg' : '_green.svg'))" :alt="page" v-if="item !== 'dash'" )
+    span.material-icons( v-else ) {{ icon }}
 
   .text.flex-grow-1.pl-16.d-flex.justify-content-start.align-items-center.w3-animate-opacity
     p.mb-0 {{ page }}
@@ -16,7 +17,35 @@ import { Options, Vue } from 'vue-class-component'
 @Options({
 
   // Element Props
-  props: ["page", "link", "icon"],
+  props: ["page", "link", "icon", "item"],
 })
 export default class MobileMenuItem extends Vue {}
-</script>
+</script>
+
+<style scoped lang="sass">
+.mobileMenuItem
+  color: #6E6E6E!important
+  text-decoration: none!important
+
+  > .icon
+    width: 65px!important
+    height: 48px!important
+    border-radius: 0 4px 4px 0!important
+
+    > img, > span
+      width: 24px!important
+
+  > .text
+
+    > p
+      font-size: 16px!important
+
+.mobileMenuItem.active
+  color: #68B64D!important
+
+  > .icon
+    background-color: #D1E9C9!important
+
+    > span
+      color: #75BC5C
+</style>