Merge pull request #22 from saitamau-maximum/fix/header-ui

fix: headerのfixed UI修正
saitamau-maximum · Sep 26, 2023 · 46fa4f3 · 46fa4f3
2 parents e19549c + a3783c6
commit 46fa4f3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/packages/components/src/header/Header.module.scss b/packages/components/src/header/Header.module.scss
@@ -3,6 +3,9 @@
   --header-side-padding: 2rem;
   --header-logo-height: 4rem;
   --header-action-area-gap: 1rem;
+  --header-height: calc(
+    var(--header-inner-vertical-padding) * 2 + var(--header-logo-height) + 1px
+  );
 }
 
 .sm {
@@ -18,6 +21,9 @@
   box-sizing: border-box;
   transition: border 0.2s ease-in-out;
   z-index: $z-index-header;
+  position: fixed;
+  top: 0;
+  left: 0;
 
   :global(.light) & {
     background: $color-gray-100;
@@ -40,12 +46,6 @@
   border-radius: 0 0 1.5rem 1.5rem;
 }
 
-.headerSticky {
-  position: sticky;
-  top: 0;
-  left: 0;
-}
-
 .headerInner {
   width: 100%;
   max-width: 70rem;
@@ -232,8 +232,9 @@ $nav-text-padding-x: 1rem;
 }
 
 .dropdownBackdrop {
-  position: absolute;
-  inset: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   z-index: $z-index-header - 1;

diff --git a/packages/components/src/header/Header.tsx b/packages/components/src/header/Header.tsx
@@ -32,7 +32,6 @@ export interface HeaderProps {
   children?: React.ReactNode;
   link?: LinkComponent;
   variant: 'lg' | 'md' | 'sm';
-  sticky?: boolean;
   dropdownOpen?: boolean;
   dropdownChildren?: React.ReactNode;
   onClose?: () => void;
@@ -43,7 +42,6 @@ export const Header = ({
   children,
   link,
   variant,
-  sticky,
   dropdownOpen,
   dropdownChildren,
   onClose,
@@ -58,7 +56,6 @@ export const Header = ({
         className={clsx(
           variant === 'sm' ? styles.sm : styles.notSm,
           styles.header,
-          sticky && styles.headerSticky,
           dropdownOpen && styles.open,
         )}
       >