From 19e273db40807251e87c079a833bd589cf76c8d2 Mon Sep 17 00:00:00 2001
From: Gabriel Cozma <me@gabs.eu.org>
Date: Tue, 6 Aug 2024 20:13:34 +0300
Subject: [PATCH] feat[close #64]: add Skip to Main Content link

---
 public/assets/css/components/navigationBar.css |  4 ++--
 public/assets/css/components/skipLink.css      | 16 ++++++++++++++++
 public/assets/css/index.css                    |  3 ++-
 src/layouts/Main.vue                           | 16 +++++++++++++---
 src/layouts/Page.vue                           | 13 +++++++++++--
 5 files changed, 44 insertions(+), 8 deletions(-)
 create mode 100644 public/assets/css/components/skipLink.css

diff --git a/public/assets/css/components/navigationBar.css b/public/assets/css/components/navigationBar.css
index b852a98e..1a3a7a89 100644
--- a/public/assets/css/components/navigationBar.css
+++ b/public/assets/css/components/navigationBar.css
@@ -67,7 +67,7 @@
 }
 
 /*.navigationBar ul li.active {
-    background-color: var(--navbar-active-background-color); 
+    background-color: var(--navbar-active-background-color);
 }*/
 
 .navigationBar ul li.active a,
@@ -84,4 +84,4 @@
     .navigationBar {
         display: none;
     }
-}
\ No newline at end of file
+}
diff --git a/public/assets/css/components/skipLink.css b/public/assets/css/components/skipLink.css
new file mode 100644
index 00000000..d107b8c4
--- /dev/null
+++ b/public/assets/css/components/skipLink.css
@@ -0,0 +1,16 @@
+.skip-link {
+    position: absolute;
+    transform: translateY(-200%);
+    margin-inline-start: 12px;
+    transition: transform .2s ease-in-out;
+    padding: 8px;
+    border-radius: 30px;
+    font-size: 19px;
+    cursor: pointer;
+    z-index: 3;
+    color: var(--text-color);
+}
+
+.skip-link:focus {
+    transform: translateY(0);
+}
diff --git a/public/assets/css/index.css b/public/assets/css/index.css
index 441cee88..e7dfb924 100644
--- a/public/assets/css/index.css
+++ b/public/assets/css/index.css
@@ -29,6 +29,7 @@
 @import url('components/siteFooter.css');
 @import url('components/splitter.css');
 @import url('components/spacer.css');
+@import url('components/skipLink.css');
 @import url('components/text.css');
 @import url('components/table.css');
 @import url('components/timeline.css');
@@ -39,4 +40,4 @@
 @import url('colors/default.css');
 @import url('colors/dark.css');
 @import url('colors/classes.css');
-@import url('print.css');
\ No newline at end of file
+@import url('print.css');
diff --git a/src/layouts/Main.vue b/src/layouts/Main.vue
index 522295e4..7a15c42b 100644
--- a/src/layouts/Main.vue
+++ b/src/layouts/Main.vue
@@ -1,15 +1,25 @@
 <template>
+    <a href="#content" class="skip-link" target="_top" @click.prevent="scrollToContent">Skip to main content</a>
     <topbar />
-    <main>
+    <main id="content" ref="content">
         <router-view />
     </main>
     <site-footer />
 </template>
-  
+
 <script lang="ts">
 import { defineComponent } from "vue";
 
 export default defineComponent({
     name: "layout-main",
+
+    methods: {
+        scrollToContent() {
+          const element = this.$refs.content as HTMLElement;
+          if (element) {
+            element.scrollIntoView({ behavior: 'smooth' });
+          }
+        },
+    },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/layouts/Page.vue b/src/layouts/Page.vue
index b0738fe2..d833e6ba 100644
--- a/src/layouts/Page.vue
+++ b/src/layouts/Page.vue
@@ -1,7 +1,8 @@
 <template>
     <div>
+        <a href="#content" class="skip-link" target="_top" @click.prevent="scrollToContent">Skip to main content</a>
         <topbar />
-        <main class="page">
+        <main class="page" id="content" ref="content">
             <div class="page-wrapper container">
                 <section class="page-header">
                     <div class="page-nav" v-if="parentRoute?.name">
@@ -21,7 +22,7 @@
         <site-footer />
     </div>
 </template>
-  
+
 <script lang="ts">
 import { defineComponent } from "vue";
 
@@ -38,5 +39,13 @@ export default defineComponent({
             return parentRoute || null;
         },
     },
+    methods: {
+        scrollToContent() {
+          const element = this.$refs.content as HTMLElement;
+          if (element) {
+            element.scrollIntoView({ behavior: 'smooth' });
+          }
+        },
+    },
 });
 </script>