init: add skip-to-main-content shortcut

apps/site/components/withNavBar.tsx

@@ -1,28 +1,51 @@
 'use client';
 
+import classNames from 'classnames';
 import { useLocale } from 'next-intl';
 import { useTheme } from 'next-themes';
-import type { FC } from 'react';
+import type { FC, KeyboardEvent } from 'react';
+import { useState } from 'react';
 
 import NavBar from '@/components/Containers/NavBar';
 import WithBanner from '@/components/withBanner';
 import { useSiteNavigation } from '@/hooks';
 import { useRouter, usePathname } from '@/navigation.mjs';
 import { availableLocales } from '@/next.locales.mjs';
 
+import Button from './Common/Button';
+
 const WithNavBar: FC = () => {
   const { navigationItems } = useSiteNavigation();
   const { resolvedTheme, setTheme } = useTheme();
   const { replace } = useRouter();
   const pathname = usePathname();
+  const [tabPressed, setTabPressed] = useState(false);
+  const classNameOnTabPress = classNames(
+    '!fixed left-0 m-3 -translate-y-16 p-3 transition-all focus:translate-y-0',
+    { '-translate-y-16': !tabPressed, 'translate-y-0': tabPressed }
+  );
 
   const locale = useLocale();
 
   const toggleCurrentTheme = () =>
     setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
 
+  const handleTabPress = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Tab') {
+      setTabPressed(prev => !prev);
+    }
+  };
+
   return (
-    <div>
+    <div onKeyDown={handleTabPress}>
+      <Button
+        className={classNameOnTabPress}
+        aria-hidden={!tabPressed}
+        href="#main"
+      >
+        Skip to main content
+      </Button>
+
       <WithBanner section="index" />
 
       <NavBar