diff --git a/components/Header/HeaderCTA.module.css b/components/Header/HeaderCTA.module.css index 89cdf4078f..598d83d73a 100644 --- a/components/Header/HeaderCTA.module.css +++ b/components/Header/HeaderCTA.module.css @@ -33,60 +33,3 @@ margin-right: var(--m-2); } } - -.downloadsLink { - text-decoration: none; - font-weight: 700; - font-size: var(--fs-text-md); - color: var(--color-code); - padding-left: 10px; - padding-right: 10px; - @media (--lg-scr) { - padding-left: var(--m-3); - padding-right: var(--m-3); - } - @media (--sm-scr) { - display: none; - } - &:focus, - &:hover { - color: var(--color-dark-purple); - } -} - -.searchWrapper { - padding: var(--m-1) var(--m-1) 0 var(--m-2); - @media (--sm-scr) { - display: none; - } -} - -.group { - position: relative; - padding-left: var(--m-2); - @media (--sm-scr) { - padding-left: 0; - width: 100%; - } -} - -.dropdown { - display: none; - z-index: 3000; - - @media (--sm-scr) { - position: relative; - width: 100%; - } - - @media (--md-scr) { - position: absolute; - top: var(--m-6); - right: var(--m-2); - min-width: 400px; - } - - &.visible { - display: block; - } -} diff --git a/components/Header/HeaderCTA.tsx b/components/Header/HeaderCTA.tsx index de215d629f..dce97c168b 100644 --- a/components/Header/HeaderCTA.tsx +++ b/components/Header/HeaderCTA.tsx @@ -1,75 +1,27 @@ -import cn from "classnames"; -import { useState, useCallback, useRef, MouseEvent } from "react"; -import { useClickAway } from "react-use"; import Button from "components/Button"; -import { - DropdownMenuOverlay, - DropdownMenuCTA, - DropdownMenuItemCTA, -} from "../DropdownMenu"; import styles from "./HeaderCTA.module.css"; const HeaderCTA = () => { - const ref = useRef(null); - - const [isSignInVisible, setIsSignInVisible] = useState(false); - const toggleSignIn = useCallback((e: MouseEvent) => { - e.preventDefault(); - - setIsSignInVisible((value) => !value); - }, []); - - useClickAway(ref, () => { - if (isSignInVisible) { - setIsSignInVisible(false); - } - }); - return ( - <> - {isSignInVisible && } -
-
- -
- - - - -
-
- -
- +
+ + +
); }; diff --git a/components/Menu/Category.module.css b/components/Menu/Category.module.css index e4c39d2fd9..147e97979a 100644 --- a/components/Menu/Category.module.css +++ b/components/Menu/Category.module.css @@ -19,7 +19,7 @@ align-items: center; justify-content: center; z-index: 3001; - width: 100%; + white-space: nowrap; min-width: 0; height: 80px; padding: 0 var(--m-2); diff --git a/components/Menu/Menu.module.css b/components/Menu/Menu.module.css index ec63f48b40..4886e87dff 100644 --- a/components/Menu/Menu.module.css +++ b/components/Menu/Menu.module.css @@ -28,3 +28,23 @@ max-width: none; } } + +.signInDropdown { + display: none; + z-index: 3000; + + @media (--sm-scr) { + position: relative; + width: 100%; + } + + @media (--md-scr) { + position: absolute; + left: 0; + min-width: 400px; + } + + &.visible { + display: block; + } +} diff --git a/components/Menu/Menu.tsx b/components/Menu/Menu.tsx index 18377f9514..db8e1ef800 100644 --- a/components/Menu/Menu.tsx +++ b/components/Menu/Menu.tsx @@ -1,10 +1,29 @@ -import { useState } from "react"; +import { useState, useRef, useCallback, MouseEvent } from "react"; +import { useClickAway } from "react-use"; import MenuCategory from "./Category"; import structure from "./structure"; import styles from "./Menu.module.css"; +import categoryStyles from "./Category.module.css"; +import cn from "classnames"; +import { DropdownMenuCTA, DropdownMenuItemCTA } from "../DropdownMenu"; const Menu = () => { const [openedCategoryId, setOpenedCategoryId] = useState(null); + const ref = useRef(null); + + const [isSignInVisible, setIsSignInVisible] = useState(false); + const toggleSignIn = useCallback((e: MouseEvent) => { + e.preventDefault(); + + setIsSignInVisible((value) => !value); + }, []); + + useClickAway(ref, () => { + if (isSignInVisible) { + setIsSignInVisible(false); + } + }); + return ( ); };