diff --git a/src/App.vue b/src/App.vue
index b02be06fb2a4e33682c075c3ce2ac2c036747a73..ee6510a265ad8ef54e2ec8730091082d9dd9d676 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,9 +2,15 @@
import { RouterView } from 'vue-router'
</script>
-<template class="app">
- <RouterView />
+<template>
+ <div class="app">
+ <RouterView />
+ </div>
</template>
<style scoped>
+.app{
+ height: 100vh;
+ width: 100vw;
+}
</style>
diff --git a/src/assets/base.css b/src/assets/base.css
index ef9aa2129e6fcceddbc2bdcfc9dcddf877b616b9..042ed2f0993ac8087c1869cbca9b13185f6fa6ab 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -48,6 +48,7 @@
--color-header: var(--vt-c-kellyGreen);
--color-heading: var(--vt-c-kellyGreen);
+ --color-headerText: var(--vt-c-white);
--color-hamburgerMenu: var(--vt-c-white);
--color-emptyProgress: var(--vt-c-white);
@@ -64,6 +65,8 @@
--color-text: var(--vt-c-text-light-1);
+ --color-shadow: rgba(0, 0, 0, 0.2);
+
--section-gap: 160px;
}
@@ -79,6 +82,8 @@
--color-border-hover: var(--vt-c-borderGreyDark);
--color-text: var(--vt-c-text-dark-1);
+
+ --color-shadow: rgba(255, 255, 255, 0.2);
}
}
diff --git a/src/assets/pig.png b/src/assets/pig.png
new file mode 100644
index 0000000000000000000000000000000000000000..dca0784955d88541148cb5ae5359b8b50693799d
Binary files /dev/null and b/src/assets/pig.png differ
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
deleted file mode 100644
index 49d8f7354f7d0f22c6abf7d8be239f47ddc34c09..0000000000000000000000000000000000000000
--- a/src/components/TheWelcome.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<script setup lang="ts">
-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" rel="noopener"
- >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>
diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue
deleted file mode 100644
index 6d7086aea08fbb770b2f570dbeb4f8fcd86cb291..0000000000000000000000000000000000000000
--- a/src/components/WelcomeItem.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<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;
- position: relative;
-}
-
-.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>
diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue
deleted file mode 100644
index 2dc8b055253af30fb797037e2fe260505f0cf711..0000000000000000000000000000000000000000
--- a/src/components/icons/IconCommunity.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
- <path
- d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
- />
- </svg>
-</template>
diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue
deleted file mode 100644
index 6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed..0000000000000000000000000000000000000000
--- a/src/components/icons/IconDocumentation.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
- <path
- d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
- />
- </svg>
-</template>
diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue
deleted file mode 100644
index c3a4f078c0bd340a33c61ea9ecd8a755d03571ed..0000000000000000000000000000000000000000
--- a/src/components/icons/IconEcosystem.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
- <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
- <path
- d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
- />
- </svg>
-</template>
diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue
deleted file mode 100644
index 7452834d3ef961ce24c3a072ddba2620b6158bae..0000000000000000000000000000000000000000
--- a/src/components/icons/IconSupport.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
- <path
- d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
- />
- </svg>
-</template>
diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue
deleted file mode 100644
index 660598d7c76644ffe126a1a1feb1606650bfb937..0000000000000000000000000000000000000000
--- a/src/components/icons/IconTooling.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
-<template>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- aria-hidden="true"
- role="img"
- class="iconify iconify--mdi"
- width="24"
- height="24"
- preserveAspectRatio="xMidYMid meet"
- viewBox="0 0 24 24"
- >
- <path
- d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
- fill="currentColor"
- ></path>
- </svg>
-</template>
diff --git a/src/components/icons/navigation/challenge.svg b/src/components/icons/navigation/challenge.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c7987bf5112f3e89dd2166bc03cddc5626989158
--- /dev/null
+++ b/src/components/icons/navigation/challenge.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
+ <path d="m24,7v12c0,2.757-2.243,5-5,5-.552,0-1-.447-1-1s.448-1,1-1c1.654,0,3-1.346,3-3v-9h-1c-.552,0-1-.447-1-1s.448-1,1-1h1v-1c0-1.654-1.346-3-3-3H5c-1.654,0-3,1.346-3,3v1h11c.552,0,1,.447,1,1s-.448,1-1,1H2v9c0,1.654,1.346,3,3,3,.552,0,1,.447,1,1s-.448,1-1,1c-2.757,0-5-2.243-5-5V7C0,4.243,2.243,2,5,2h1v-1c0-.553.448-1,1-1s1,.447,1,1v1h8v-1c0-.553.448-1,1-1s1,.447,1,1v1h1c2.757,0,5,2.243,5,5Zm-7,10c-.552,0-1,.447-1,1,0,2.206-1.794,4-4,4s-4-1.794-4-4,1.794-4,4-4c.552,0,1-.447,1-1s-.448-1-1-1c-3.309,0-6,2.691-6,6s2.691,6,6,6,6-2.691,6-6c0-.553-.448-1-1-1Zm-.448-7.744l-.966.966c-.375.375-.586.884-.586,1.414v1.95l-2.482,2.482c-.165-.044-.339-.068-.518-.068-1.105,0-2,.895-2,2s.895,2,2,2,2-.895,2-2c0-.179-.024-.353-.068-.518l2.482-2.482h1.95c.53,0,1.039-.211,1.414-.586l.966-.966c.535-.535.156-1.448-.6-1.448h-2.144v-2.144c0-.756-.914-1.135-1.448-.6Z"/>
+</svg>
diff --git a/src/components/icons/navigation/cross.svg b/src/components/icons/navigation/cross.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c7d8f0af8f441650efb9a0f3b645e1e0e74cbfa8
--- /dev/null
+++ b/src/components/icons/navigation/cross.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512.021 512.021" style="enable-background:new 0 0 512.021 512.021;" xml:space="preserve" width="512" height="512">
+<g>
+ <path d="M301.258,256.01L502.645,54.645c12.501-12.501,12.501-32.769,0-45.269c-12.501-12.501-32.769-12.501-45.269,0l0,0 L256.01,210.762L54.645,9.376c-12.501-12.501-32.769-12.501-45.269,0s-12.501,32.769,0,45.269L210.762,256.01L9.376,457.376 c-12.501,12.501-12.501,32.769,0,45.269s32.769,12.501,45.269,0L256.01,301.258l201.365,201.387 c12.501,12.501,32.769,12.501,45.269,0c12.501-12.501,12.501-32.769,0-45.269L301.258,256.01z"/>
+</g>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</svg>
diff --git a/src/components/icons/navigation/economy.svg b/src/components/icons/navigation/economy.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8df3874b0fdbf01042ff2ab133e9bb5524e3e761
--- /dev/null
+++ b/src/components/icons/navigation/economy.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M23,22H3a1,1,0,0,1-1-1V1A1,1,0,0,0,0,1V21a3,3,0,0,0,3,3H23a1,1,0,0,0,0-2Z"/><path d="M15,20a1,1,0,0,0,1-1V12a1,1,0,0,0-2,0v7A1,1,0,0,0,15,20Z"/><path d="M7,20a1,1,0,0,0,1-1V12a1,1,0,0,0-2,0v7A1,1,0,0,0,7,20Z"/><path d="M19,20a1,1,0,0,0,1-1V7a1,1,0,0,0-2,0V19A1,1,0,0,0,19,20Z"/><path d="M11,20a1,1,0,0,0,1-1V7a1,1,0,0,0-2,0V19A1,1,0,0,0,11,20Z"/></svg>
diff --git a/src/components/icons/navigation/house-chimney.svg b/src/components/icons/navigation/house-chimney.svg
new file mode 100644
index 0000000000000000000000000000000000000000..33d6f9b04eff73d321e968d5613078d91643f049
--- /dev/null
+++ b/src/components/icons/navigation/house-chimney.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M22,5.724V2c0-.552-.447-1-1-1s-1,.448-1,1v2.366L14.797,.855c-1.699-1.146-3.895-1.146-5.594,0L2.203,5.579c-1.379,.931-2.203,2.48-2.203,4.145v9.276c0,2.757,2.243,5,5,5h3c.553,0,1-.448,1-1V15c0-.551,.448-1,1-1h4c.552,0,1,.449,1,1v8c0,.552,.447,1,1,1h3c2.757,0,5-2.243,5-5V9.724c0-1.581-.744-3.058-2-4Zm0,13.276c0,1.654-1.346,3-3,3h-2v-7c0-1.654-1.346-3-3-3h-4c-1.654,0-3,1.346-3,3v7h-2c-1.654,0-3-1.346-3-3V9.724c0-.999,.494-1.929,1.322-2.487L10.322,2.513c1.02-.688,2.336-.688,3.355,0l7,4.724c.828,.558,1.322,1.488,1.322,2.487v9.276Z"/></svg>
diff --git a/src/components/icons/navigation/lightbulb-on.svg b/src/components/icons/navigation/lightbulb-on.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b4c80fe87eb34bc9a8999fff7f56f924f4a33a5b
--- /dev/null
+++ b/src/components/icons/navigation/lightbulb-on.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
+ <path d="m11.864,4.001c-4.184.069-7.709,3.526-7.858,7.705-.088,2.428.914,4.733,2.75,6.326.791.687,1.244,1.743,1.244,2.968,0,1.654,1.346,3,3,3h2c1.654,0,3-1.346,3-3v-.375c0-.966.455-1.898,1.282-2.626,1.728-1.518,2.718-3.704,2.718-5.999,0-2.161-.849-4.187-2.39-5.703-1.541-1.516-3.583-2.345-5.746-2.296Zm2.136,16.999c0,.552-.448,1-1,1h-2c-.552,0-1-.448-1-1.069,0-.316-.031-.626-.077-.931h4.118c-.025.206-.041.415-.041.625v.375Zm1.962-4.503c-.511.449-.923.957-1.24,1.503h-1.722v-4.184c1.161-.414,2-1.514,2-2.816,0-.553-.447-1-1-1s-1,.447-1,1-.448,1-1,1-1-.448-1-1-.447-1-1-1-1,.447-1,1c0,1.302.839,2.402,2,2.816v4.184h-1.746c-.31-.558-.707-1.06-1.188-1.478-1.376-1.195-2.128-2.924-2.062-4.744.112-3.134,2.756-5.726,5.894-5.777.034,0,.067,0,.102,0,1.586,0,3.077.609,4.208,1.723,1.156,1.137,1.793,2.656,1.793,4.277,0,1.72-.743,3.358-2.038,4.497Zm.823-14.023l1.235-2.01c.288-.472.904-.619,1.375-.328.471.289.618.904.328,1.375l-1.235,2.01c-.188.308-.517.477-.853.477-.179,0-.359-.048-.522-.148-.471-.289-.618-.904-.328-1.375Zm6.628,4.148l-1.933.872c-.133.061-.273.089-.41.089-.382,0-.745-.219-.912-.589-.228-.503-.004-1.096.5-1.322l1.933-.872c.506-.229,1.096-.003,1.322.5.228.503.004,1.096-.5,1.322ZM4.194,1.51c-.289-.471-.141-1.087.33-1.375.473-.288,1.087-.14,1.375.33l1.232,2.011c.289.471.141,1.087-.33,1.375-.163.1-.344.147-.521.147-.337,0-.665-.17-.854-.478l-1.232-2.011Zm-.483,5.551c-.171.359-.529.568-.902.568-.145,0-.292-.031-.431-.099l-1.798-.861c-.498-.238-.709-.835-.47-1.333.237-.499.837-.712,1.333-.47l1.798.861c.498.238.709.835.47,1.333Z"/>
+</svg>
diff --git a/src/components/icons/navigation/menu-burger.svg b/src/components/icons/navigation/menu-burger.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c4aa2e39fb1ab858d5252254929b31b5cca151f6
--- /dev/null
+++ b/src/components/icons/navigation/menu-burger.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 490.667 490.667" style="enable-background:new 0 0 490.667 490.667;" xml:space="preserve" width="512" height="512">
+<g>
+ <path d="M469.333,224h-448C9.551,224,0,233.551,0,245.333c0,11.782,9.551,21.333,21.333,21.333h448 c11.782,0,21.333-9.551,21.333-21.333C490.667,233.551,481.115,224,469.333,224z"/>
+ <path d="M21.333,117.333h448c11.782,0,21.333-9.551,21.333-21.333s-9.551-21.333-21.333-21.333h-448C9.551,74.667,0,84.218,0,96 S9.551,117.333,21.333,117.333z"/>
+ <path d="M469.333,373.333h-448C9.551,373.333,0,382.885,0,394.667C0,406.449,9.551,416,21.333,416h448 c11.782,0,21.333-9.551,21.333-21.333C490.667,382.885,481.115,373.333,469.333,373.333z"/>
+</g>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</svg>
diff --git a/src/components/icons/navigation/piggy-bank.svg b/src/components/icons/navigation/piggy-bank.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3e480fbf6c6a0b03409c09e3bb6ffc30099562d1
--- /dev/null
+++ b/src/components/icons/navigation/piggy-bank.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M18,12c0,.552-.448,1-1,1s-1-.448-1-1,.448-1,1-1,1,.448,1,1ZM7,5c.552,0,1-.447,1-1,0-1.103,.897-2,2-2s2,.897,2,2c0,.553,.448,1,1,1s1-.447,1-1c0-2.206-1.794-4-4-4S6,1.794,6,4c0,.553,.448,1,1,1ZM24,13v2c0,1.106-.748,1.779-1.568,1.954-.661,1.654-1.872,3.051-3.432,3.954v.092c0,1.654-1.346,3-3,3-1.304,0-2.416-.836-2.829-2h-2.343c-.413,1.164-1.525,2-2.829,2-1.654,0-3-1.346-3-3v-.079c-2.635-1.519-4.182-4.377-3.983-7.451,.063-.978,.31-1.907,.705-2.756-1.017-.481-1.723-1.516-1.723-2.714,0-1.654,1.346-3,3-3,.552,0,1,.447,1,1s-.448,1-1,1-1,.448-1,1c0,.491,.356,.9,.823,.984,1.521-1.823,3.853-2.984,6.443-2.984h5.363c.733-1.478,2.102-2.512,3.927-2.946,.591-.139,1.203-.003,1.681,.374,.485,.384,.764,.958,.764,1.576v3.715c.608,.691,1.094,1.481,1.432,2.327,.821,.175,1.568,.848,1.568,1.954Zm-2,0h-.294c-.442,0-.832-.291-.958-.715-.274-.92-.78-1.776-1.463-2.477-.183-.187-.285-.438-.285-.698V5.004c-.975,.232-2.265,.83-2.764,2.335-.141,.423-.553,.714-.99,.684-.068-.003-5.98-.022-5.98-.022-3.303,0-6.05,2.459-6.253,5.599-.16,2.469,1.181,4.752,3.417,5.815,.349,.166,.57,.518,.57,.903v.683c0,.552,.449,1,1,1s1-.448,1-1,.448-1,1-1h4c.552,0,1,.447,1,1s.449,1,1,1,1-.448,1-1v-.694c0-.385,.221-.736,.569-.902,1.542-.736,2.7-2.081,3.179-3.688,.126-.424,.516-.715,.958-.715h.294v-2Z"/></svg>
diff --git a/src/components/icons/navigation/user.svg b/src/components/icons/navigation/user.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3145a9db43babd2838dfcf13389e5f697871a54f
--- /dev/null
+++ b/src/components/icons/navigation/user.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="512" height="512"><g id="_01_align_center" data-name="01 align center"><path d="M21,24H19V18.957A2.96,2.96,0,0,0,16.043,16H7.957A2.96,2.96,0,0,0,5,18.957V24H3V18.957A4.963,4.963,0,0,1,7.957,14h8.086A4.963,4.963,0,0,1,21,18.957Z"/><path d="M12,12a6,6,0,1,1,6-6A6.006,6.006,0,0,1,12,12ZM12,2a4,4,0,1,0,4,4A4,4,0,0,0,12,2Z"/></g></svg>
diff --git a/src/components/navigation/DropNav.vue b/src/components/navigation/DropNav.vue
new file mode 100644
index 0000000000000000000000000000000000000000..47bf42aaae76c33a997ae2a6ed7e579e4ff59a66
--- /dev/null
+++ b/src/components/navigation/DropNav.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+ import { useRouter } from 'vue-router'
+ import { defineEmits } from 'vue'
+ const emit = defineEmits(['route-pushed']);
+
+
+ const router = useRouter();
+ const navigateTo = (path: string) => {
+ router.push(path);
+ emit('route-pushed', false);
+ }
+</script>
+
+<template>
+ <div class="burger-menu-component">
+ <div class="button-menu">
+ <button class="menu-button" @click="navigateTo('/homepage/home')">
+ <img src="/src/components/icons/navigation/house-chimney.svg" alt="Home Icon" class="icon">
+ <label class="button-label">Hjem</label>
+ </button>
+ <button class="menu-button" @click="navigateTo('/homepage/discover')">
+ <img src="/src/components/icons/navigation/lightbulb-on.svg" alt="Discover Icon" class="icon">
+ <label class="button-label">Sparetips</label>
+ </button>
+ <button class="menu-button" @click="navigateTo('/homepage/milestone')">
+ <img src="/src/components/icons/navigation/piggy-bank.svg" alt="Milestone Icon" class="icon">
+ <label class="button-label">Sparemål</label>
+ </button>
+ <button class="menu-button" @click="navigateTo('/homepage/challenge')">
+ <img src="/src/components/icons/navigation/challenge.svg" alt="Challenge Icon" class="icon">
+ <label class="button-label">Utfordringer</label>
+ </button>
+ <button class="menu-button" @click="navigateTo('/homepage/economy')">
+ <img src="/src/components/icons/navigation/economy.svg" alt="Economy Icon" class="icon">
+ <label class="button-label">Forbruk</label>
+ </button>
+ <button class="menu-button" @click="navigateTo('/homepage/profile')">
+ <img src="/src/components/icons/navigation/user.svg" alt="Profile Icon" class="icon">
+ <label class="button-label">Profil</label>
+ </button>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+
+.burger-menu-component{
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+ place-items: center;
+
+ width: 100vw;
+ height: 100vh;
+ min-height: 650px;
+ overflow-y: scroll;
+
+ padding: 5.0%;
+
+ background-color: var(--color-background);
+}
+
+.button-menu{
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+ place-content: center;
+ justify-content: space-evenly;
+
+ height: 100%;
+ width: 100%;
+
+ gap: 2.5%;
+}
+
+.menu-button{
+ display: flex;
+ flex-direction: row;
+
+ align-items: center;
+ place-content: center;
+
+ height: 12%;
+ width: 100%;
+ gap: 2.5%;
+
+ border: 2px solid var(--color-border);
+ border-radius: 20px;
+ background-color: transparent;
+}
+
+.menu-button:hover{
+ transform: scale(1.05);
+ cursor: pointer;
+}
+
+.icon{
+ width: 15%;
+ height: 80%;
+ margin: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+ .icon {
+ filter: invert(1); /* Invert colors of the image in dark mode */
+ }
+}
+
+.button-label{
+ margin: 0;
+ font-size: medium;
+ color: var(--color-text);
+}
+
+.button-label:hover{
+ cursor: pointer;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/components/navigation/SideNav.vue b/src/components/navigation/SideNav.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6712b5b7a28fb41eb6337e0ddbac2ef32125d5fe
--- /dev/null
+++ b/src/components/navigation/SideNav.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
+
+const router = useRouter();
+const currentRoute = router.currentRoute;
+const selectedPath = ref(currentRoute.value.path)
+const navigateTo = (path: string) => {
+ router.push(path)
+}
+
+watch(currentRoute, () => {
+ selectedPath.value = currentRoute.value.path;
+})
+
+</script>
+
+<template>
+ <div class="side-navigation">
+ <div class="button-menu">
+ <button
+ class="menu-button"
+ :class="{ 'active': currentRoute.path == '/homepage/home' || currentRoute.path == '/homepage' }"
+ @click="navigateTo('/homepage/home')">
+ <img src="/src/components/icons/navigation/house-chimney.svg" alt="Home Icon" class="icon">
+ <label class="button-label">Hjem</label>
+ </button>
+ <button
+ class="menu-button"
+ :class="{ 'active': currentRoute.path == '/homepage/discover' }"
+ @click="navigateTo('/homepage/discover')">
+ <img src="/src/components/icons/navigation/lightbulb-on.svg" alt="Discover Icon" class="icon">
+ <label class="button-label">Sparetips</label>
+ </button>
+ <button
+ class="menu-button"
+ :class="{ 'active': currentRoute.path == '/homepage/milestone' }"
+ @click="navigateTo('/homepage/milestone')">
+ <img src="/src/components/icons/navigation/piggy-bank.svg" alt="Milestone Icon" class="icon">
+ <label class="button-label">Sparemål</label>
+ </button>
+ <button
+ class="menu-button"
+ :class="{ 'active': currentRoute.path == '/homepage/challenge' }"
+ @click="navigateTo('/homepage/challenge')">
+ <img src="/src/components/icons/navigation/challenge.svg" alt="Challenge Icon" class="icon">
+ <label class="button-label">Utfordringer</label>
+ </button>
+ <button
+ class="menu-button"
+ :class="{ 'active': currentRoute.path == '/homepage/economy' }"
+ @click="navigateTo('/homepage/economy')">
+ <img src="/src/components/icons/navigation/economy.svg" alt="Economy Icon" class="icon">
+ <label class="button-label">Forbruk</label>
+ </button>
+ <button
+ class="menu-button"
+ :class="{ 'active': currentRoute.path == '/homepage/profile' }"
+ @click="navigateTo('/homepage/profile')">
+ <img src="/src/components/icons/navigation/user.svg" alt="Profile Icon" class="icon">
+ <label class="button-label">Profil</label>
+ </button>
+ </div>
+ <img src="/src/assets/pig.png" alt="Pig Logo" class="logo">
+ </div>
+</template>
+
+
+<style scoped>
+.side-navigation{
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+
+ height: 100%;
+ width: 100%;
+ background-color: var(--color-background);
+}
+
+.button-menu{
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+ place-content: start;
+ justify-content: space-evenly;
+
+ height: 65%;
+ width: 100%;
+
+ gap: 5.0%;
+}
+
+.menu-button{
+ display: flex;
+ flex-direction: row;
+
+ align-items: center;
+ place-content: center;
+
+ height: 12%;
+ width: 100%;
+ gap: 2.5%;
+
+ border: 2px solid var(--color-border);
+ border-radius: 20px;
+ background-color: transparent;
+}
+
+.menu-button.active {
+ border-color: var(--color-heading); /* Change to your desired color */
+}
+
+.menu-button:hover{
+ transform: scale(1.05);
+ cursor: pointer;
+}
+
+.icon{
+ width: 15%;
+ height: 80%;
+ margin: 0;
+}
+@media (prefers-color-scheme: dark) {
+ .icon {
+ filter: invert(1); /* Invert colors of the image in dark mode */
+ }
+}
+
+.button-label{
+ margin: 0;
+ font-size: medium;
+ color: var(--color-text);
+}
+
+.button-label:hover{
+ cursor: pointer;
+}
+
+.logo{
+ height: 35%;
+ max-width: 100%;
+ padding-top: 5.0%;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/navigation/TopNav.vue b/src/components/navigation/TopNav.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1fbbaf82e98dad827a29df5eb8d8b98b10305575
--- /dev/null
+++ b/src/components/navigation/TopNav.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import DropDownMenu from '@/components/navigation/DropNav.vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter();
+const isBurgerMenuOpen = ref(false);
+
+const openBurgerMenu = () => {
+ if(isBurgerMenuOpen.value) {
+ isBurgerMenuOpen.value = false;
+ } else {
+ isBurgerMenuOpen.value = true
+ }
+}
+
+const handleRoutePushed = (value: boolean) => {
+ isBurgerMenuOpen.value = value;
+ console.log('Menu Closed!');
+}
+
+const navigate = (path: string) => {
+ router.push(path)
+}
+
+</script>
+
+<template>
+ <div class="top-nav">
+ <div class="title-box">
+ <h1 class="title" @click="navigate('/homepage/home')">Sparesti</h1>
+ </div>
+ <div class="button-menu">
+ <img src="/src/components/icons/navigation/menu-burger.svg" v-if="!isBurgerMenuOpen" alt="Menu Options" class="burger-menu" @click="openBurgerMenu">
+ <img src="/src/components/icons/navigation/cross.svg" v-if="isBurgerMenuOpen" alt="Exit Options" class="exit-burger-menu" @click="openBurgerMenu">
+ <button class="profile-button" @click="navigate('/homepage/profile')">
+ <img src="/src/components/icons/navigation/user.svg" alt="Home Icon" class="profile-icon">
+ </button>
+ </div>
+ </div>
+ <DropDownMenu class="burger" v-if="isBurgerMenuOpen" @route-pushed="handleRoutePushed"></DropDownMenu>
+</template>
+
+<style scoped>
+.top-nav{
+ display: flex;
+ flex-direction: row;
+
+ height: 100%;
+ width: 100%;
+ padding: max(1.0%, 15px);
+
+ background-color: var(--color-header);
+ box-shadow: 0 4px 6px var(--color-shadow);
+}
+
+.title-box{
+ display: flex;
+ flex-direction: row;
+ place-items: start;
+ align-items: center;
+
+ width: 50%;
+ height: 100%;
+}
+
+.title{
+ color: var(--color-headerText);
+}
+
+.title:hover{
+ cursor: pointer;
+ transform: scale(1.05);
+}
+
+.button-menu{
+ display: flex;
+ flex-direction: row;
+
+ place-content: end;
+ place-items: center;
+
+ height: 100%;
+ width: 50%;
+ gap: 8.0%;
+}
+
+.profile-button{
+ height: 100%;
+ aspect-ratio: 1 / 1;
+ border-radius: 50%;
+ border: 0;
+ background-color: var(--color-headerText);
+}
+
+.profile-button:hover{
+ transform: scale(1.05);
+}
+
+.profile-icon{
+ height: 85%;
+ aspect-ratio: 1/1;
+}
+
+.burger-menu{
+ height: 80%;
+ aspect-ratio: 1 / 1;
+ filter: invert(1);
+}
+
+.exit-burger-menu{
+ height: 70%;
+ aspect-ratio: 1/1;
+ filter: invert(1);
+}
+
+.burger-menu:hover{
+ transform: scale(1.05);
+}
+
+.exit-burger-menu:hover{
+ transform: scale(1.05);
+}
+@media only screen and (min-width: 1000px){
+ .burger-menu{
+ display: none;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/HomePageView.vue b/src/views/HomePageView.vue
index c971863ef8f97f1ce1d7116325c041875d05c45e..ed7864f363a951802a5a74d7b038ce46762a8b28 100644
--- a/src/views/HomePageView.vue
+++ b/src/views/HomePageView.vue
@@ -1,11 +1,67 @@
<script setup lang="ts">
+import TopNav from '@/components/navigation/TopNav.vue'
+import SideNav from '@/components/navigation/SideNav.vue'
</script>
<template>
- <router-view></router-view>
+ <div class="home-page">
+ <div class="top">
+ <TopNav></TopNav>
+ </div>
+ <div class="main">
+ <div class="side-nav">
+ <SideNav></SideNav>
+ </div>
+ <div class="view-element">
+ <router-view></router-view>
+ </div>
+ </div>
+ </div>
</template>
<style scoped>
+.home-page{
+ display: flex;
+ flex-direction: column;
+ place-items: start;
+ align-items: start;
+ height: 100%;
+ width: 100%;
+}
+
+.top{
+ z-index: 1;
+ width: 100%;
+ height: 12%;
+ min-height: 75px;
+}
+
+.main{
+ display: flex;
+ flex-direction: row;
+ height: 100%;
+ width: 100%;
+ overflow-y: scroll;
+}
+
+.side-nav{
+ width: 15%;
+ min-height: 650px;
+ padding: 2.0% 1.0% 2.0% 1.0% ;
+ box-shadow: 0 2px 5px var(--color-shadow);
+}
+
+.view-element{
+ width: 85%;
+ padding: 2.0%;
+}
+
+@media only screen and (max-width: 1000px){
+ .side-nav{
+ display: none;
+ }
+}
+
</style>
\ No newline at end of file