Skip to content

Commit c6dced5

Browse files
pettinarippettinarip
committed
cleanup
1 parent 004cbb0 commit c6dced5

File tree

8 files changed

+110
-48
lines changed

8 files changed

+110
-48
lines changed

‎src/components/Nav/Menu/ItemContent.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { cleanPath } from "@/lib/utils/url"
55

66
import type { Level, NavItem } from "../types"
77

8-
import { useNavMenuColors } from "@/hooks/useNavMenuColors"
8+
import { useNavMenuColors } from "@/hooks/useNavMenuColorsTw"
99

1010
type ItemProps = {
1111
item: NavItem

‎src/components/Nav/Menu/useSubMenu.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { MotionProps } from "framer-motion"
22
import { useRouter } from "next/router"
33

4-
import { useNavMenuColors } from "@/hooks/useNavMenuColors"
4+
import { useNavMenuColors } from "@/hooks/useNavMenuColorsTw"
55
import { useRtlFlip } from "@/hooks/useRtlFlip"
66

77
const PADDING = 4 // Chakra-UI space token

‎src/components/Nav/Mobile/FooterButton.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const FooterButton = forwardRef<HTMLButtonElement, FooterButtonProps>(
1313
ref={ref}
1414
className="flex h-fit flex-col items-center px-1 text-body"
1515
variant="ghost"
16-
// sx={{ span: { m: 0 } }}
1716
{...props}
1817
>
1918
<Icon className="h-6 w-6" />

‎src/components/Nav/Mobile/LvlAccordion.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import type { Level, NavItem, NavSectionKey } from "../types"
1818

1919
import ExpandIcon from "./ExpandIcon"
2020

21-
import { useNavMenuColors } from "@/hooks/useNavMenuColors"
21+
import { useNavMenuColorsTw } from "@/hooks/useNavMenuColorsTw"
2222

2323
type LvlAccordionProps = {
2424
lvl: Level
@@ -34,7 +34,7 @@ const LvlAccordion = ({
3434
onToggle,
3535
}: LvlAccordionProps) => {
3636
const { asPath, locale } = useRouter()
37-
const menuColors = useNavMenuColors()
37+
const menuColors = useNavMenuColorsTw()
3838
const [value, setValue] = useState("")
3939

4040
return (
@@ -44,8 +44,7 @@ const LvlAccordion = ({
4444
const isActivePage = isLink && cleanPath(asPath) === action.href
4545
const isExpanded = value === label
4646

47-
const Heading = `h${lvl + 1}` as "h2" | "h3" | "h4" | "h5"
48-
const headingMap = {
47+
const nestedAccordionSpacingMap = {
4948
2: "ps-8",
5049
3: "ps-12",
5150
4: "ps-16",
@@ -65,7 +64,7 @@ const LvlAccordion = ({
6564
<Button
6665
className={cn(
6766
"flex h-full justify-start whitespace-normal px-4 py-4 text-start text-body no-underline",
68-
headingMap[lvl + 2]
67+
nestedAccordionSpacingMap[lvl + 2]
6968
)}
7069
variant="ghost"
7170
asChild
@@ -107,6 +106,7 @@ const LvlAccordion = ({
107106
</AccordionItem>
108107
)
109108

109+
const Heading = `h${lvl + 1}` as "h2" | "h3" | "h4" | "h5"
110110
return (
111111
<AccordionItem
112112
key={label}
@@ -130,8 +130,8 @@ const LvlAccordion = ({
130130
<AccordionPrimitive.Trigger
131131
className={cn(
132132
"group flex flex-1 items-center justify-start gap-2 px-4 py-4 text-start font-medium transition-all hover:bg-background-highlight focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover md:px-4 [&[data-state=open]]:bg-background-highlight [&[data-state=open]]:text-primary-high-contrast",
133-
headingMap[lvl],
134-
menuColors.body
133+
menuColors.body,
134+
nestedAccordionSpacingMap[lvl]
135135
)}
136136
>
137137
<ExpandIcon isOpen={isExpanded} />

‎src/components/Nav/Mobile/MenuBody.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import type { Level, NavSections } from "../types"
1717
import ExpandIcon from "./ExpandIcon"
1818
import LvlAccordion from "./LvlAccordion"
1919

20-
import { useNavMenuColors } from "@/hooks/useNavMenuColors"
20+
import { useNavMenuColorsTw } from "@/hooks/useNavMenuColorsTw"
2121

2222
type MenuBodyProps = {
2323
onToggle: () => void
@@ -26,7 +26,7 @@ type MenuBodyProps = {
2626

2727
const MenuBody = ({ linkSections, onToggle }: MenuBodyProps) => {
2828
const { locale } = useRouter()
29-
const menuColors = useNavMenuColors()
29+
const menuColors = useNavMenuColorsTw()
3030
const [value, setValue] = useState("")
3131

3232
return (
@@ -42,7 +42,11 @@ const MenuBody = ({ linkSections, onToggle }: MenuBodyProps) => {
4242
const isExpanded = value === key
4343

4444
return (
45-
<AccordionItem key={key} value={key}>
45+
<AccordionItem
46+
key={key}
47+
value={key}
48+
className="border-b border-body-light first:border-t"
49+
>
4650
<AccordionPrimitive.Header
4751
className="flex"
4852
onClick={() => {
@@ -64,7 +68,7 @@ const MenuBody = ({ linkSections, onToggle }: MenuBodyProps) => {
6468
)}
6569
>
6670
<ExpandIcon isOpen={isExpanded} />
67-
<span className="flex-1 text-start text-lg font-bold leading-tight">
71+
<span className="flex-1 text-start text-lg font-bold leading-none">
6872
{label}
6973
</span>
7074
</AccordionPrimitive.Trigger>

‎src/components/Nav/Mobile/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const MobileNavMenu = ({
4949
</div>
5050

5151
{/* FOOTER ELEMENTS: SEARCH, LIGHT/DARK, LANGUAGES */}
52-
<SheetFooter className="h-[108px] justify-center border-t border-disabled px-4 py-0">
52+
<SheetFooter className="h-[108px] justify-center border-t border-body-light px-4 py-0">
5353
<MenuFooter
5454
onToggle={onToggle}
5555
toggleSearch={toggleSearch}

‎src/hooks/useNavMenuColors.ts

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { useTheme } from "next-themes"
2-
31
import { Level } from "@/components/Nav/types"
42

3+
import useColorModeValue from "./useColorModeValue"
4+
55
type LevelColors = {
66
subtext: string
77
background: string
@@ -16,36 +16,37 @@ type NavMenuColors = {
1616
lvl: Record<Level, LevelColors>
1717
}
1818

19-
export const useNavMenuColors = (): NavMenuColors => {
20-
const { theme } = useTheme()
21-
const isLight = theme === "light"
19+
/**
20+
* Hook to provide colors for the mobile navigation menu.
21+
*
22+
* TODO: replace with useNavMenuColorsTw when the desktop menu is migrated.
23+
*/
2224

23-
return {
24-
body: "text-body",
25-
stroke: "border-body-light",
26-
highlight: "text-primary",
27-
active: "text-primary-high-contrast",
28-
lvl: {
29-
1: {
30-
subtext: isLight ? "text-gray-400" : "text-gray-400",
31-
background: isLight ? "bg-white" : "bg-black",
32-
activeBackground: isLight ? "bg-gray-150" : "bg-gray-700",
33-
},
34-
2: {
35-
subtext: isLight ? "text-gray-400" : "text-gray-300",
36-
background: isLight ? "bg-gray-150" : "bg-gray-700",
37-
activeBackground: isLight ? "bg-gray-200" : "bg-gray-600",
38-
},
39-
3: {
40-
subtext: isLight ? "text-gray-500" : "text-gray-300",
41-
background: isLight ? "bg-gray-200" : "bg-gray-600",
42-
activeBackground: isLight ? "bg-gray-100" : "bg-gray-700",
43-
},
44-
4: {
45-
subtext: isLight ? "text-gray-700" : "text-gray-300",
46-
background: isLight ? "bg-gray-300" : "bg-gray-700",
47-
activeBackground: isLight ? "bg-gray-200" : "bg-gray-800",
48-
},
25+
export const useNavMenuColors = (): NavMenuColors => ({
26+
body: "body.base",
27+
stroke: "body.light",
28+
highlight: "primary.base",
29+
active: "primary.highContrast",
30+
lvl: {
31+
1: {
32+
subtext: useColorModeValue("gray.400", "gray.400"),
33+
background: useColorModeValue("white", "black"),
34+
activeBackground: useColorModeValue("gray.150", "gray.700"),
4935
},
50-
}
51-
}
36+
2: {
37+
subtext: useColorModeValue("gray.400", "gray.300"),
38+
background: useColorModeValue("gray.150", "gray.700"),
39+
activeBackground: useColorModeValue("gray.200", "gray.600"),
40+
},
41+
3: {
42+
subtext: useColorModeValue("gray.500", "gray.300"),
43+
background: useColorModeValue("gray.200", "gray.600"),
44+
activeBackground: useColorModeValue("gray.100", "gray.700"),
45+
},
46+
4: {
47+
subtext: useColorModeValue("gray.700", "gray.300"),
48+
background: useColorModeValue("gray.300", "gray.700"),
49+
activeBackground: useColorModeValue("gray.200", "gray.800"),
50+
},
51+
},
52+
})

‎src/hooks/useNavMenuColorsTw.ts

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { useTheme } from "next-themes"
2+
3+
import { Level } from "@/components/Nav/types"
4+
5+
type LevelColors = {
6+
subtext: string
7+
background: string
8+
activeBackground: string
9+
}
10+
11+
type NavMenuColors = {
12+
body: string
13+
border: string
14+
stroke: string
15+
highlight: string
16+
active: string
17+
lvl: Record<Level, LevelColors>
18+
}
19+
20+
/**
21+
* Hook to provide colors for the mobile navigation menu.
22+
*
23+
* TODO: rename to useNavMenuColors when the desktop menu is migrated.
24+
*/
25+
export const useNavMenuColorsTw = (): NavMenuColors => {
26+
const { theme } = useTheme()
27+
const isLight = theme === "light"
28+
29+
return {
30+
body: "text-body",
31+
border: "border-body-light",
32+
stroke: "stroke-body-light",
33+
highlight: "text-primary",
34+
active: "text-primary-high-contrast",
35+
lvl: {
36+
1: {
37+
subtext: isLight ? "text-gray-400" : "text-gray-400",
38+
background: isLight ? "bg-white" : "bg-black",
39+
activeBackground: isLight ? "bg-gray-150" : "bg-gray-700",
40+
},
41+
2: {
42+
subtext: isLight ? "text-gray-400" : "text-gray-300",
43+
background: isLight ? "bg-gray-150" : "bg-gray-700",
44+
activeBackground: isLight ? "bg-gray-200" : "bg-gray-600",
45+
},
46+
3: {
47+
subtext: isLight ? "text-gray-500" : "text-gray-300",
48+
background: isLight ? "bg-gray-200" : "bg-gray-600",
49+
activeBackground: isLight ? "bg-gray-100" : "bg-gray-700",
50+
},
51+
4: {
52+
subtext: isLight ? "text-gray-700" : "text-gray-300",
53+
background: isLight ? "bg-gray-300" : "bg-gray-700",
54+
activeBackground: isLight ? "bg-gray-200" : "bg-gray-800",
55+
},
56+
},
57+
}
58+
}

0 commit comments

Comments
 (0)