├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── 1.jpg
    ├── 2.jpg
    ├── 3.jpg
    ├── 4.jpg
    ├── b.png
    ├── c.png
    ├── f1.png
    ├── f2.png
    ├── f3.png
    ├── f4.png
    ├── f5.png
    ├── favicon.ico
    ├── index.html
    ├── k.png
    ├── o.png
    ├── p1.png
    ├── p2.png
    ├── p3.png
    ├── p4.png
    ├── p4.webp
    └── p5.png
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.png
    │   └── logo.svg
    ├── components
    │   ├── Comment.vue
    │   ├── Dessert.vue
    │   ├── Food.vue
    │   ├── HelloWorld.vue
    │   ├── Menu.vue
    │   ├── Navbar.vue
    │   ├── RightSideBar.vue
    │   └── SideBar.vue
    ├── main.js
    ├── plugins
    │   └── vuetify.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    └── views
    │   ├── About.vue
    │   ├── Home.vue
    │   └── HomeView.vue
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # dessert
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dessert",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^2.6.11",
13 |     "vue-router": "^3.2.0",
14 |     "vuetify": "^2.6.0",
15 |     "vuex": "^3.4.0"
16 |   },
17 |   "devDependencies": {
18 |     "@fortawesome/fontawesome-free": "^6.1.2",
19 |     "@vue/cli-plugin-babel": "~4.5.7",
20 |     "@vue/cli-plugin-eslint": "~4.5.7",
21 |     "@vue/cli-plugin-router": "~4.5.7",
22 |     "@vue/cli-plugin-vuex": "~4.5.7",
23 |     "@vue/cli-service": "~4.5.7",
24 |     "babel-eslint": "^10.1.0",
25 |     "eslint": "^6.7.2",
26 |     "eslint-plugin-vue": "^6.2.2",
27 |     "material-design-icons-iconfont": "^6.7.0",
28 |     "sass": "~1.32.0",
29 |     "sass-loader": "^10.0.0",
30 |     "vue-cli-plugin-vuetify": "~2.5.1",
31 |     "vue-template-compiler": "^2.6.11",
32 |     "vuetify-loader": "^1.7.0"
33 |   },
34 |   "eslintConfig": {
35 |     "root": true,
36 |     "env": {
37 |       "node": true
38 |     },
39 |     "extends": [
40 |       "plugin:vue/essential",
41 |       "eslint:recommended"
42 |     ],
43 |     "parserOptions": {
44 |       "parser": "babel-eslint"
45 |     },
46 |     "rules": {}
47 |   },
48 |   "browserslist": [
49 |     "> 1%",
50 |     "last 2 versions",
51 |     "not dead"
52 |   ]
53 | }
54 | 


--------------------------------------------------------------------------------
/public/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/1.jpg


--------------------------------------------------------------------------------
/public/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/2.jpg


--------------------------------------------------------------------------------
/public/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/3.jpg


--------------------------------------------------------------------------------
/public/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/4.jpg


--------------------------------------------------------------------------------
/public/b.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/b.png


--------------------------------------------------------------------------------
/public/c.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/c.png


--------------------------------------------------------------------------------
/public/f1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/f1.png


--------------------------------------------------------------------------------
/public/f2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/f2.png


--------------------------------------------------------------------------------
/public/f3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/f3.png


--------------------------------------------------------------------------------
/public/f4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/f4.png


--------------------------------------------------------------------------------
/public/f5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/f5.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/public/k.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/k.png


--------------------------------------------------------------------------------
/public/o.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/o.png


--------------------------------------------------------------------------------
/public/p1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/p1.png


--------------------------------------------------------------------------------
/public/p2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/p2.png


--------------------------------------------------------------------------------
/public/p3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/p3.png


--------------------------------------------------------------------------------
/public/p4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/p4.png


--------------------------------------------------------------------------------
/public/p4.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/p4.webp


--------------------------------------------------------------------------------
/public/p5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/public/p5.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-main>
 4 |       <router-view/>
 5 |     </v-main>
 6 |   </v-app>
 7 | </template>
 8 | 
 9 | <script>
10 | 
11 | export default {
12 |   name: 'App',
13 | 
14 |   data: () => ({
15 |     //
16 |   }),
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/vuejs-vuetify-pos-dessert-area-curved-sidebar/227b171eb2f6256be053785e7aa9d86f0054c2d3/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/components/Comment.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    <v-row class="mt-n2">
 3 |         <v-col cols="12" sm="1">
 4 |           <v-avatar size="30" class="ml-4" tile>
 5 |             <v-img src="https://cdn.vuetifyjs.com/images/lists/4.jpg"></v-img>
 6 |           </v-avatar>
 7 |         </v-col>
 8 |         <v-col cols="12" sm="11">
 9 |           <v-rating
10 |             v-model="rating"
11 |             background-color="grey "
12 |             color="grey"
13 |             x-small
14 |           ></v-rating>
15 |           <p>
16 |             Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui
17 |             molestias veniam illo tempora officia distinctio ipsa quisquam sint
18 |             alias temporibus. Vel, maxime. Itaque corporis possimus unde vitae
19 |             ipsam blanditiis mollitia!
20 |           </p>
21 |         </v-col>
22 |       </v-row>
23 | </template>
24 | 
25 | <script>
26 | export default {
27 | 
28 | }
29 | </script>
30 | 
31 | <style>
32 | 
33 | </style>


--------------------------------------------------------------------------------
/src/components/Dessert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |       <v-item-group mandatory class="mt-n4">
 3 |         <v-container>
 4 |           <v-row justify="center" class="space">
 5 |             <v-col
 6 |               cols="12"
 7 |               xs="12"
 8 |               sm="4"
 9 |               md="2"
10 |               v-for="(cetegory, i) in categories"
11 |               :key="i"
12 |             >
13 |               <v-item v-slot="{ active, toggle }">
14 |                 <v-card
15 |                   :color="active ? '#FFCB5E' : 'white'"
16 |                   :class="active ? 'borderme' : 'borderout'"
17 |                   class="d-flex align-center rounded-lg mx-2"
18 |                   dark
19 |                   height="120"
20 |                   @click="toggle"
21 |                   flat
22 |                 >
23 |                   <v-row>
24 |                     <v-col cols="12" sm="12">
25 |                       <v-list-item three-line class="text-center">
26 |                         <v-list-item-content>
27 |                           <div align="center" justify="center">
28 |                             <v-img
29 |                               :src="cetegory.img"
30 |                               max-height="80"
31 |                               max-width="80"
32 |                               contain
33 |                             ></v-img>
34 |                           </div>
35 |                         </v-list-item-content>
36 |                       </v-list-item>
37 |                     </v-col>
38 |                   </v-row>
39 |                 </v-card>
40 |               </v-item>
41 |             </v-col>
42 |           </v-row>
43 |         </v-container>
44 |       </v-item-group>
45 | </template>
46 | 
47 | <script>
48 | export default {
49 | data: () => ({
50 |     categories: [
51 |       { img: "f1.png" },
52 |       { img: "f2.png" },
53 |       { img: "f3.png" },
54 |       { img: "f4.png" },
55 |       { img: "f5.png" },
56 |     ],
57 | })
58 | }
59 | </script>
60 | 
61 | <style>
62 | 
63 | </style>


--------------------------------------------------------------------------------
/src/components/Food.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-row>
 3 |         <v-col cols="12" sm="4">
 4 |           <v-card
 5 |             color="#E8EDE2"
 6 |             class="d-flex align-center rounded-lg mx-2"
 7 |             dark
 8 |             height="100"
 9 |             flat
10 |           >
11 |             <v-row>
12 |               <v-col cols="12" sm="2">
13 |                 <v-img src="k.png" max-height="100%" max-width="100%"></v-img>
14 |               </v-col>
15 |               <v-col cols="12" sm="4">
16 |                 <h4 class="black--text">Kiwi fruit</h4>
17 |                 <br />
18 |                 <h6 class="black--text mt-n4">Vitamine A Vitamine C</h6>
19 |               </v-col>
20 |               <v-col cols="12" sm="3">
21 |                 <h4 class="black--text mt-2">Kk 61</h4>
22 |               </v-col>
23 |             </v-row>
24 |           </v-card>
25 |         </v-col>
26 |         <v-col cols="12" sm="4">
27 |           <v-card
28 |             color="#F6ECDD"
29 |             class="d-flex align-center rounded-lg mx-2"
30 |             dark
31 |             height="100"
32 |             flat
33 |           >
34 |             <v-row>
35 |               <v-col cols="12" sm="2">
36 |                 <v-img
37 |                   class="mt-4 ml-1"
38 |                   src="o.png"
39 |                   max-height="120%"
40 |                   max-width="120%"
41 |                 ></v-img>
42 |               </v-col>
43 |               <v-col cols="12" sm="7">
44 |                 <h4 class="black--text">Orange</h4>
45 |                 <br />
46 |                 <h6 class="black--text mt-n4">Vitamine A Vitamine C</h6>
47 |               </v-col>
48 |               <v-col cols="12" sm="3">
49 |                 <h4 class="black--text mt-2">Kk 47</h4>
50 |               </v-col>
51 |             </v-row>
52 |           </v-card>
53 |         </v-col>
54 |         <v-col cols="12" sm="4">
55 |           <v-card
56 |             color="#F4F1E6"
57 |             class="d-flex align-center rounded-lg mx-2"
58 |             dark
59 |             height="100"
60 |             flat
61 |           >
62 |             <v-row>
63 |               <v-col cols="12" sm="2">
64 |                 <v-img
65 |                   class=" "
66 |                   src="c.png"
67 |                   max-height="100%"
68 |                   max-width="100%"
69 |                 ></v-img>
70 |               </v-col>
71 |               <v-col cols="12" sm="4">
72 |                 <h4 class="black--text mt-2">Banane</h4>
73 |                 <br />
74 |                 <h6 class="black--text mt-n4">Vitamine A Vitamine C</h6>
75 |               </v-col>
76 |               <v-col cols="12" sm="4">
77 |                 <h4 class="black--text mt-4 ml-n8">Kk 30</h4>
78 |               </v-col>
79 |             </v-row>
80 |           </v-card>
81 |         </v-col>
82 |       </v-row>
83 |       
84 | </template>
85 | 
86 | <script>
87 | export default {
88 | 
89 | }
90 | </script>
91 | 
92 | <style>
93 | 
94 | </style>


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <v-row class="text-center">
  4 |       <v-col cols="12">
  5 |         <v-img
  6 |           :src="require('../assets/logo.svg')"
  7 |           class="my-3"
  8 |           contain
  9 |           height="200"
 10 |         />
 11 |       </v-col>
 12 | 
 13 |       <v-col class="mb-4">
 14 |         <h1 class="display-2 font-weight-bold mb-3">
 15 |           Welcome to Vuetify
 16 |         </h1>
 17 | 
 18 |         <p class="subheading font-weight-regular">
 19 |           For help and collaboration with other Vuetify developers,
 20 |           <br>please join our online
 21 |           <a
 22 |             href="https://community.vuetifyjs.com"
 23 |             target="_blank"
 24 |           >Discord Community</a>
 25 |         </p>
 26 |       </v-col>
 27 | 
 28 |       <v-col
 29 |         class="mb-5"
 30 |         cols="12"
 31 |       >
 32 |         <h2 class="headline font-weight-bold mb-3">
 33 |           What's next?
 34 |         </h2>
 35 | 
 36 |         <v-row justify="center">
 37 |           <a
 38 |             v-for="(next, i) in whatsNext"
 39 |             :key="i"
 40 |             :href="next.href"
 41 |             class="subheading mx-3"
 42 |             target="_blank"
 43 |           >
 44 |             {{ next.text }}
 45 |           </a>
 46 |         </v-row>
 47 |       </v-col>
 48 | 
 49 |       <v-col
 50 |         class="mb-5"
 51 |         cols="12"
 52 |       >
 53 |         <h2 class="headline font-weight-bold mb-3">
 54 |           Important Links
 55 |         </h2>
 56 | 
 57 |         <v-row justify="center">
 58 |           <a
 59 |             v-for="(link, i) in importantLinks"
 60 |             :key="i"
 61 |             :href="link.href"
 62 |             class="subheading mx-3"
 63 |             target="_blank"
 64 |           >
 65 |             {{ link.text }}
 66 |           </a>
 67 |         </v-row>
 68 |       </v-col>
 69 | 
 70 |       <v-col
 71 |         class="mb-5"
 72 |         cols="12"
 73 |       >
 74 |         <h2 class="headline font-weight-bold mb-3">
 75 |           Ecosystem
 76 |         </h2>
 77 | 
 78 |         <v-row justify="center">
 79 |           <a
 80 |             v-for="(eco, i) in ecosystem"
 81 |             :key="i"
 82 |             :href="eco.href"
 83 |             class="subheading mx-3"
 84 |             target="_blank"
 85 |           >
 86 |             {{ eco.text }}
 87 |           </a>
 88 |         </v-row>
 89 |       </v-col>
 90 |     </v-row>
 91 |   </v-container>
 92 | </template>
 93 | 
 94 | <script>
 95 |   export default {
 96 |     name: 'HelloWorld',
 97 | 
 98 |     data: () => ({
 99 |       ecosystem: [
100 |         {
101 |           text: 'vuetify-loader',
102 |           href: 'https://github.com/vuetifyjs/vuetify-loader',
103 |         },
104 |         {
105 |           text: 'github',
106 |           href: 'https://github.com/vuetifyjs/vuetify',
107 |         },
108 |         {
109 |           text: 'awesome-vuetify',
110 |           href: 'https://github.com/vuetifyjs/awesome-vuetify',
111 |         },
112 |       ],
113 |       importantLinks: [
114 |         {
115 |           text: 'Documentation',
116 |           href: 'https://vuetifyjs.com',
117 |         },
118 |         {
119 |           text: 'Chat',
120 |           href: 'https://community.vuetifyjs.com',
121 |         },
122 |         {
123 |           text: 'Made with Vuetify',
124 |           href: 'https://madewithvuejs.com/vuetify',
125 |         },
126 |         {
127 |           text: 'Twitter',
128 |           href: 'https://twitter.com/vuetifyjs',
129 |         },
130 |         {
131 |           text: 'Articles',
132 |           href: 'https://medium.com/vuetify',
133 |         },
134 |       ],
135 |       whatsNext: [
136 |         {
137 |           text: 'Explore components',
138 |           href: 'https://vuetifyjs.com/components/api-explorer',
139 |         },
140 |         {
141 |           text: 'Select a layout',
142 |           href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
143 |         },
144 |         {
145 |           text: 'Frequently Asked Questions',
146 |           href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
147 |         },
148 |       ],
149 |     }),
150 |   }
151 | </script>
152 | 


--------------------------------------------------------------------------------
/src/components/Menu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    <v-item-group mandatory class="mt-n4">
 3 |         <v-container>
 4 |           <v-row justify="center" class="space">
 5 |             <v-col
 6 |               cols="12"
 7 |               xs="12"
 8 |               sm="4"
 9 |               md="2"
10 |               v-for="(packag, i) in packages"
11 |               :key="i"
12 |             >
13 |               <v-item v-slot="{ active, toggle }">
14 |                 <v-card
15 |                   :color="active ? '#D5F0DB' : 'white'"
16 |                   :class="active ? 'borderme' : 'borderout'"
17 |                   class="d-flex align-center rounded-lg mx-2"
18 |                   dark
19 |                   height="180"
20 |                   @click="toggle"
21 |                   flat
22 |                 >
23 |                   <v-row>
24 |                     <v-col cols="12" sm="12">
25 |                       <v-list-item three-line class="text-center">
26 |                         <v-list-item-content>
27 |                           <div align="center" justify="center">
28 |                             <v-img
29 |                               :src="packag.img"
30 |                               max-height="80"
31 |                               max-width="80"
32 |                               contain
33 |                             ></v-img>
34 |                           </div>
35 |                           <v-list-item-subtitle
36 |                             :class="active ? 'green--text' : 'black--text'"
37 |                             class="caption mt-4"
38 |                             >{{ packag.title }}</v-list-item-subtitle
39 |                           >
40 |                         </v-list-item-content>
41 |                       </v-list-item>
42 |                     </v-col>
43 |                   </v-row>
44 |                 </v-card>
45 |               </v-item>
46 |             </v-col>
47 |           </v-row>
48 |         </v-container>
49 |       </v-item-group>
50 | </template>
51 | 
52 | <script>
53 | export default {
54 | data: () => ({
55 |  packages: [
56 |       { img: "p1.png", title: "New Package" },
57 |       { img: "p2.png", title: "Economic Package" },
58 |       { img: "p3.png", title: "Great Package" },
59 |       { img: "p4.png", title: "Free Package" },
60 |       { img: "p5.png", title: "Kraft" },
61 |     ],
62 | })
63 | }
64 | </script>
65 | 
66 | <style>
67 | 
68 | </style>


--------------------------------------------------------------------------------
/src/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    <v-toolbar flat color="transparent" class="mt-n4">
 3 |         <v-toolbar-title class="ml-4">
 4 |           <strong>Dessert</strong><span class="grey--text ml-2">Area</span>
 5 |         </v-toolbar-title>
 6 | 
 7 |         <v-spacer></v-spacer>
 8 |         <v-icon color="grey" class="mr-2">fas fa-search</v-icon>
 9 |         <v-badge color="#41AB55" overlap content="2" class="mr-3 mt-1">
10 |           <v-icon color="grey" class="">far fa-heart</v-icon>
11 |         </v-badge>
12 |         <v-badge color="#41AB55" overlap content="3" class="mr-2 mt-1">
13 |           <v-icon color="grey">fas fa-shopping-cart</v-icon>
14 |         </v-badge>
15 |       </v-toolbar>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 | 
21 | }
22 | </script>
23 | 
24 | <style>
25 | 
26 | </style>


--------------------------------------------------------------------------------
/src/components/RightSideBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-navigation-drawer app color="#fff" right width="290">
  3 |     <v-toolbar color="transparent" flat>
  4 |       <h4>Today's menu</h4>
  5 | 
  6 |       <v-spacer></v-spacer>
  7 |       <v-badge bordered bottom color="red" dot offset-x="8" offset-y="30">
  8 |         <v-avatar size="30" class="ml-n3" tile>
  9 |           <v-img src="https://cdn.vuetifyjs.com/images/lists/1.jpg"></v-img>
 10 |         </v-avatar>
 11 |       </v-badge>
 12 |     </v-toolbar>
 13 | 
 14 |     <v-card
 15 |       color="white"
 16 |       flat
 17 |       class="d-flex align-center rounded-lg mx-2 borderme"
 18 |       dark
 19 |       height="210"
 20 |       @click="toggle"
 21 |     >
 22 |       <v-row>
 23 |         <v-col cols="12" sm="12">
 24 |           <v-list-item three-line class="text-center">
 25 |             <v-list-item-content>
 26 |               <div align="center" justify="center">
 27 |                 <v-img src="1.jpg" max-height="280" max-width="200"></v-img>
 28 |               </div>
 29 |               <v-toolbar flat color="transparent" class="mt-n4">
 30 |                 <v-rating
 31 |                   v-model="rating"
 32 |                   background-color="orange lighten-3"
 33 |                   color="orange"
 34 |                   x-small
 35 |                 ></v-rating>
 36 |                 <v-spacer></v-spacer>
 37 |                 <h6 class="black--text">$13</h6>
 38 |               </v-toolbar>
 39 |             </v-list-item-content>
 40 |           </v-list-item>
 41 |         </v-col>
 42 |       </v-row>
 43 |     </v-card>
 44 |     <h6 class="black--text ml-4 mt-6 mb-4">Person</h6>
 45 |     <v-row>
 46 |       <v-col cols="12" sm="8">
 47 |         <v-slider
 48 |           v-model="ex3.val"
 49 |           :thumb-color="ex3.color"
 50 |           thumb-label="always"
 51 |           class="mt-10"
 52 |         ></v-slider>
 53 |       </v-col>
 54 |       <v-col cols="12" sm="4">
 55 |         <v-img src="2.jpg"></v-img>
 56 |       </v-col>
 57 |     </v-row>
 58 |     <h4 class="ml-4 mt-n6">Summary</h4>
 59 | 
 60 |     <v-row class="mt-5">
 61 |       <v-col cols="12" sm="3">
 62 |         <v-card class="rounded-xl ml-2" flat>
 63 |           <v-img src="3.jpg" max-height="100%" max-width="100%" contain>
 64 |           </v-img>
 65 |         </v-card>
 66 |       </v-col>
 67 |       <v-col cols="12" sm="7"> <h4 class="mt-1">1X Best Chocolate</h4></v-col>
 68 |       <v-col cols="12" sm="2">
 69 |         <h6 class="mt-2 grey--text">$13</h6>
 70 |       </v-col>
 71 |       <v-col cols="12" sm="3">
 72 |         <v-card
 73 |           class="rounded-xl ml-2 borderme d-flex align-center py-1"
 74 |           flat
 75 |           color="white"
 76 |         >
 77 |           <v-icon small class="ml-3">fas fa-truck</v-icon>
 78 |         </v-card>
 79 |       </v-col>
 80 |       <v-col cols="12" sm="7"> <h4 class="mt-1">Delivery</h4></v-col>
 81 |       <v-col cols="12" sm="2">
 82 |         <h6 class="mt-2 grey--text">$00</h6>
 83 |       </v-col>
 84 |       <v-col cols="12" sm="3"> </v-col>
 85 |       <v-col cols="12" sm="7"> <h4 class="mt-1">Total</h4></v-col>
 86 |       <v-col cols="12" sm="2">
 87 |         <h6 class="mt-2 grey--text ml-n4">$13.99</h6>
 88 |       </v-col>
 89 |     </v-row>
 90 | 
 91 |     <v-toolbar flat color="transparent" class="mt-2">
 92 |       <h4 color="black--text">Person <strong>20</strong></h4>
 93 |       <v-spacer></v-spacer>
 94 |       <v-btn color="#FFCB5E">
 95 |         Checkout
 96 |         <v-icon color="black" right>fas fa-arrow-right</v-icon>
 97 |       </v-btn>
 98 |     </v-toolbar>
 99 |   </v-navigation-drawer>
100 | </template>
101 | 
102 | <script>
103 | export default {
104 |   data: () => ({
105 |     rating: 4,
106 |     ex3: { val: 20, color: "red" },
107 |     flags: [
108 |       {
109 |         avatar: "3.jpg",
110 |         title: "1X Best Chocolate",
111 |         subtitle: "$13",
112 |       },
113 |       {
114 |         avatar: "1.jpg",
115 |         title: "United Kingdom",
116 |         subtitle: "12%",
117 |       },
118 |       {
119 |         avatar: "",
120 |         title: "Canada",
121 |         subtitle: "9%",
122 |       },
123 |     ],
124 |   }),
125 | };
126 | </script>
127 | 
128 | <style>
129 | .v-card.borderme {
130 |   border: 2px solid #4d2c00 !important;
131 | }
132 | .v-card.borderout {
133 |   border: 1px solid #d5f0db !important;
134 | }
135 | </style>
136 | 


--------------------------------------------------------------------------------
/src/components/SideBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <nav>
  3 |     <v-navigation-drawer dark app color="#FFCB5E" width="100">
  4 |       <div class="text-center mt-5">
  5 |         <v-icon color="#4D2C00" large class="mt-4">fas fa-bars</v-icon>
  6 |       </div>
  7 |       <v-list flat class="mt-5">
  8 |         <v-list-item-group v-model="selectedItem" color="#4D2C00">
  9 |           <v-list-item
 10 |             v-for="(item, i) in items"
 11 |             :key="i"
 12 |             active-class="border"
 13 |             class="ml-2 my-3"
 14 |             :ripple="false"
 15 |           >
 16 |             <b></b>
 17 |             <b></b>
 18 |             <v-list-item-icon>
 19 |               <v-icon v-text="item.icon" color="#4D2C00"></v-icon>
 20 |             </v-list-item-icon>
 21 |           </v-list-item>
 22 |         </v-list-item-group>
 23 |       </v-list>
 24 |       <div
 25 |         style="
 26 |           position: absolute;
 27 |           bottom: 20px;
 28 |           margin-left: auto;
 29 |           margin-right: auto;
 30 |           left: 0;
 31 |           right: 0;
 32 |           text-align: center;
 33 |         "
 34 |       >
 35 |         <v-btn text>
 36 |           <v-icon color="#4D2C00">fas fa-sign-out-alt</v-icon>
 37 |         </v-btn>
 38 |       </div>
 39 |     </v-navigation-drawer>
 40 |   </nav>
 41 | </template>
 42 | 
 43 | <script>
 44 | export default {
 45 |   data: () => ({
 46 |     selectedItem: 0,
 47 |     drawer: null,
 48 |     items: [
 49 |       { icon: "fas fa-apple-alt", text: "Discover" },
 50 |       { icon: "fas fa-carrot", text: "Stream" },
 51 |       { icon: "fas fa-leaf", text: "Community" },
 52 |       { icon: "fas fa-lemon", text: "Statistics" },
 53 |       { icon: "fas fa-pepper-hot", text: "Statistics" },
 54 |       { icon: "fas fa-seedling", text: "Statistics" },
 55 |     ],
 56 |   }),
 57 | };
 58 | </script>
 59 | 
 60 | <style>
 61 | .border {
 62 |   background: #f4f5f9;
 63 |   border-top-left-radius: 30px;
 64 |   border-bottom-left-radius: 30px;
 65 |   text-decoration: none;
 66 | }
 67 | .border b:nth-child(1) {
 68 |   position: absolute;
 69 |   top: -20px;
 70 |   height: 20px;
 71 |   width: 83%;
 72 |   background: #f4f5f9;
 73 | 
 74 |   display: none;
 75 | }
 76 | .border b:nth-child(1)::before {
 77 |   content: "";
 78 |   position: absolute;
 79 |   top: 0;
 80 |   left: 0;
 81 |   width: 100%;
 82 |   height: 100%;
 83 |   border-bottom-right-radius: 20px;
 84 |   background: #ffcb5e;
 85 | }
 86 | .border b:nth-child(2) {
 87 |   position: absolute;
 88 |   bottom: -20px;
 89 |   height: 20px;
 90 |   width: 83%;
 91 |   background: #f4f5f9;
 92 |   display: none;
 93 | }
 94 | .border b:nth-child(2)::before {
 95 |   content: "";
 96 |   position: absolute;
 97 |   top: 0;
 98 |   left: 0;
 99 |   width: 100%;
100 |   height: 100%;
101 |   border-top-right-radius: 20px;
102 |   background: #ffcb5e;
103 | }
104 | .border b:nth-child(1),
105 | .border b:nth-child(2) {
106 |   display: block;
107 | }
108 | </style>
109 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import vuetify from './plugins/vuetify'
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | new Vue({
10 |   router,
11 |   store,
12 |   vuetify,
13 |   render: h => h(App)
14 | }).$mount('#app')
15 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
 1 | import '@fortawesome/fontawesome-free/css/all.css'
 2 | import 'material-design-icons-iconfont/dist/material-design-icons.css'
 3 | import Vue from 'vue';
 4 | import Vuetify from 'vuetify/lib/framework';
 5 | 
 6 | Vue.use(Vuetify);
 7 | 
 8 | export default new Vuetify({
 9 |     icons: {
10 |         iconfont: 'fa' || 'md'
11 |     },
12 |     theme: {
13 |         themes:{
14 |             dark: {
15 |                 background: '#F4F5F9'
16 |             }
17 |         }
18 |     }
19 | });
20 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Home from '../views/Home.vue'
 4 | 
 5 | Vue.use(VueRouter)
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: '/',
10 |     name: 'Home',
11 |     component: Home
12 |   },
13 |   {
14 |     path: '/about',
15 |     name: 'About',
16 |     // route level code-splitting
17 |     // this generates a separate chunk (about.[hash].js) for this route
18 |     // which is lazy-loaded when the route is visited.
19 |     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
20 |   }
21 | ]
22 | 
23 | const router = new VueRouter({
24 |   mode: 'history',
25 |   base: process.env.BASE_URL,
26 |   routes
27 | })
28 | 
29 | export default router
30 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 |   },
 9 |   mutations: {
10 |   },
11 |   actions: {
12 |   },
13 |   modules: {
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app
 3 |     id="inspire"
 4 |     :style="{ background: $vuetify.theme.themes.dark.background }"
 5 |   >
 6 |     <SideBar />
 7 |     <RightSideBar />
 8 |     <v-container>
 9 |      <Navbar />
10 |       <dessert />
11 |       <v-toolbar flat color="transparent" class="mt-n4">
12 |         <v-toolbar-title class="ml-4">
13 |           <strong>Day</strong><span class="grey--text ml-2">Menu</span>
14 |         </v-toolbar-title>
15 |       </v-toolbar>
16 |         <Menu />
17 | 
18 | 
19 |       <v-toolbar flat color="transparent" class="mt-n4">
20 |         <v-toolbar-title class="ml-4">
21 |           <strong>Ingredients</strong><span class="grey--text ml-2">Food</span>
22 |         </v-toolbar-title>
23 |       </v-toolbar>
24 |       <Food />
25 |      <Comment />
26 |     </v-container>
27 |   </v-app>
28 | </template>
29 | 
30 | <script>
31 | // @ is an alias to /src
32 | import SideBar from "@/components/SideBar.vue";
33 | import RightSideBar from "@/components/RightSideBar.vue";
34 | import Navbar from '../components/Navbar.vue';
35 | import Dessert from '../components/Dessert.vue';
36 | import Menu from '../components/Menu.vue';
37 | import Food from '../components/Food.vue';
38 | import Comment from '../components/Comment.vue';
39 | 
40 | export default {
41 |   name: "Home",
42 |   data: () => ({
43 |     
44 |    
45 |   }),
46 |   components: {
47 |     SideBar,
48 |     RightSideBar,
49 |     Navbar,
50 |     Dessert,
51 |     Menu,
52 |     Food,
53 |     Comment
54 |   },
55 | };
56 | </script>
57 | 


--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <hello-world />
 3 | </template>
 4 | 
 5 | <script>
 6 |   import HelloWorld from '../components/HelloWorld'
 7 | 
 8 |   export default {
 9 |     name: 'Home',
10 | 
11 |     components: {
12 |       HelloWorld,
13 |     },
14 |   }
15 | </script>
16 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   transpileDependencies: [
3 |     'vuetify'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------