feat: let Link komponent be able to handle onclick functions. let hea…

…der pass mobile menu state to parent component, and some small css changes
felleslosninger · Jul 4, 2023 · 3a3eba0 · 3a3eba0
1 parent 4f02431
commit 3a3eba0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 18 deletions.
diff --git a/packages/react/src/components/Header/Header.module.css b/packages/react/src/components/Header/Header.module.css
@@ -1,5 +1,7 @@
 .header {
   height: 80px;
+  background: white;
+  z-index: 10000;
 }
 
 @media only screen and (max-width: 768px) {
@@ -13,18 +15,23 @@
   align-items: center;
   justify-content: space-between;
   min-height: 100%;
-  border-bottom: 1px solid var(--fds-semantic-surface-neutral-subtle-hover);
+  z-index: 1;
+  background-color: white;
 }
 
 .mobileContainer {
+  border-top: 1px solid var(--fds-semantic-surface-neutral-subtle-hover);
   padding: 0;
+  background: white;
 }
 
 .overlay {
   background: rgba(0 0 0 / 0.5);
   position: fixed;
   height: 100%;
   width: 100%;
+  bottom: 0;
+  z-index: -1;
 }
 
 .left {
@@ -44,6 +51,7 @@
 }
 
 .bottom {
+  border-top: 1px solid var(--fds-semantic-surface-neutral-subtle-hover);
   width: 100%;
   display: flex;
   align-items: center;

diff --git a/packages/react/src/components/Header/Header.tsx b/packages/react/src/components/Header/Header.tsx
@@ -26,7 +26,8 @@ interface HeaderProps {
         >
       >;
   className?: string;
-  closeMenu?: false;
+  closeMenu?: boolean;
+  onMenuOpenChange?: (isOpen: boolean) => void;
 }
 
 type HeaderLeftProps = {
@@ -52,9 +53,14 @@ type HeaderMobileProps = {
   children: React.ReactNode;
 };
 
-const Header = ({ children, className, closeMenu }: HeaderProps) => {
+const Header = ({
+  children,
+  className,
+  closeMenu,
+  onMenuOpenChange,
+}: HeaderProps) => {
   const breakpoint = 768;
-  const [isMobile, setIsMobile] = useState(Boolean);
+  const [isMobile, setIsMobile] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   const handleResize = () => {
@@ -66,22 +72,12 @@ const Header = ({ children, className, closeMenu }: HeaderProps) => {
   };
 
   useEffect(() => {
-    const handleLinkClick = () => {
-      setIsMenuOpen(false);
-    };
     if (isMenuOpen) {
-      const links = document.querySelectorAll('a');
-      links.forEach((link) => {
-        link.addEventListener('click', handleLinkClick);
-      });
-
-      return () => {
-        links.forEach((link) => {
-          link.removeEventListener('click', handleLinkClick);
-        });
-      };
+      onMenuOpenChange && onMenuOpenChange(true);
+    } else {
+      onMenuOpenChange && onMenuOpenChange(false);
     }
-  }, [isMenuOpen]);
+  }, [isMenuOpen, onMenuOpenChange]);
 
   useEffect(() => {
     if (closeMenu) {

diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx
@@ -12,6 +12,7 @@ interface LinkProps {
   iconAfter?: React.ReactNode;
   as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
   to?: string;
+  onClick?: () => void; // Legger til typen for onClick-prop
 }
 
 const Link = ({
@@ -23,10 +24,17 @@ const Link = ({
   iconAfter,
   as,
   to,
+  onClick,
   ...rest
 }: LinkProps) => {
   const Component = as || 'a';
 
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+
   return (
     <Component
       className={cn(
@@ -35,6 +43,7 @@ const Link = ({
         className,
       )}
       href={href}
+      onClick={handleClick} // Legger til onClick-hendelsesbehandleren
       {...rest}
       to={to}
     >