Merge pull request #179 from ethereum/nav

Fix Nav TODO comments

Author: corwintines

src/components/Nav/Dropdown.tsx

@@ -4,12 +4,10 @@ import { Box, Fade, Flex, Icon, ListItem } from "@chakra-ui/react"
 
 import { BaseLink, type LinkProps } from "../Link"
 
-// TODO
-// import { useOnClickOutside } from "../../hooks/useOnClickOutside"
-// import { getDirection } from "../../utils/translations"
-// import { Lang } from "../../utils/languages"
 import { ISection } from "./types"
 
+import { useOnClickOutside } from "@/hooks/useOnClickOutside"
+
 const NavLink = (props: LinkProps) => (
   <BaseLink
     color="text200"
@@ -54,14 +52,12 @@ const NavDropdown: React.FC<IProps> & {
 } = ({ children, section, hasSubNav }) => {
   const [isOpen, setIsOpen] = useState(false)
 
-  // const { locale } = useRouter()
   const ref = createRef<HTMLLIElement>()
 
   const toggle = () => setIsOpen((isOpen) => !isOpen)
   const close = () => setIsOpen(false)
 
-  // TODO
-  // useOnClickOutside(ref, () => setIsOpen(false))
+  useOnClickOutside(ref, () => setIsOpen(false))
 
   // Toggle on `enter` key
   const onKeyDownHandler = (e: React.KeyboardEvent<HTMLElement>): void => {

src/components/Nav/index.tsx

@@ -38,8 +38,7 @@ const Nav: FC<IProps> = ({ path }) => {
       <Flex
         ref={navWrapperRef}
         as="nav"
-        // TODO
-        // aria-label={t("nav-primary")}
+        aria-label={t("nav-primary")}
         bg="background.base"
         borderBottom="1px"
         borderColor="rgba(0, 0, 0, 0.1)"
@@ -56,8 +55,7 @@ const Nav: FC<IProps> = ({ path }) => {
         >
           <BaseLink
             to="/"
-            // TODO
-            // aria-label={t("home")}
+            aria-label={t("home")}
             display="inline-flex"
             alignItems="center"
             textDecor="none"
@@ -127,8 +125,7 @@ const Nav: FC<IProps> = ({ path }) => {
       {shouldShowSubNav && (
         <Flex
           as="nav"
-          // TODO
-          // aria-label={t("nav-developers")}
+          aria-label={t("nav-developers")}
           display={{ base: "none", lg: "flex" }}
           bg="ednBackground"
           borderBottom="1px"

src/components/Nav/useNav.ts

@@ -3,10 +3,9 @@ import { cloneDeep } from "lodash"
 import { useTranslation } from "next-i18next"
 import { useColorMode } from "@chakra-ui/react"
 
-import { IItem, ISections } from "./types"
+import { trackCustomEvent } from "@/lib/utils/matomo"
 
-// TODO: add trackCustomEvent when util is migrated
-// import { trackCustomEvent } from "../../utils/matomo"
+import { IItem, ISections } from "./types"
 
 export const useNav = ({ path }: { path: string }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
@@ -294,12 +293,11 @@ export const useNav = ({ path }: { path: string }) => {
 
   const changeColorMode = () => {
     toggleColorMode()
-    // TODO: add trackCustomEvent when util is migrated
-    // trackCustomEvent({
-    //   eventCategory: "nav bar",
-    //   eventAction: "click",
-    //   eventName: isDarkTheme ? "light mode" : "dark mode", // This will be inverted as the state is changing
-    // })
+    trackCustomEvent({
+      eventCategory: "nav bar",
+      eventAction: "click",
+      eventName: isDarkTheme ? "light mode" : "dark mode", // This will be inverted as the state is changing
+    })
   }
 
   const mobileNavProps = {