diff --git a/src/components/Logo.vue b/src/components/Logo.vue new file mode 100644 index 0000000000000000000000000000000000000000..79fb2736956cb8da14271e6531689e6b8d377895 --- /dev/null +++ b/src/components/Logo.vue @@ -0,0 +1,14 @@ +<template> + <div> + <img src="../components/icons/logo.png" alt="logo" :style="{ width: logoSize }"> + </div> +</template> +<script> +export default { + name: "Logo" +} +</script> + +<style scoped> + +</style> \ No newline at end of file diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index dac9a4312a66c583994fe521f16a3bfc7a73c2c4..13648572d136d53356ba2f0573775647875e7f90 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -14,7 +14,10 @@ </li> <li> <RouterLink :to="'/'" :aria-label="'link to week menu page'"> - <Icon icon="mdi:leaf-circle" :color="iconColor" :style="{ fontSize: logoSize }" /> + <div id = "logoContainer" :style="{ width: logoSize, height: logoSize }" > + <img src="../components/icons/logo.png" alt="logo"> + </div> + <!--<Icon icon="mdi:leaf-circle" :color="iconColor" :style="{ fontSize: logoSize }" />--> </RouterLink> </li> <li> @@ -33,10 +36,11 @@ </template> <script> import { Icon } from '@iconify/vue'; +import Logo from "@/components/Logo.vue"; export default { name: "Navbar", - components: {Icon}, + components: {Logo, Icon}, computed: { iconColor() { return '#ffffff'; @@ -45,7 +49,7 @@ export default { return `32px`; }, logoSize() { - return '32px'; + return '62px'; } } } @@ -53,6 +57,15 @@ export default { <style scoped lang="scss"> +#logoContainer { + background-color: white; + border-radius: 50%; + +} +#logoContainer img{ + width:70%; +} + nav { position: fixed; top: auto; @@ -67,11 +80,10 @@ ul { display: flex; list-style-type: none; justify-content: space-between; + align-items: center; padding: 0; margin-right: 1em; margin-left: 1em; - margin-top: .6em; - } @@ -84,7 +96,6 @@ ul { } } - li{ text-align: center; } diff --git a/src/components/icons/logo.png b/src/components/icons/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..932a31c570979e3d4453e761d6e0a97f9b9938da Binary files /dev/null and b/src/components/icons/logo.png differ