From 17a35e7bc32cda17c87f3f478ff3d943cd13e0a9 Mon Sep 17 00:00:00 2001
From: Romet Vinnal <romet.vinnal@gmail.com>
Date: Mon, 17 Oct 2022 18:09:40 +0300
Subject: [PATCH 1/2] Menu

---
 src/assets/menu.svg       |  1 +
 src/components/Header.vue | 18 ++++++++++++++----
 src/components/Menu.vue   | 19 +++++++++++++++++++
 3 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/menu.svg
 create mode 100644 src/components/Menu.vue

diff --git a/src/assets/menu.svg b/src/assets/menu.svg
new file mode 100644
index 0000000..0af7d04
--- /dev/null
+++ b/src/assets/menu.svg
@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 30 30" width="64px" height="64px"><path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M3 15L27 15M3 8L27 8M3 22L27 22"/></svg>
\ No newline at end of file
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 132810f..2d9c41d 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="flex flex-col bg-white">
-    <div class="p-9 flex flex-row items-center grid-rows-3">
+  <div class="hidden md:flex md:flex-col md:bg-white">
+    <div class="hidden md:p-9 md:flex md:flex-row md:items-center md:grid-rows-3">
       <img alt="Pأµlva Haigla logo" class="logo" src="../assets/logo.png" width="178" height="159" />
       <SearchBar></SearchBar>
     </div>
     <div class="invisible md:visible">
       <nav class="md:flex md:justify-around md:text-2xl md:text-white md:p-11 md:bg-[#3A0960]">
-        <RouterLink class="hover:underline" to="/">Avalehtt</RouterLink>
+        <RouterLink class="hover:underline" to="/">Avaleht</RouterLink>
         <RouterLink class="hover:underline" to="/uudised">Uudised</RouterLink>
         <RouterLink class="hover:underline" to="/kontaktid">Kontaktid</RouterLink>
         <RouterLink class="hover:underline" to="/juhendid">Juhendid</RouterLink>
@@ -14,13 +14,23 @@
       </nav>
     </div>
   </div>
+  <div class="md:hidden grid grid-cols-3 content-between">
+    <div class="p-2">
+      <img class="" alt="Pأµlva Haigla logo" src="../assets/favicon.png" width="50" height="auto"/>
+    </div>
+    <div class="p-2 text-xl font-bold">Pأµlva Haigla siseveeb</div>
+    <div class="p-3">
+      <Menu class="fixed right-3"></Menu>
+    </div>
+  </div>
 </template>
 
 <script>
 import SearchBar from "./SearchBar.vue";
+import Menu from "./Menu.vue";
 export default {
   name: "Header",
-  components: {SearchBar}
+  components: {Menu, SearchBar}
 }
 </script>
 
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
new file mode 100644
index 0000000..cdaca04
--- /dev/null
+++ b/src/components/Menu.vue
@@ -0,0 +1,19 @@
+<template>
+<svg class="" viewBox="0 0 100 80" width="50" height="50">
+  <g>
+    <rect rx="10" width="80" height="15"></rect>
+    <rect rx="10" y="25" width="80" height="15"></rect>
+    <rect rx="10" y="50" width="80" height="15"></rect>
+  </g>
+</svg>
+</template>
+
+<script>
+export default {
+  name: "Menu"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
-- 
GitLab


From 1ee5e60faa4d24f698b9605c4dc443dbad8b93e9 Mon Sep 17 00:00:00 2001
From: Romet Vinnal <romet.vinnal@gmail.com>
Date: Mon, 17 Oct 2022 21:05:47 +0300
Subject: [PATCH 2/2] Menu + fontawesome

---
 package.json              |  3 +++
 src/components/Header.vue | 10 ++++++----
 src/main.js               | 15 ++++++++++++++-
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 60f38cb..49698a9 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,9 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/vue-fontawesome": "^3.0.1",
     "firebase": "^9.11.0",
     "vue": "^3.2.38",
     "vue-router": "^4.1.5"
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 2d9c41d..5cc30c7 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -14,13 +14,14 @@
       </nav>
     </div>
   </div>
-  <div class="md:hidden grid grid-cols-3 content-between">
+  <div class="md:hidden flex justify-between bg-[#3A0960]">
     <div class="p-2">
       <img class="" alt="Pأµlva Haigla logo" src="../assets/favicon.png" width="50" height="auto"/>
     </div>
-    <div class="p-2 text-xl font-bold">Pأµlva Haigla siseveeb</div>
-    <div class="p-3">
-      <Menu class="fixed right-3"></Menu>
+    <div class="p-2 text-xl font-bold text-white flex items-center w-max">Pأµlva Haigla iseveeb</div>
+    <div class="p-2">
+      <font-awesome-icon class="text-5xl text-white" icon="fa-solid fa-bars" />
+<!--      <Menu class="fixed right-3"></Menu>-->
     </div>
   </div>
 </template>
@@ -28,6 +29,7 @@
 <script>
 import SearchBar from "./SearchBar.vue";
 import Menu from "./Menu.vue";
+import { faBars } from '@fortawesome/free-solid-svg-icons'
 export default {
   name: "Header",
   components: {Menu, SearchBar}
diff --git a/src/main.js b/src/main.js
index bde4428..4276344 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,18 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+
+/* import the fontawesome core */
+import { library } from '@fortawesome/fontawesome-svg-core'
+
+/* import font awesome icon component */
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+/* import specific icons */
+import {faBars, faUserSecret} from '@fortawesome/free-solid-svg-icons'
+
+/* add icons to the library */
+library.add(faUserSecret, faBars)
+
 import router from './router'
 
 import './assets/tailwind.css'
@@ -7,5 +20,5 @@ import './assets/tailwind.css'
 const app = createApp(App)
 
 app.use(router)
-
+app.component('font-awesome-icon', FontAwesomeIcon)
 app.mount('#app')
-- 
GitLab