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

add nav, categories, menu

bregsiaju 1 year ago
parent
da621003d8
commit
62d0d57c3a
28 changed files with 12778 additions and 98 deletions
Unified View Show Diff Stats
  1. 16
    11
      index.html
  2. 253
    0
      package-lock.json
  3. 4
    0
      package.json
  4. BIN
      public/img/americano.jpg
  5. BIN
      public/img/cappucino.jpg
  6. BIN
      public/img/chailatte.jpg
  7. BIN
      public/img/choco-ice-cream.jpg
  8. BIN
      public/img/choco-mocha.jpeg
  9. BIN
      public/img/croissant.jpg
  10. BIN
      public/img/french-fries.jpg
  11. BIN
      public/img/green-tea.jpg
  12. BIN
      public/img/iced-choco.jpg
  13. BIN
      public/img/latte.jpg
  14. BIN
      public/img/vanilla-ice-cream.jpg
  15. BIN
      public/img/waffle.jpg
  16. 98
    0
      public/menu.json
  17. 11
    63
      src/App.vue
  18. BIN
      src/assets/img/brand.png
  19. BIN
      src/assets/img/pp.jpg
  20. 12030
    21
      src/assets/main.css
  21. 1
    0
      src/assets/main.css.map
  22. 20
    0
      src/assets/main.scss
  23. 43
    0
      src/components/CardMenu.vue
  24. 34
    0
      src/components/MenuContainer.vue
  25. 63
    0
      src/components/NavBar.vue
  26. 89
    0
      src/components/SideBar.vue
  27. 20
    0
      src/router/index.js
  28. 96
    3
      src/views/HomeView.vue

+ 16
- 11
index.html View File

1 
 <!DOCTYPE html>
 1 
 <!DOCTYPE html>
2 
 <html lang="en">
 2 
 <html lang="en">
3 
-  <head>
4 
-    <meta charset="UTF-8">
5 
-    <link rel="icon" href="/favicon.ico">
6 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 
-    <title>Vite App</title>
8 
-  </head>
9 
-  <body>
10 
-    <div id="app"></div>
11 
-    <script type="module" src="/src/main.js"></script>
12 
-  </body>
13 
-</html>
3 
+
4 
+<head>
5 
+  <meta charset="UTF-8">
6 
+  <link rel="icon" href="/favicon.ico">
7 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 
+  <title>Vite App</title>
9 
+</head>
10 
+
11 
+<body>
12 
+  <div id="app"></div>
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>
17 
+
18 
+</html>

+ 253
- 0
package-lock.json View File

8 
       "name": "post-vue",
 8 
       "name": "post-vue",
9 
       "version": "0.0.0",
 9 
       "version": "0.0.0",
10 
       "dependencies": {
 10 
       "dependencies": {
11 
+        "@popperjs/core": "^2.11.8",
12 
+        "bootstrap": "^5.3.1",
13 
+        "jquery": "^3.7.1",
11 
         "vue": "^3.3.4",
 14 
         "vue": "^3.3.4",
12 
         "vue-router": "^4.2.4"
 15 
         "vue-router": "^4.2.4"
13 
       },
 16 
       },
18 
         "eslint": "^8.46.0",
 21 
         "eslint": "^8.46.0",
19 
         "eslint-plugin-vue": "^9.16.1",
 22 
         "eslint-plugin-vue": "^9.16.1",
20 
         "prettier": "^3.0.0",
 23 
         "prettier": "^3.0.0",
24 
+        "sass": "^1.66.1",
21 
         "vite": "^4.4.9"
 25 
         "vite": "^4.4.9"
22 
       }
 26 
       }
23 
     },
 27 
     },
542 
         "url": "https://opencollective.com/unts"
 546 
         "url": "https://opencollective.com/unts"
543 
       }
 547 
       }
544 
     },
 548 
     },
549 
+    "node_modules/@popperjs/core": {
550 
+      "version": "2.11.8",
551 
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
552 
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
553 
+      "funding": {
554 
+        "type": "opencollective",
555 
+        "url": "https://opencollective.com/popperjs"
556 
+      }
557 
+    },
545 
     "node_modules/@rushstack/eslint-patch": {
 558 
     "node_modules/@rushstack/eslint-patch": {
546 
       "version": "1.3.3",
 559 
       "version": "1.3.3",
547 
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz",
 560 
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz",
743 
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
 756 
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
744 
       }
 757 
       }
745 
     },
 758 
     },
759 
+    "node_modules/anymatch": {
760 
+      "version": "3.1.3",
761 
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
762 
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
763 
+      "dev": true,
764 
+      "dependencies": {
765 
+        "normalize-path": "^3.0.0",
766 
+        "picomatch": "^2.0.4"
767 
+      },
768 
+      "engines": {
769 
+        "node": ">= 8"
770 
+      }
771 
+    },
746 
     "node_modules/argparse": {
 772 
     "node_modules/argparse": {
747 
       "version": "2.0.1",
 773 
       "version": "2.0.1",
748 
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
 774 
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
764 
         "node": ">=0.6"
 790 
         "node": ">=0.6"
765 
       }
 791 
       }
766 
     },
 792 
     },
793 
+    "node_modules/binary-extensions": {
794 
+      "version": "2.2.0",
795 
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
796 
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
797 
+      "dev": true,
798 
+      "engines": {
799 
+        "node": ">=8"
800 
+      }
801 
+    },
767 
     "node_modules/boolbase": {
 802 
     "node_modules/boolbase": {
768 
       "version": "1.0.0",
 803 
       "version": "1.0.0",
769 
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
 804 
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
770 
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
 805 
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
771 
       "dev": true
 806 
       "dev": true
772 
     },
 807 
     },
808 
+    "node_modules/bootstrap": {
809 
+      "version": "5.3.1",
810 
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.1.tgz",
811 
+      "integrity": "sha512-jzwza3Yagduci2x0rr9MeFSORjcHpt0lRZukZPZQJT1Dth5qzV7XcgGqYzi39KGAVYR8QEDVoO0ubFKOxzMG+g==",
812 
+      "funding": [
813 
+        {
814 
+          "type": "github",
815 
+          "url": "https://github.com/sponsors/twbs"
816 
+        },
817 
+        {
818 
+          "type": "opencollective",
819 
+          "url": "https://opencollective.com/bootstrap"
820 
+        }
821 
+      ],
822 
+      "peerDependencies": {
823 
+        "@popperjs/core": "^2.11.8"
824 
+      }
825 
+    },
773 
     "node_modules/bplist-parser": {
 826 
     "node_modules/bplist-parser": {
774 
       "version": "0.2.0",
 827 
       "version": "0.2.0",
775 
       "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
 828 
       "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
844 
         "url": "https://github.com/chalk/chalk?sponsor=1"
 897 
         "url": "https://github.com/chalk/chalk?sponsor=1"
845 
       }
 898 
       }
846 
     },
 899 
     },
900 
+    "node_modules/chokidar": {
901 
+      "version": "3.5.3",
902 
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
903 
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
904 
+      "dev": true,
905 
+      "funding": [
906 
+        {
907 
+          "type": "individual",
908 
+          "url": "https://paulmillr.com/funding/"
909 
+        }
910 
+      ],
911 
+      "dependencies": {
912 
+        "anymatch": "~3.1.2",
913 
+        "braces": "~3.0.2",
914 
+        "glob-parent": "~5.1.2",
915 
+        "is-binary-path": "~2.1.0",
916 
+        "is-glob": "~4.0.1",
917 
+        "normalize-path": "~3.0.0",
918 
+        "readdirp": "~3.6.0"
919 
+      },
920 
+      "engines": {
921 
+        "node": ">= 8.10.0"
922 
+      },
923 
+      "optionalDependencies": {
924 
+        "fsevents": "~2.3.2"
925 
+      }
926 
+    },
927 
+    "node_modules/chokidar/node_modules/glob-parent": {
928 
+      "version": "5.1.2",
929 
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
930 
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
931 
+      "dev": true,
932 
+      "dependencies": {
933 
+        "is-glob": "^4.0.1"
934 
+      },
935 
+      "engines": {
936 
+        "node": ">= 6"
937 
+      }
938 
+    },
847 
     "node_modules/color-convert": {
 939 
     "node_modules/color-convert": {
848 
       "version": "2.0.1",
 940 
       "version": "2.0.1",
849 
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 941 
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
1493 
         "node": ">= 4"
 1585 
         "node": ">= 4"
1494 
       }
 1586 
       }
1495 
     },
 1587 
     },
1588 
+    "node_modules/immutable": {
1589 
+      "version": "4.3.4",
1590 
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
1591 
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
1592 
+      "dev": true
1593 
+    },
1496 
     "node_modules/import-fresh": {
 1594 
     "node_modules/import-fresh": {
1497 
       "version": "3.3.0",
 1595 
       "version": "3.3.0",
1498 
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
 1596 
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
1534 
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
 1632 
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
1535 
       "dev": true
 1633 
       "dev": true
1536 
     },
 1634 
     },
1635 
+    "node_modules/is-binary-path": {
1636 
+      "version": "2.1.0",
1637 
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
1638 
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
1639 
+      "dev": true,
1640 
+      "dependencies": {
1641 
+        "binary-extensions": "^2.0.0"
1642 
+      },
1643 
+      "engines": {
1644 
+        "node": ">=8"
1645 
+      }
1646 
+    },
1537 
     "node_modules/is-docker": {
 1647 
     "node_modules/is-docker": {
1538 
       "version": "3.0.0",
 1648 
       "version": "3.0.0",
1539 
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
 1649 
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
1651 
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
 1761 
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
1652 
       "dev": true
 1762 
       "dev": true
1653 
     },
 1763 
     },
1764 
+    "node_modules/jquery": {
1765 
+      "version": "3.7.1",
1766 
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
1767 
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
1768 
+    },
1654 
     "node_modules/js-yaml": {
 1769 
     "node_modules/js-yaml": {
1655 
       "version": "4.1.0",
 1770 
       "version": "4.1.0",
1656 
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
 1771 
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
1834 
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
 1949 
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
1835 
       "dev": true
 1950 
       "dev": true
1836 
     },
 1951 
     },
1952 
+    "node_modules/normalize-path": {
1953 
+      "version": "3.0.0",
1954 
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
1955 
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
1956 
+      "dev": true,
1957 
+      "engines": {
1958 
+        "node": ">=0.10.0"
1959 
+      }
1960 
+    },
1837 
     "node_modules/npm-run-path": {
 1961 
     "node_modules/npm-run-path": {
1838 
       "version": "5.1.0",
 1962 
       "version": "5.1.0",
1839 
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
 1963 
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
2123 
         }
 2247 
         }
2124 
       ]
 2248 
       ]
2125 
     },
 2249 
     },
2250 
+    "node_modules/readdirp": {
2251 
+      "version": "3.6.0",
2252 
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
2253 
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
2254 
+      "dev": true,
2255 
+      "dependencies": {
2256 
+        "picomatch": "^2.2.1"
2257 
+      },
2258 
+      "engines": {
2259 
+        "node": ">=8.10.0"
2260 
+      }
2261 
+    },
2126 
     "node_modules/resolve-from": {
 2262 
     "node_modules/resolve-from": {
2127 
       "version": "4.0.0",
 2263 
       "version": "4.0.0",
2128 
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
 2264 
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
2300 
         "queue-microtask": "^1.2.2"
 2436 
         "queue-microtask": "^1.2.2"
2301 
       }
 2437 
       }
2302 
     },
 2438 
     },
2439 
+    "node_modules/sass": {
2440 
+      "version": "1.66.1",
2441 
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
2442 
+      "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
2443 
+      "dev": true,
2444 
+      "dependencies": {
2445 
+        "chokidar": ">=3.0.0 <4.0.0",
2446 
+        "immutable": "^4.0.0",
2447 
+        "source-map-js": ">=0.6.2 <2.0.0"
2448 
+      },
2449 
+      "bin": {
2450 
+        "sass": "sass.js"
2451 
+      },
2452 
+      "engines": {
2453 
+        "node": ">=14.0.0"
2454 
+      }
2455 
+    },
2303 
     "node_modules/semver": {
 2456 
     "node_modules/semver": {
2304 
       "version": "7.5.4",
 2457 
       "version": "7.5.4",
2305 
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
 2458 
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
2924 
         "tslib": "^2.6.0"
 3077 
         "tslib": "^2.6.0"
2925 
       }
 3078 
       }
2926 
     },
 3079 
     },
3080 
+    "@popperjs/core": {
3081 
+      "version": "2.11.8",
3082 
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
3083 
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
3084 
+    },
2927 
     "@rushstack/eslint-patch": {
 3085 
     "@rushstack/eslint-patch": {
2928 
       "version": "1.3.3",
 3086 
       "version": "1.3.3",
2929 
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz",
 3087 
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz",
3091 
         "color-convert": "^2.0.1"
 3249 
         "color-convert": "^2.0.1"
3092 
       }
 3250 
       }
3093 
     },
 3251 
     },
3252 
+    "anymatch": {
3253 
+      "version": "3.1.3",
3254 
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
3255 
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
3256 
+      "dev": true,
3257 
+      "requires": {
3258 
+        "normalize-path": "^3.0.0",
3259 
+        "picomatch": "^2.0.4"
3260 
+      }
3261 
+    },
3094 
     "argparse": {
 3262 
     "argparse": {
3095 
       "version": "2.0.1",
 3263 
       "version": "2.0.1",
3096 
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
 3264 
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
3109 
       "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
 3277 
       "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
3110 
       "dev": true
 3278 
       "dev": true
3111 
     },
 3279 
     },
3280 
+    "binary-extensions": {
3281 
+      "version": "2.2.0",
3282 
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
3283 
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
3284 
+      "dev": true
3285 
+    },
3112 
     "boolbase": {
 3286 
     "boolbase": {
3113 
       "version": "1.0.0",
 3287 
       "version": "1.0.0",
3114 
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
 3288 
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
3115 
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
 3289 
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
3116 
       "dev": true
 3290 
       "dev": true
3117 
     },
 3291 
     },
3292 
+    "bootstrap": {
3293 
+      "version": "5.3.1",
3294 
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.1.tgz",
3295 
+      "integrity": "sha512-jzwza3Yagduci2x0rr9MeFSORjcHpt0lRZukZPZQJT1Dth5qzV7XcgGqYzi39KGAVYR8QEDVoO0ubFKOxzMG+g==",
3296 
+      "requires": {}
3297 
+    },
3118 
     "bplist-parser": {
 3298 
     "bplist-parser": {
3119 
       "version": "0.2.0",
 3299 
       "version": "0.2.0",
3120 
       "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
 3300 
       "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
3168 
         "supports-color": "^7.1.0"
 3348 
         "supports-color": "^7.1.0"
3169 
       }
 3349 
       }
3170 
     },
 3350 
     },
3351 
+    "chokidar": {
3352 
+      "version": "3.5.3",
3353 
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
3354 
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
3355 
+      "dev": true,
3356 
+      "requires": {
3357 
+        "anymatch": "~3.1.2",
3358 
+        "braces": "~3.0.2",
3359 
+        "fsevents": "~2.3.2",
3360 
+        "glob-parent": "~5.1.2",
3361 
+        "is-binary-path": "~2.1.0",
3362 
+        "is-glob": "~4.0.1",
3363 
+        "normalize-path": "~3.0.0",
3364 
+        "readdirp": "~3.6.0"
3365 
+      },
3366 
+      "dependencies": {
3367 
+        "glob-parent": {
3368 
+          "version": "5.1.2",
3369 
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
3370 
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
3371 
+          "dev": true,
3372 
+          "requires": {
3373 
+            "is-glob": "^4.0.1"
3374 
+          }
3375 
+        }
3376 
+      }
3377 
+    },
3171 
     "color-convert": {
 3378 
     "color-convert": {
3172 
       "version": "2.0.1",
 3379 
       "version": "2.0.1",
3173 
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 3380 
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
3632 
       "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
 3839 
       "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
3633 
       "dev": true
 3840 
       "dev": true
3634 
     },
 3841 
     },
3842 
+    "immutable": {
3843 
+      "version": "4.3.4",
3844 
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
3845 
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
3846 
+      "dev": true
3847 
+    },
3635 
     "import-fresh": {
 3848 
     "import-fresh": {
3636 
       "version": "3.3.0",
 3849 
       "version": "3.3.0",
3637 
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
 3850 
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
3664 
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
 3877 
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
3665 
       "dev": true
 3878 
       "dev": true
3666 
     },
 3879 
     },
3880 
+    "is-binary-path": {
3881 
+      "version": "2.1.0",
3882 
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
3883 
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
3884 
+      "dev": true,
3885 
+      "requires": {
3886 
+        "binary-extensions": "^2.0.0"
3887 
+      }
3888 
+    },
3667 
     "is-docker": {
 3889 
     "is-docker": {
3668 
       "version": "3.0.0",
 3890 
       "version": "3.0.0",
3669 
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
 3891 
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
3735 
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
 3957 
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
3736 
       "dev": true
 3958 
       "dev": true
3737 
     },
 3959 
     },
3960 
+    "jquery": {
3961 
+      "version": "3.7.1",
3962 
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
3963 
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
3964 
+    },
3738 
     "js-yaml": {
 3965 
     "js-yaml": {
3739 
       "version": "4.1.0",
 3966 
       "version": "4.1.0",
3740 
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
 3967 
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
3873 
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
 4100 
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
3874 
       "dev": true
 4101 
       "dev": true
3875 
     },
 4102 
     },
4103 
+    "normalize-path": {
4104 
+      "version": "3.0.0",
4105 
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
4106 
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
4107 
+      "dev": true
4108 
+    },
3876 
     "npm-run-path": {
 4109 
     "npm-run-path": {
3877 
       "version": "5.1.0",
 4110 
       "version": "5.1.0",
3878 
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
 4111 
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
4052 
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
 4285 
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
4053 
       "dev": true
 4286 
       "dev": true
4054 
     },
 4287 
     },
4288 
+    "readdirp": {
4289 
+      "version": "3.6.0",
4290 
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
4291 
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
4292 
+      "dev": true,
4293 
+      "requires": {
4294 
+        "picomatch": "^2.2.1"
4295 
+      }
4296 
+    },
4055 
     "resolve-from": {
 4297 
     "resolve-from": {
4056 
       "version": "4.0.0",
 4298 
       "version": "4.0.0",
4057 
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
 4299 
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
4161 
         "queue-microtask": "^1.2.2"
 4403 
         "queue-microtask": "^1.2.2"
4162 
       }
 4404 
       }
4163 
     },
 4405 
     },
4406 
+    "sass": {
4407 
+      "version": "1.66.1",
4408 
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
4409 
+      "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
4410 
+      "dev": true,
4411 
+      "requires": {
4412 
+        "chokidar": ">=3.0.0 <4.0.0",
4413 
+        "immutable": "^4.0.0",
4414 
+        "source-map-js": ">=0.6.2 <2.0.0"
4415 
+      }
4416 
+    },
4164 
     "semver": {
 4417 
     "semver": {
4165 
       "version": "7.5.4",
 4418 
       "version": "7.5.4",
4166 
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
 4419 
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",

+ 4
- 0
package.json View File

10 
     "format": "prettier --write src/"
 10 
     "format": "prettier --write src/"
11 
   },
 11 
   },
12 
   "dependencies": {
 12 
   "dependencies": {
13 
+    "@popperjs/core": "^2.11.8",
14 
+    "bootstrap": "^5.3.1",
15 
+    "jquery": "^3.7.1",
13 
     "vue": "^3.3.4",
 16 
     "vue": "^3.3.4",
14 
     "vue-router": "^4.2.4"
 17 
     "vue-router": "^4.2.4"
15 
   },
 18 
   },
20 
     "eslint": "^8.46.0",
 23 
     "eslint": "^8.46.0",
21 
     "eslint-plugin-vue": "^9.16.1",
 24 
     "eslint-plugin-vue": "^9.16.1",
22 
     "prettier": "^3.0.0",
 25 
     "prettier": "^3.0.0",
26 
+    "sass": "^1.66.1",
23 
     "vite": "^4.4.9"
 27 
     "vite": "^4.4.9"
24 
   }
 28 
   }
25 
 }
 29 
 }

BIN
public/img/americano.jpg View File


BIN
public/img/cappucino.jpg View File


BIN
public/img/chailatte.jpg View File


BIN
public/img/choco-ice-cream.jpg View File


BIN
public/img/choco-mocha.jpeg View File


BIN
public/img/croissant.jpg View File


BIN
public/img/french-fries.jpg View File


BIN
public/img/green-tea.jpg View File


BIN
public/img/iced-choco.jpg View File


BIN
public/img/latte.jpg View File


BIN
public/img/vanilla-ice-cream.jpg View File


BIN
public/img/waffle.jpg View File


+ 98
- 0
public/menu.json View File

1 
+[
2 
+  {
3 
+    "id": 1,
4 
+    "image": "americano.jpg",
5 
+    "category": "coffee",
6 
+    "name": "Americano",
7 
+    "description": "A classic black coffee made by diluting espresso. It has a strong and bold flavor.",
8 
+    "price": 25000
9 
+  },
10 
+  {
11 
+    "id": 2,
12 
+    "image": "latte.jpg",
13 
+    "category": "coffee",
14 
+    "name": "Latte",
15 
+    "description": "A smooth and creamy espresso-based coffee with steamed milk.",
16 
+    "price": 28000
17 
+  },
18 
+  {
19 
+    "id": 3,
20 
+    "image": "cappucino.jpg",
21 
+    "category": "coffee",
22 
+    "name": "Cappuccino",
23 
+    "description": "A classic coffee drink made with espresso, steamed milk, and frothed milk foam.",
24 
+    "price": 30000
25 
+  },
26 
+  {
27 
+    "id": 4,
28 
+    "image": "green-tea.jpg",
29 
+    "category": "tea",
30 
+    "name": "Green Tea",
31 
+    "description": "A soothing and healthy green tea made from high-quality tea leaves.",
32 
+    "price": 20000
33 
+  },
34 
+  {
35 
+    "id": 5,
36 
+    "image": "chailatte.jpg",
37 
+    "category": "tea",
38 
+    "name": "Chai Latte",
39 
+    "description": "A spiced tea latte made with black tea, spices, and steamed milk.",
40 
+    "price": 26000
41 
+  },
42 
+  {
43 
+    "id": 6,
44 
+    "image": "iced-choco.jpg",
45 
+    "category": "chocolate",
46 
+    "name": "Choco Vanilla",
47 
+    "description": "Rich chocolate and creamy vanilla harmonize in a delightful fusion.",
48 
+    "price": 22000
49 
+  },
50 
+  {
51 
+    "id": 7,
52 
+    "image": "choco-mocha.jpeg",
53 
+    "category": "chocolate",
54 
+    "name": "Chocolate Mocha",
55 
+    "description": "An indulgent blend of espresso, steamed milk, and chocolate.",
56 
+    "price": 28000
57 
+  },
58 
+  {
59 
+    "id": 8,
60 
+    "image": "french-fries.jpg",
61 
+    "category": "snacks",
62 
+    "name": "French Fries",
63 
+    "description": "Crispy potato chips seasoned with a hint of salt.",
64 
+    "price": 15000
65 
+  },
66 
+  {
67 
+    "id": 9,
68 
+    "image": "croissant.jpg",
69 
+    "category": "snacks",
70 
+    "name": "Croissant",
71 
+    "description": "Buttery, flaky, and simply irresistible.",
72 
+    "price": 18000
73 
+  },
74 
+  {
75 
+    "id": 10,
76 
+    "image": "vanilla-ice-cream.jpg",
77 
+    "category": "ice cream",
78 
+    "name": "Vanilla Ice Cream",
79 
+    "description": "Classic vanilla ice cream with a creamy texture.",
80 
+    "price": 12000
81 
+  },
82 
+  {
83 
+    "id": 11,
84 
+    "image": "choco-ice-cream.jpg",
85 
+    "category": "ice cream",
86 
+    "name": "Chocolate Chip Ice Cream",
87 
+    "description": "Rich chocolate ice cream with chunks of chocolate chips.",
88 
+    "price": 13000
89 
+  },
90 
+  {
91 
+    "id": 12,
92 
+    "image": "waffle.jpg",
93 
+    "category": "snacks",
94 
+    "name": "Crispy Maple Waffle",
95 
+    "description": "A traditional waffle served with maple syrup and butter.",
96 
+    "price": 18000
97 
+  }
98 
+]

+ 11
- 63
src/App.vue View File

1 
 <script setup>
 1 
 <script setup>
2 
 import { RouterView } from 'vue-router'
 2 
 import { RouterView } from 'vue-router'
3 
+import Navbar from './components/Navbar.vue'
4 
+import SideBar from './components/SideBar.vue'
3 
 </script>
 5 
 </script>
4
6
5 
 <template>
 7 
 <template>
6 
-  <RouterView />
8 
+  <Navbar />
9 
+  <SideBar />
10 
+  <main>
11 
+    <RouterView />
12 
+  </main>
7 
 </template>
 13 
 </template>
8
14
9 
-<style scoped>
10 
-header {
11 
-  line-height: 1.5;
12 
-  max-height: 100vh;
15 
+<style>
16 
+main {
17 
+  padding: 60px 0 0 200px;
13 
 }
 18 
 }
14 
-
15 
-.logo {
16 
-  display: block;
17 
-  margin: 0 auto 2rem;
18 
-}
19 
-
20 
-nav {
21 
-  width: 100%;
22 
-  font-size: 12px;
23 
-  text-align: center;
24 
-  margin-top: 2rem;
25 
-}
26 
-
27 
-nav a.router-link-exact-active {
28 
-  color: var(--color-text);
29 
-}
30 
-
31 
-nav a.router-link-exact-active:hover {
32 
-  background-color: transparent;
33 
-}
34 
-
35 
-nav a {
36 
-  display: inline-block;
37 
-  padding: 0 1rem;
38 
-  border-left: 1px solid var(--color-border);
39 
-}
40 
-
41 
-nav a:first-of-type {
42 
-  border: 0;
43 
-}
44 
-
45 
-@media (min-width: 1024px) {
46 
-  header {
47 
-    display: flex;
48 
-    place-items: center;
49 
-    padding-right: calc(var(--section-gap) / 2);
50 
-  }
51 
-
52 
-  .logo {
53 
-    margin: 0 2rem 0 0;
54 
-  }
55 
-
56 
-  header .wrapper {
57 
-    display: flex;
58 
-    place-items: flex-start;
59 
-    flex-wrap: wrap;
60 
-  }
61 
-
62 
-  nav {
63 
-    text-align: left;
64 
-    margin-left: -1rem;
65 
-    font-size: 1rem;
66 
-
67 
-    padding: 1rem 0;
68 
-    margin-top: 1rem;
69 
-  }
70 
-}
71 
-</style>
19 
+</style>

BIN
src/assets/img/brand.png View File


BIN
src/assets/img/pp.jpg View File


+ 12030
- 21
src/assets/main.css
File diff suppressed because it is too large
View File


+ 1
- 0
src/assets/main.css.map
File diff suppressed because it is too large
View File


+ 20
- 0
src/assets/main.scss View File

1 
+// custom varibles
2 
+$primary: #ae7be8;
3 
+$dark-purple: #8751ab;
4 
+$red: #d93C65;
5 
+$box-shadow: 0 .5rem 1rem rgba($primary, .15);
6 
+$box-shadow-lg: 0 1rem 3rem rgba($primary, .175);
7 
+
8 
+// import functions & variables
9 
+@import "../../node_modules/bootstrap/scss/functions";
10 
+@import "../../node_modules/bootstrap/scss/variables";
11 
+
12 
+$custom-theme-colors: (
13 
+  "dark-purple": $dark-purple,
14 
+  "red": $red
15 
+);
16 
+
17 
+$theme-colors: map-merge($custom-theme-colors, $theme-colors);
18 
+
19 
+// import bootstrap
20 
+@import "../../node_modules/bootstrap/scss/bootstrap.scss";

+ 43
- 0
src/components/CardMenu.vue View File

1 
+<template>
2 
+  <div class="card-menu rounded">
3 
+    <div class="ratio ratio-1x1 rounded overflow-hidden">
4 
+      <img :src="`/img/${data.image}`" :alt="data.name" class="object-fit-cover">
5 
+    </div>
6 
+    <div class="mt-2 mb-1 fw-semibold">{{ data.name }}</div>
7 
+    <div class="menu-desc lh-sm mb-1">{{ data.description }}</div>
8 
+    <p class="fw-medium mb-2"><sup class="text-dark-purple">Rp</sup>{{ rupiah(data.price) }}</p>
9 
+    <button class="btn btn-primary w-100 text-white btn-sm">Add to Cart</button>
10 
+  </div>
11 
+</template>
12 
+
13 
+<script>
14 
+export default {
15 
+  name: 'CardMenu',
16 
+  props: {
17 
+    data: {
18 
+      type: Object,
19 
+      required: true
20 
+    }
21 
+  },
22 
+  methods: {
23 
+    rupiah(number) {
24 
+      return Number(number).toLocaleString('id-ID')
25 
+    }
26 
+  }
27 
+}
28 
+</script>
29 
+
30 
+<style lang="scss" scoped>
31 
+.card-menu {
32 
+  background: #FAFBFE;
33 
+  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25));
34 
+  padding: 12px;
35 
+  height: 100%;
36 
+  display: grid;
37 
+
38 
+  .menu-desc {
39 
+    font-size: 10px;
40 
+    color: #777777;
41 
+  }
42 
+}
43 
+</style>

+ 34
- 0
src/components/MenuContainer.vue View File

1 
+<template>
2 
+  <div class="pb-4">
3 
+    <h5 class="mb-3">Menu</h5>
4 
+    <div class="row g-4 row-cols-lg-3">
5 
+      <div v-for="menu in menus" :key="menu.id" class="col">
6 
+        <CardMenu :data="menu" />
7 
+      </div>
8 
+    </div>
9 
+  </div>
10 
+</template>
11 
+
12 
+<script>
13 
+import CardMenu from './CardMenu.vue'; './CardMenu.vue'
14 
+
15 
+export default {
16 
+  name: 'MenuContainer',
17 
+  components: {
18 
+    CardMenu
19 
+  },
20 
+  data() {
21 
+    return {
22 
+      menus: []
23 
+    }
24 
+  },
25 
+  async mounted() {
26 
+    await fetch('menu.json').then(resp => resp.json()).then(data => {
27 
+      console.log(data)
28 
+      this.menus = data
29 
+    })
30 
+  }
31 
+}
32 
+</script>
33 
+
34 
+<style lang="scss" scoped></style>

+ 63
- 0
src/components/NavBar.vue View File

1 
+<template>
2 
+  <nav class="navbar bg-body-tertiary shadow-lg position-fixed min-vw-100 z-1">
3 
+    <div class="container-fluid justify-content-start flex-nowrap">
4 
+      <div class="navbar-brand fw-bold">
5 
+        <img src="@/assets/img/brand.png" class="logo" alt="cafe">
6 
+      </div>
7 
+      <div class="header-right container d-flex justify-content-between align-items-center flex-fill">
8 
+        <!-- search box -->
9 
+        <form class="d-flex position-relative" role="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>
12 
+        </form>
13 
+        <div class="profil d-flex align-items-center gap-4">
14 
+          <div class="position-relative">
15 
+            <iconify-icon icon="mi:notification" height="24"></iconify-icon>
16 
+            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
17 
+              99+
18 
+              <span class="visually-hidden">unread messages</span>
19 
+            </span>
20 
+          </div>
21 
+          <div class="d-flex align-items-center gap-2">
22 
+            <img src="@/assets/img/pp.jpg" class="rounded-circle" alt="">
23 
+            <div>
24 
+              <h6 class="mb-0">Ciayou</h6>
25 
+              <span>Kasir</span>
26 
+            </div>
27 
+          </div>
28 
+        </div>
29 
+      </div>
30 
+    </div>
31 
+  </nav>
32 
+</template>
33 
+
34 
+<script>
35 
+export default {
36 
+  name: 'NavBar'
37 
+}
38 
+</script>
39 
+
40 
+<style>
41 
+.logo {
42 
+  width: 61px;
43 
+}
44 
+
45 
+.header-right {
46 
+  padding-left: 140px;
47 
+}
48 
+
49 
+.profil img {
50 
+  width: 45px;
51 
+}
52 
+
53 
+.icon-search {
54 
+  position: absolute;
55 
+  left: 0.375rem;
56 
+  top: 50%;
57 
+  transform: translateY(-50%);
58 
+}
59 
+
60 
+.form-control[type=search] {
61 
+  padding-left: 2rem;
62 
+}
63 
+</style>

+ 89
- 0
src/components/SideBar.vue View File

1 
+<template>
2 
+  <div class="left-menu z-3 vh-100 bg-white d-flex flex-column justify-content-between">
3 
+    <div>
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>
7 
+      </div>
8 
+      <div class="list-group rounded-0 mt-3">
9 
+        <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 
+          <span>Dashboard</span>
12 
+        </RouterLink>
13 
+        <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>
17 
+        </RouterLink>
18 
+        <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 
+          <span>Menu</span>
21 
+        </RouterLink>
22 
+        <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 
+          <span>Reports</span>
25 
+        </RouterLink>
26 
+        <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 
+          <span>Customers</span>
29 
+        </RouterLink>
30 
+      </div>
31 
+    </div>
32 
+    <div class="logout d-flex align-items-center gap-1">
33 
+      <iconify-icon icon="uil:signout" rotate="180deg" width="20"></iconify-icon>
34 
+      <span>Sign Out</span>
35 
+    </div>
36 
+  </div>
37 
+</template>
38 
+
39 
+<script>
40 
+export default {
41 
+  name: 'SideBar'
42 
+}
43 
+</script>
44 
+
45 
+<style lang="scss" scoped>
46 
+.left-menu {
47 
+  min-width: 200px;
48 
+  box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.25);
49 
+  position: fixed;
50 
+}
51 
+
52 
+.left-menu .logo {
53 
+  margin: 14px 24px;
54 
+}
55 
+
56 
+.toggle-nav {
57 
+  height: 32px;
58 
+  width: 32px;
59 
+  border-radius: 50%;
60 
+  background-color: #ae7be8;
61 
+  right: -16px;
62 
+  top: 16px;
63 
+  cursor: pointer;
64 
+}
65 
+
66 
+.list-group-item {
67 
+  border: none;
68 
+  padding: 14px 36px;
69 
+
70 
+  &:hover {
71 
+    color: #8751ab;
72 
+  }
73 
+}
74 
+
75 
+a.router-link-exact-active {
76 
+  border-right: 4px solid #AE7BE8;
77 
+  background: linear-gradient(270deg, #B98AEE 0%, rgba(255, 255, 255, 0) 70%);
78 
+  color: #8751ab;
79 
+  font-weight: 600;
80 
+}
81 
+
82 
+.logout {
83 
+  padding: 14px 12px;
84 
+  margin: 10px 24px;
85 
+  border-top: 1px dashed #8751ab;
86 
+  color: #D93C65;
87 
+  cursor: pointer;
88 
+}
89 
+</style>

+ 20
- 0
src/router/index.js View File

8 
       path: '/',
 8 
       path: '/',
9 
       name: 'home',
 9 
       name: 'home',
10 
       component: HomeView
 10 
       component: HomeView
11 
+    },
12 
+    {
13 
+      path: '/dashboard',
14 
+      name: 'dashboard',
15 
+      component: HomeView
16 
+    },
17 
+    {
18 
+      path: '/menu',
19 
+      name: 'menu',
20 
+      component: HomeView
21 
+    },
22 
+    {
23 
+      path: '/reports',
24 
+      name: 'reports',
25 
+      component: HomeView
26 
+    },
27 
+    {
28 
+      path: '/customer',
29 
+      name: 'customer',
30 
+      component: HomeView
11 
     }
 31 
     }
12 
   ]
 32 
   ]
13 
 })
 33 
 })

+ 96
- 3
src/views/HomeView.vue View File

1 
 <template>
 1 
 <template>
2 
-  <main>
3 
-    <h1>Hai</h1>
4 
-  </main>
2 
+  <div class="main-content">
3 
+    <div class="row container-fluid">
4 
+      <div class="col-8 menu">
5 
+        <div class="category">
6 
+          <h5 class="mb-3">Categories</h5>
7 
+          <div class="d-flex gap-3 category-list">
8 
+            <button v-for="item in categories" :key="item.id" class="btn btn-outline-dark"
9 
+              :class="{ active: selectedCategories === item.id }" v-html="item.name"
10 
+              @click="selectedCategories = item.id"></button>
11 
+          </div>
12 
+        </div>
13 
+        <MenuContainer />
14 
+      </div>
15 
+    </div>
16 
+  </div>
5 
 </template>
 17 
 </template>
18 
+
19 
+<script>
20 
+import MenuContainer from '../components/MenuContainer.vue';
21 
+
22 
+export default {
23 
+  components: {
24 
+    MenuContainer
25 
+  },
26 
+  data() {
27 
+    return {
28 
+      categories: [
29 
+        {
30 
+          id: 1,
31 
+          name: '&#129368; All Menu'
32 
+        },
33 
+        {
34 
+          id: 2,
35 
+          name: '&#9749; Coffee'
36 
+        },
37 
+        {
38 
+          id: 3,
39 
+          name: '&#127851; Chocolate'
40 
+        },
41 
+        {
42 
+          id: 4,
43 
+          name: '&#127839; Snacks'
44 
+        },
45 
+        {
46 
+          id: 5,
47 
+          name: '&#127848; Ice Cream'
48 
+        },
49 
+      ],
50 
+      selectedCategories: 1
51 
+    }
52 
+  }
53 
+}
54 
+</script>
55 
+
56 
+<style lang="scss" scoped>
57 
+.menu {
58 
+  padding: 28px 8px 0 32px;
59 
+  height: calc(100vh - 60px);
60 
+  overflow-y: auto;
61 
+  overflow-x: hidden;
62 
+
63 
+  &::-webkit-scrollbar {
64 
+    width: 0.5px;
65 
+  }
66 
+
67 
+  &::-webkit-scrollbar-thumb {
68 
+    background-color: transparent;
69 
+  }
70 
+}
71 
+
72 
+.category {
73 
+  margin-bottom: 30px;
74 
+
75 
+  .category-list {
76 
+    .btn {
77 
+      border-radius: 50px;
78 
+      padding: 8px 16px;
79 
+      border-color: #5C5470;
80 
+      color: #5C5470;
81 
+      font-size: 14px;
82 
+
83 
+      &:hover {
84 
+        background: linear-gradient(232deg, rgba(185, 138, 238, 0.80) 0%, rgba(251, 190, 222, 0.80) 100%);
85 
+        color: #000;
86 
+      }
87 
+
88 
+      &.active {
89 
+        background: linear-gradient(232deg, rgba(185, 138, 238, 0.80) 0%, rgba(251, 190, 222, 0.80) 100%);
90 
+        color: #000;
91 
+        box-shadow: 0px 2px 4px 0px rgba(174, 123, 232, 0.29);
92 
+        font-weight: 600;
93 
+        border: none;
94 
+      }
95 
+    }
96 
+  }
97 
+}
98 
+</style>

Write Preview
Loading…
Cancel
Save