fix: update and implement SkipLink component

Author: wackerow

src/components/MainArticle.tsx

@@ -3,7 +3,7 @@ import { Box, type BoxProps } from "@chakra-ui/react"
 import { MAIN_CONTENT_ID } from "@/lib/constants"
 
 const MainArticle = (props: BoxProps) => (
-  <Box as="article" id={MAIN_CONTENT_ID} tabIndex={-1} {...props} />
+  <Box as="article" id={MAIN_CONTENT_ID} scrollMarginTop={24} {...props} />
 )
 
 export default MainArticle

src/components/SkipLink.tsx

@@ -1,19 +1,16 @@
-import React from "react"
+import { useTranslation } from "next-i18next"
 import { Box } from "@chakra-ui/react"
 
-import { BaseLink } from "../components/Link"
+import { BaseLink } from "@/components/Link"
 
-import Translation from "./Translation"
+import { MAIN_CONTENT_ID } from "@/lib/constants"
 
-export interface IProps {
-  hrefId: string
-}
-
-export const SkipLink: React.FC<IProps> = ({ hrefId }) => {
+export const SkipLink = () => {
+  const { t } = useTranslation()
   return (
     <Box bg="primary.base">
       <BaseLink
-        href={hrefId}
+        href={"#" + MAIN_CONTENT_ID}
         lineHeight="taller"
         position="absolute"
         top="-12"
@@ -23,7 +20,7 @@ export const SkipLink: React.FC<IProps> = ({ hrefId }) => {
         _hover={{ textDecoration: "none" }}
         _focus={{ position: "static" }}
       >
-        <Translation id="skip-to-main-content" />
+        {t("skip-to-main-content")}
       </BaseLink>
     </Box>
   )

src/layouts/RootLayout.tsx

@@ -8,6 +8,7 @@ import type { Root } from "@/lib/types"
 import FeedbackWidget from "@/components/FeedbackWidget"
 import Footer from "@/components/Footer"
 import Nav from "@/components/Nav"
+import { SkipLink } from "@/components/SkipLink"
 import TranslationBanner from "@/components/TranslationBanner"
 import TranslationBannerLegal from "@/components/TranslationBannerLegal"
 
@@ -47,6 +48,8 @@ export const RootLayout = ({
 
   return (
     <Container mx="auto" maxW={oldTheme.variables.maxPageWidth}>
+      <SkipLink />
+
       <Nav path={asPath} />
 
       <TranslationBanner