SkipToContent not fixed

Author: AntoLC

src/frontend/apps/impress/src/components/SkipToContent.tsx

@@ -48,13 +48,13 @@ export const SkipToContent = () => {
       style={{
         opacity: isVisible ? 1 : 0,
         pointerEvents: isVisible ? 'auto' : 'none',
-        transition: 'opacity 0.3s ease-in-out',
-        position: 'fixed',
-        top: 'var(--c--theme--spacings--2xs)',
+        // transition: 'opacity 0.3s ease-in-out',
+        //position: 'fixed',
+        //top: 'var(--c--theme--spacings--2xs)',
         // padding header + logo(32px) + gap(3xs≈4px) + text "Docs"(≈70px) + 12px
-        left: 'calc(var(--c--theme--spacings--base) + 32px + var(--c--theme--spacings--3xs) + 70px + 12px)',
-        zIndex: 9999,
-        whiteSpace: 'nowrap',
+        // left: 'calc(var(--c--theme--spacings--base) + 32px + var(--c--theme--spacings--3xs) + 70px + 12px)',
+        // zIndex: 9999,
+        // whiteSpace: 'nowrap',
       }}
     >
       {t('Go to content')}

src/frontend/apps/impress/src/features/header/components/Header.tsx

@@ -25,7 +25,6 @@ export const Header = () => {
 
   return (
     <>
-      <SkipToContent />
       <Box
         as="header"
         role="banner"
@@ -46,42 +45,45 @@ export const Header = () => {
         className="--docs--header"
       >
         {!isDesktop && <ButtonTogglePanel />}
-        <StyledLink
-          href="/"
-          data-testid="header-logo-link"
-          aria-label={t('Back to homepage')}
-          $css={css`
-            outline: none;
-            &:focus-visible {
-              box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400) !important;
-              border-radius: 4px;
-            }
-          `}
-        >
-          <Box
-            $align="center"
-            $gap={spacingsTokens['3xs']}
-            $direction="row"
-            $position="relative"
-            $height="fit-content"
-            $margin={{ top: 'auto' }}
+        <Box $direction="row" $align="center" $gap="2rem">
+          <StyledLink
+            href="/"
+            data-testid="header-logo-link"
+            aria-label={t('Back to homepage')}
+            $css={css`
+              outline: none;
+              &:focus-visible {
+                box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400) !important;
+                border-radius: 4px;
+              }
+            `}
           >
-            <Image
-              className="c__image-system-filter"
-              data-testid="header-icon-docs"
-              src={logo?.src || '/assets/icon-docs.svg'}
-              alt=""
-              width={0}
-              height={0}
-              style={{
-                width: logo?.width || 32,
-                height: logo?.height || 'auto',
-              }}
-              priority
-            />
-            <Title headingLevel="h1" aria-hidden="true" />
-          </Box>
-        </StyledLink>
+            <Box
+              $align="center"
+              $gap={spacingsTokens['3xs']}
+              $direction="row"
+              $position="relative"
+              $height="fit-content"
+              $margin={{ top: 'auto' }}
+            >
+              <Image
+                className="c__image-system-filter"
+                data-testid="header-icon-docs"
+                src={logo?.src || '/assets/icon-docs.svg'}
+                alt=""
+                width={0}
+                height={0}
+                style={{
+                  width: logo?.width || 32,
+                  height: logo?.height || 'auto',
+                }}
+                priority
+              />
+              <Title headingLevel="h1" aria-hidden="true" />
+            </Box>
+          </StyledLink>
+          <SkipToContent />
+        </Box>
         {!isDesktop ? (
           <Box $direction="row" $gap={spacingsTokens['sm']}>
             <LaGaufre />