Merge pull request 'Add footer #27' (#41) from feature/footer into main

Reviewed-on: #41
Reviewed-by: Johannes D. Vos

src/App.vue

@@ -16,12 +16,26 @@ limitations under the License.
 
 <script setup>
 import Navbar from './features/nav/components/Navbar.vue';
+import Footer from './features/footer/components/Footer.vue';
 </script>
 
 <template>
-    <div class="content-background">
     <Navbar />
 
+    <div class="main-content">
         <router-view />
     </div>
+
+    <Footer />
 </template>
+
+<style scoped>
+.main-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    gap: 60px;
+    flex-grow: 1;
+}
+</style>

src/features/footer/components/Footer.vue

@@ -0,0 +1,30 @@
+<script setup>
+const startYear = 2026
+const currentYear = new Date().getFullYear()
+
+const copyrightPeriod =
+    startYear === currentYear
+        ? `${currentYear}`
+        : `${startYear}-${currentYear}`
+
+
+</script>
+
+<template>
+    <footer class="global-footer">
+        <div class="copyright-note">
+            &copy; {{ copyrightPeriod }} Seekra
+        </div>
+    </footer>
+</template>
+
+<style scoped>
+.global-footer {
+    --padding-y: 22px;
+    display: flex;
+    justify-content: center;
+    padding: var(--padding-y);
+    background-color: #f2f2f2;
+    margin-top: var(--padding-y);
+}
+</style>

src/styles/common.css

@@ -21,4 +21,6 @@ body {
 
 #app {
     min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }

src/views/SearchView.vue

@@ -19,7 +19,6 @@ import Searchbar from '../features/search/components/Searchbar.vue'
 </script>
 
 <template>
-    <div class="main-content">
     <header class="global-header">
         <h1>Seekra</h1>
         <span class="slogan">
@@ -30,19 +29,9 @@ import Searchbar from '../features/search/components/Searchbar.vue'
     <form id="search-form">
         <Searchbar />
     </form>
-    </div>
 </template>
 
 <style scoped>
-.main-content {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    gap: 60px;
-}
-
 .global-header {
     text-align: center;
     display: flex;