Menu with Vuetify

Author: JanisV

frontend/package-lock.json

@@ -12,8 +12,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@mdi/font": "^7.4.47",
     "sql.js": "^1.13.0",
-    "vue": "^3.5.25"
+    "vue": "^3.5.25",
+    "vuetify": "^3.11.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.2",

frontend/package.json

@@ -62,46 +62,54 @@ const handleFileUpload = async (file) => {
 
   reader.readAsArrayBuffer(file);
 };
+
+const items = [
+  {
+    title: 'About',
+    value: 'about',
+  },
+];
+const drawer = ref(false);
 </script>
 
 <template>
-  <main>
-    <div v-if="!selectedFile" class="select-view">
-      <FileUploader :handleFile="handleFileUpload" />
-      <p>Your file not will be uploaded to the internet. You can disable internet connection.</p>
-    </div>
-    <div v-else class="file-view">
-      <CoinList :file_name="selectedFile.name" :coins_list="coinsList" />
-    </div>
-    <div v-if="status" class="status">{{ status }}</div>
-  </main>
+  <v-layout>
+    <v-app-bar color="primary">
+      <v-app-bar-nav-icon
+        variant="text"
+        @click.stop="drawer = !drawer"
+      ></v-app-bar-nav-icon>
+
+      <v-toolbar-title>OpenNumismat</v-toolbar-title>
+    </v-app-bar>
+
+    <v-navigation-drawer v-model="drawer" temporary>
+      <v-list :items="items"></v-list>
+    </v-navigation-drawer>
+
+    <v-main>
+      <div v-if="!selectedFile" class="select-view">
+        <FileUploader :handleFile="handleFileUpload" />
+        <p>Your file not will be uploaded to the internet. You can disable internet connection.</p>
+      </div>
+      <div v-else class="file-view">
+        <CoinList :file_name="selectedFile.name" :coins_list="coinsList" />
+      </div>
+      <div v-if="status" class="status">{{ status }}</div>
+    </v-main>
+  </v-layout>
 </template>
 
 <style scoped>
 header {
   line-height: 1.5;
 }
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
 @media (min-width: 1024px) {
   header {
     display: flex;
     place-items: center;
     padding-right: calc(var(--section-gap) / 2);
   }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
 }
 </style>

frontend/src/App.vue

@@ -1,6 +1,20 @@
 import './assets/main.css'
+import '@mdi/font/css/materialdesignicons.css'
 
 import { createApp } from 'vue'
+
+// Vuetify
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+// Components
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+createApp(App).use(vuetify).mount('#app')