bregsiaju
/
post-vue
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add collapsed nav

bregsiaju 1 year ago
parent
62d0d57c3a
commit
8412241032
7 changed files with 180 additions and 23 deletions
Unified View Show Diff Stats
  1. 1
    3
      index.html
  2. 37
    0
      package-lock.json
  3. 1
    0
      package.json
  4. 39
    5
      src/App.vue
  5. 76
    0
      src/components/CollapsedSidebar.vue
  6. 8
    3
      src/components/NavBar.vue
  7. 18
    12
      src/components/SideBar.vue

+ 1
- 3
index.html View File

5 
   <meta charset="UTF-8">
 5 
   <meta charset="UTF-8">
6 
   <link rel="icon" href="/favicon.ico">
 6 
   <link rel="icon" href="/favicon.ico">
7 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 
-  <title>Vite App</title>
8 
+  <title>POST Cafe</title>
9 
 </head>
 9 
 </head>
10
10
11 
 <body>
 11 
 <body>
12 
   <div id="app"></div>
 12 
   <div id="app"></div>
13 
   <script type="module" src="/src/main.js"></script>
 13 
   <script type="module" src="/src/main.js"></script>
14 
-  <!-- iconify -->
15 
-  <script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
16 
 </body>
 14 
 </body>
17
15
18 
 </html>
 16 
 </html>

+ 37
- 0
package-lock.json View File

15 
         "vue-router": "^4.2.4"
 15 
         "vue-router": "^4.2.4"
16 
       },
 16 
       },
17 
       "devDependencies": {
 17 
       "devDependencies": {
18 
+        "@iconify/vue": "^4.1.1",
18 
         "@rushstack/eslint-patch": "^1.3.2",
 19 
         "@rushstack/eslint-patch": "^1.3.2",
19 
         "@vitejs/plugin-vue": "^4.3.1",
 20 
         "@vitejs/plugin-vue": "^4.3.1",
20 
         "@vue/eslint-config-prettier": "^8.0.0",
 21 
         "@vue/eslint-config-prettier": "^8.0.0",
486 
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
 487 
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
487 
       "dev": true
 488 
       "dev": true
488 
     },
 489 
     },
490 
+    "node_modules/@iconify/types": {
491 
+      "version": "2.0.0",
492 
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
493 
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
494 
+      "dev": true
495 
+    },
496 
+    "node_modules/@iconify/vue": {
497 
+      "version": "4.1.1",
498 
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.1.1.tgz",
499 
+      "integrity": "sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==",
500 
+      "dev": true,
501 
+      "dependencies": {
502 
+        "@iconify/types": "^2.0.0"
503 
+      },
504 
+      "funding": {
505 
+        "url": "https://github.com/sponsors/cyberalien"
506 
+      },
507 
+      "peerDependencies": {
508 
+        "vue": ">=3"
509 
+      }
510 
+    },
489 
     "node_modules/@jridgewell/sourcemap-codec": {
 511 
     "node_modules/@jridgewell/sourcemap-codec": {
490 
       "version": "1.4.15",
 512 
       "version": "1.4.15",
491 
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
 513 
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
3032 
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
 3054 
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
3033 
       "dev": true
 3055 
       "dev": true
3034 
     },
 3056 
     },
3057 
+    "@iconify/types": {
3058 
+      "version": "2.0.0",
3059 
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
3060 
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
3061 
+      "dev": true
3062 
+    },
3063 
+    "@iconify/vue": {
3064 
+      "version": "4.1.1",
3065 
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.1.1.tgz",
3066 
+      "integrity": "sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==",
3067 
+      "dev": true,
3068 
+      "requires": {
3069 
+        "@iconify/types": "^2.0.0"
3070 
+      }
3071 
+    },
3035 
     "@jridgewell/sourcemap-codec": {
 3072 
     "@jridgewell/sourcemap-codec": {
3036 
       "version": "1.4.15",
 3073 
       "version": "1.4.15",
3037 
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
 3074 
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",

+ 1
- 0
package.json View File

17 
     "vue-router": "^4.2.4"
 17 
     "vue-router": "^4.2.4"
18 
   },
 18 
   },
19 
   "devDependencies": {
 19 
   "devDependencies": {
20 
+    "@iconify/vue": "^4.1.1",
20 
     "@rushstack/eslint-patch": "^1.3.2",
 21 
     "@rushstack/eslint-patch": "^1.3.2",
21 
     "@vitejs/plugin-vue": "^4.3.1",
 22 
     "@vitejs/plugin-vue": "^4.3.1",
22 
     "@vue/eslint-config-prettier": "^8.0.0",
 23 
     "@vue/eslint-config-prettier": "^8.0.0",

+ 39
- 5
src/App.vue View File

1 
-<script setup>
1 
+<script>
2 
 import { RouterView } from 'vue-router'
 2 
 import { RouterView } from 'vue-router'
3 
 import Navbar from './components/Navbar.vue'
 3 
 import Navbar from './components/Navbar.vue'
4 
 import SideBar from './components/SideBar.vue'
 4 
 import SideBar from './components/SideBar.vue'
5 
+import CollapsedSidebar from './components/CollapsedSidebar.vue'
6 
+
7 
+export default {
8 
+  components: {
9 
+    RouterView,
10 
+    Navbar,
11 
+    SideBar,
12 
+    CollapsedSidebar
13 
+  },
14 
+  data() {
15 
+    return {
16 
+      isCollapsed: false
17 
+    }
18 
+  },
19 
+  methods: {
20 
+    collapseSide() {
21 
+      this.isCollapsed = true
22 
+    },
23 
+    expandSide() {
24 
+      this.isCollapsed = false
25 
+    }
26 
+  }
27 
+}
5 
 </script>
 28 
 </script>
6
29
7 
 <template>
 30 
 <template>
8 
-  <Navbar />
9 
-  <SideBar />
10 
-  <main>
31 
+  <Navbar :class="{ 'menu-collapse': isCollapsed }" />
32 
+  <CollapsedSidebar v-if="isCollapsed" @expand="expandSide" />
33 
+  <SideBar v-else @collapse="collapseSide" />
34 
+  <main :class="{ 'menu-collapse': isCollapsed }">
11 
     <RouterView />
 35 
     <RouterView />
12 
   </main>
 36 
   </main>
13 
 </template>
 37 
 </template>
14
38
15 
-<style>
39 
+<style lang="scss">
16 
 main {
 40 
 main {
17 
   padding: 60px 0 0 200px;
 41 
   padding: 60px 0 0 200px;
42 
+
43 
+  &.menu-collapse {
44 
+    padding-left: 70px;
45 
+  }
46 
+}
47 
+
48 
+.navbar.menu-collapse {
49 
+  .header-right {
50 
+    padding-left: 0px;
51 
+  }
18 
 }
 52 
 }
19 
 </style>
 53 
 </style>

+ 76
- 0
src/components/CollapsedSidebar.vue View File

1 
+<template>
2 
+  <div class="mini-left-menu position-fixed z-2 vh-100 bg-white d-flex flex-column justify-content-between">
3 
+    <div>
4 
+      <div class="toggle-nav expand position-absolute d-flex justify-content-center align-items-center"
5 
+        @click="$emit('expand')">
6 
+        <Icon icon="icon-park-outline:double-right" width="24" class="text-white" />
7 
+      </div>
8 
+      <div class="list-group rounded-0 mt-3">
9 
+        <RouterLink to="/dashboard" class="list-group-item text-center" data-bs-toggle="tooltip" data-bs-placement="right"
10 
+          data-bs-title="Dashboard">
11 
+          <Icon icon="radix-icons:dashboard" width="20" />
12 
+        </RouterLink>
13 
+        <RouterLink to="/" class="list-group-item text-center" data-bs-toggle="tooltip" data-bs-placement="right"
14 
+          data-bs-title="Cashier">
15 
+          <Icon icon="streamline:money-cashier-shop-shopping-pay-payment-cashier-store-cash-register-machine"
16 
+            width="20" />
17 
+        </RouterLink>
18 
+        <RouterLink to="/menu" class="list-group-item text-center" data-bs-toggle="tooltip" data-bs-placement="right"
19 
+          data-bs-title="Manage Menu">
20 
+          <Icon icon="tabler:coffee" width="22" />
21 
+        </RouterLink>
22 
+        <RouterLink to="/reports" class="list-group-item text-center" data-bs-toggle="tooltip" data-bs-placement="right"
23 
+          data-bs-title="Reports">
24 
+          <Icon icon="mdi:report-line" width="20" />
25 
+        </RouterLink>
26 
+        <RouterLink to="/customer" class="list-group-item text-center" data-bs-toggle="tooltip" data-bs-placement="right"
27 
+          data-bs-title="Manage Customer">
28 
+          <Icon icon="uil:user" width="20" />
29 
+        </RouterLink>
30 
+      </div>
31 
+    </div>
32 
+    <div class="logout text-center" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Log out">
33 
+      <Icon icon="uil:signout" rotate="180deg" width="20" />
34 
+    </div>
35 
+  </div>
36 
+</template>
37 
+
38 
+<script>
39 
+import { Icon } from '@iconify/vue';
40 
+import { Tooltip } from 'bootstrap'
41 
+
42 
+export default {
43 
+  name: 'CollapsedSidebar',
44 
+  components: {
45 
+    Icon
46 
+  },
47 
+  mounted() {
48 
+    new Tooltip(document.body, {
49 
+      selector: "[data-bs-toggle='tooltip']",
50 
+    })
51 
+  }
52 
+}
53 
+</script>
54 
+
55 
+<style lang="scss" scoped>
56 
+.mini-left-menu {
57 
+  padding-top: 60px;
58 
+  box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.25);
59 
+  position: fixed;
60 
+
61 
+  .list-group-item {
62 
+    border: none;
63 
+    padding: 14px 20px;
64 
+  }
65 
+
66 
+  .logout {
67 
+    margin-left: 0;
68 
+    margin-right: 0;
69 
+  }
70 
+
71 
+  a.router-link-exact-active {
72 
+    background: #B98AEE;
73 
+    color: #fff;
74 
+  }
75 
+}
76 
+</style>

+ 8
- 3
src/components/NavBar.vue View File

8 
         <!-- search box -->
 8 
         <!-- search box -->
9 
         <form class="d-flex position-relative" role="search">
 9 
         <form class="d-flex position-relative" role="search">
10 
           <input class="form-control" type="search" placeholder="Search menu" aria-label="Search" name="search">
 10 
           <input class="form-control" type="search" placeholder="Search menu" aria-label="Search" name="search">
11 
-          <iconify-icon icon="mdi:search" class="text-dark-purple icon-search" height="24"></iconify-icon>
11 
+          <Icon icon="mdi:search" class="text-dark-purple icon-search" height="24"></Icon>
12 
         </form>
 12 
         </form>
13 
         <div class="profil d-flex align-items-center gap-4">
 13 
         <div class="profil d-flex align-items-center gap-4">
14 
           <div class="position-relative">
 14 
           <div class="position-relative">
15 
-            <iconify-icon icon="mi:notification" height="24"></iconify-icon>
15 
+            <Icon icon="mi:notification" height="24"></Icon>
16 
             <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
 16 
             <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
17 
               99+
 17 
               99+
18 
               <span class="visually-hidden">unread messages</span>
 18 
               <span class="visually-hidden">unread messages</span>
32 
 </template>
 32 
 </template>
33
33
34 
 <script>
 34 
 <script>
35 
+import { Icon } from '@iconify/vue';
36 
+
35 
 export default {
 37 
 export default {
36 
-  name: 'NavBar'
38 
+  name: 'NavBar',
39 
+  components: {
40 
+    Icon
41 
+  }
37 
 }
 42 
 }
38 
 </script>
 43 
 </script>
39
44

+ 18
- 12
src/components/SideBar.vue View File

2 
   <div class="left-menu z-3 vh-100 bg-white d-flex flex-column justify-content-between">
 2 
   <div class="left-menu z-3 vh-100 bg-white d-flex flex-column justify-content-between">
3 
     <div>
 3 
     <div>
4 
       <img src="@/assets/img/brand.png" class="logo" alt="cafe">
 4 
       <img src="@/assets/img/brand.png" class="logo" alt="cafe">
5 
-      <div class="toggle-nav position-absolute d-flex justify-content-center align-items-center">
6 
-        <iconify-icon icon="icon-park-outline:double-left" width="24" class="text-white"></iconify-icon>
5 
+      <div class="toggle-nav position-absolute d-flex justify-content-center align-items-center"
6 
+        @click="$emit('collapse')">
7 
+        <Icon icon="icon-park-outline:double-left" width="24" class="text-white" />
7 
       </div>
 8 
       </div>
8 
       <div class="list-group rounded-0 mt-3">
 9 
       <div class="list-group rounded-0 mt-3">
9 
         <RouterLink to="/dashboard" class="list-group-item d-flex align-items-center gap-2">
 10 
         <RouterLink to="/dashboard" class="list-group-item d-flex align-items-center gap-2">
10 
-          <iconify-icon icon="radix-icons:dashboard" width="20"></iconify-icon>
11 
+          <Icon icon="radix-icons:dashboard" width="20" />
11 
           <span>Dashboard</span>
 12 
           <span>Dashboard</span>
12 
         </RouterLink>
 13 
         </RouterLink>
13 
         <RouterLink to="/" class="list-group-item d-flex align-items-center gap-2">
 14 
         <RouterLink to="/" class="list-group-item d-flex align-items-center gap-2">
14 
-          <iconify-icon icon="streamline:money-cashier-shop-shopping-pay-payment-cashier-store-cash-register-machine"
15 
-            width="20"></iconify-icon>
16 
-          <span>Order</span>
15 
+          <Icon icon="streamline:money-cashier-shop-shopping-pay-payment-cashier-store-cash-register-machine"
16 
+            width="20" />
17 
+          <span>Cashier</span>
17 
         </RouterLink>
 18 
         </RouterLink>
18 
         <RouterLink to="/menu" class="list-group-item d-flex align-items-center gap-2">
 19 
         <RouterLink to="/menu" class="list-group-item d-flex align-items-center gap-2">
19 
-          <iconify-icon icon="tabler:coffee" width="22"></iconify-icon>
20 
+          <Icon icon="tabler:coffee" width="22" />
20 
           <span>Menu</span>
 21 
           <span>Menu</span>
21 
         </RouterLink>
 22 
         </RouterLink>
22 
         <RouterLink to="/reports" class="list-group-item d-flex align-items-center gap-2">
 23 
         <RouterLink to="/reports" class="list-group-item d-flex align-items-center gap-2">
23 
-          <iconify-icon icon="mdi:report-line" width="20"></iconify-icon>
24 
+          <Icon icon="mdi:report-line" width="20" />
24 
           <span>Reports</span>
 25 
           <span>Reports</span>
25 
         </RouterLink>
 26 
         </RouterLink>
26 
         <RouterLink to="/customer" class="list-group-item d-flex align-items-center gap-2">
 27 
         <RouterLink to="/customer" class="list-group-item d-flex align-items-center gap-2">
27 
-          <iconify-icon icon="uil:user" width="20"></iconify-icon>
28 
+          <Icon icon="uil:user" width="20" />
28 
           <span>Customers</span>
 29 
           <span>Customers</span>
29 
         </RouterLink>
 30 
         </RouterLink>
30 
       </div>
 31 
       </div>
31 
     </div>
 32 
     </div>
32 
     <div class="logout d-flex align-items-center gap-1">
 33 
     <div class="logout d-flex align-items-center gap-1">
33 
-      <iconify-icon icon="uil:signout" rotate="180deg" width="20"></iconify-icon>
34 
+      <Icon icon="uil:signout" rotate="180deg" width="20" />
34 
       <span>Sign Out</span>
 35 
       <span>Sign Out</span>
35 
     </div>
 36 
     </div>
36 
   </div>
 37 
   </div>
37 
 </template>
 38 
 </template>
38
39
39 
 <script>
 40 
 <script>
41 
+import { Icon } from '@iconify/vue';
42 
+
40 
 export default {
 43 
 export default {
41 
-  name: 'SideBar'
44 
+  name: 'SideBar',
45 
+  components: {
46 
+    Icon
47 
+  }
42 
 }
 48 
 }
43 
 </script>
 49 
 </script>
44
50
45 
-<style lang="scss" scoped>
51 
+<style lang="scss">
46 
 .left-menu {
 52 
 .left-menu {
47 
   min-width: 200px;
 53 
   min-width: 200px;
48 
   box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.25);
 54 
   box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.25);

Write Preview
Loading…
Cancel
Save