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