Merge branch 'navbar' into 'main'

Navbar

See merge request !4

cypress/e2e/navbar.cy.js

+describe('Correct navigation links', () => {
+    /*TODO*/
+})
+describe('Navbar on all pages', () => {
+  /*TODO*/
+})
\ No newline at end of file

package.json

@@ -11,17 +11,22 @@
     "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress run --e2e'"
   },
   "dependencies": {
+    "@iconify/iconify": "^3.1.0",
     "jwt-decode": "^3.1.2",
     "pinia": "^2.0.28",
+    "sass": "^1.62.0",
     "pinia-plugin-persistedstate": "^3.1.0",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
+    "@iconify/vue": "^4.1.1",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/test-utils": "^2.2.6",
     "cypress": "^12.0.2",
     "jsdom": "^20.0.3",
+    "node-sass": "^8.0.0",
+    "sass-loader": "^13.2.2",
     "start-server-and-test": "^1.15.2",
     "vite": "^4.0.0",
     "vitest": "^0.25.6"

src/App.vue

 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
+import Navbar from "@/components/Navbar.vue";
+
+
 </script>
 
 <template>
+    <Navbar></Navbar>
   <RouterView />
 </template>
 

src/assets/main.css

@@ -3,7 +3,7 @@
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  qpadding: 2rem;
 
   font-weight: normal;
 }
@@ -29,7 +29,6 @@ a,
 
   #app {
     display: grid;
-    grid-template-columns: 1fr 1fr;
     padding: 0 2rem;
   }
 }

src/components/HelloWorld.vue

-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>

src/components/Logo.vue

+<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

src/components/Navbar.vue

+<template>
+    <div>
+        <nav>
+            <ul :aria-label = "'Navigation links'">
+                <li>
+                    <RouterLink :to="'/'" :aria-label="'link to home page'">
+                      <Icon icon="material-symbols:home-outline-rounded" :color="iconColor" :style="{ fontSize: iconSize }" />
+                    </RouterLink>
+                </li>
+                <li>
+                    <RouterLink :to="'/'" :aria-label="'link to fridge page'">
+                      <Icon icon="mingcute:fridge-line" :color="iconColor" :style="{ fontSize: iconSize }"/>
+                    </RouterLink>
+                 </li>
+                <li>
+                    <RouterLink :to="'/'" :aria-label="'link to week menu page'">
+                        <div id = "logoContainer" :style="{ width: logoSize, height: logoSize }" >
+                            <img src="../components/icons/logo.png" alt="logo">
+                        </div>
+                    </RouterLink>
+                </li>
+                <li>
+                    <RouterLink :to="'/'" :aria-label="'link to shopping list'">
+                      <Icon icon="material-symbols:event-list-outline" :color="iconColor" :style="{ fontSize: iconSize }" />
+                    </RouterLink>
+                </li>
+                <li>
+                    <RouterLink :to="'/'" :aria-label="'link to settings page'">
+                      <Icon icon="mdi:cog" :color="iconColor" :style="{ fontSize: iconSize }"/>
+                    </RouterLink>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</template>
+<script>
+import { Icon } from '@iconify/vue';
+import Logo from "@/components/Logo.vue";
+
+export default {
+    name: "Navbar",
+  components: {Logo, Icon},
+  computed: {
+    iconColor() {
+      return '#ffffff';
+    },
+    iconSize() {
+      return `32px`;
+    },
+    logoSize() {
+      return '62px';
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+#logoContainer {
+    background-color: white;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items:center;
+}
+#logoContainer img{
+    width:70%;
+}
+
+nav {
+    z-index: 999;
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    width: 100%;
+    background-color: base.$green;
+    margin:0;
+    padding:0;
+}
+
+ul {
+    display: flex;
+    list-style-type: none;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0;
+    margin-right: 1em;
+    margin-left: 1em;
+}
+
+@media only screen and (min-width: base.$desktop-min){
+    nav {
+        top:0;
+        left:0;
+        bottom:auto;
+    }
+}
+
+li{
+    text-align: center;
+}
+</style>
\ No newline at end of file

src/components/TheWelcome.vue

-<script setup>
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
-    you need to test your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
-
-    <br />
-
-    More instructions are available in <code>README.md</code>.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
-    Discord server, or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also subscribe to
-    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
-    the official
-    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    twitter account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>

src/components/WelcomeItem.vue

-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>

src/components/__tests__/HelloWorld.spec.js

-import { describe, it, expect } from 'vitest'
-
-import { mount } from '@vue/test-utils'
-import HelloWorld from '../HelloWorld.vue'
-
-describe('HelloWorld', () => {
-  it('renders properly', () => {
-    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
-    expect(wrapper.text()).toContain('Hello Vitest')
-  })
-})

src/components/__tests__/Navbar.spec.js

+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import Navbar from "@/components/Navbar.vue";
+import { Icon } from '@iconify/vue';
+describe('Navbar', () => {
+    it('contains 5 links', () => {
+        const wrapper = mount(Navbar)
+        expect(wrapper.findAll('RouterLink').length).toBe(5)
+    })
+
+    it('contains 4 icons', () => {
+        const wrapper = mount(Navbar)
+        const icons = wrapper.findAllComponents(Icon)
+        expect(icons).toHaveLength(4)})
+})

src/style.scss

+/*APP COLORS*/
+$green: #00663C;
+$light-green: hsla(160, 100%, 37%, 1);
+$white:#FFFFFF;
+$grey:#D9D9D9;
+$red:#EE6D6D;
+
+
+$desktop-min: 800px;
+$phone-min : 360px;
+

src/views/HomeView.vue

 <script setup>
-import TheWelcome from '../components/TheWelcome.vue'
+
 </script>
 
 <template>
   <main>
-    <TheWelcome />
+      <p>HALLO</p>
   </main>
 </template>

src/views/LoginView.vue

@@ -51,7 +51,7 @@
     </main>
 </template>
 
-<style>
+<style lang="scss">
 
 .login-container {
   display: flex;
@@ -87,7 +87,7 @@ label {
 }
 
 #login-button {
-  background-color: #00663C;
+  background-color: base.$green;
   color: #FFFFFF;
   border-radius: 5px;
   border-style: none;
@@ -98,6 +98,11 @@ label {
   margin: 20px;
 }
 
+#login-button:hover {
+  background-color: base.$light-green;
+
+}
+
 #logo {
   width: 100px;
   height: 100px;

src/views/SelectProfileView.vue

@@ -55,7 +55,7 @@
 </template>
 
 
-<style scoped>
+<style scoped lang="scss">
 
     .container {
         display: flex;
@@ -87,7 +87,7 @@
     }
 
     .icon:hover {
-        background-color: #d5d5d5;
+        background-color: base.$grey;
         border-radius: 10%;
     }
 

vite.config.js

@@ -10,5 +10,12 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "@/style.scss" as base;`
+      }
+    }
   }
 })