Skip to content

Commit 61fa1c9

Browse files
anyulledanyulled
committed
chore: improve readability
1 parent 6826fdd commit 61fa1c9

File tree

1 file changed

+142
-143
lines changed

1 file changed

+142
-143
lines changed

‎src/components/Navigation/Navigation.tsx‎

Lines changed: 142 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -1,166 +1,165 @@
1-
import {AnimatePresence} from "framer-motion";
2-
import {FC, useEffect, useState} from "react";
3-
import {MOBILE_BREAKPOINT} from "../../constants/BreakPoints";
4-
import {useLocation, useNavigate} from "react-router";
1+
import { AnimatePresence } from "framer-motion";
2+
import { FC, useEffect, useState } from "react";
3+
import { BIG_BREAKPOINT, MOBILE_BREAKPOINT } from "../../constants/BreakPoints";
4+
import { useLocation, useNavigate } from "react-router";
55
import Breadcrumbs from "./Breadcrumbs";
66
import CloseIcon from "../../assets/images/CloseIcon.svg";
77
import NavigationLogo from "../../assets/images/devBcn.png";
8-
import {ROUTE_HOME, ROUTE_HOME_ALTERNATE} from "../../constants/routes";
8+
import { ROUTE_HOME, ROUTE_HOME_ALTERNATE } from "../../constants/routes";
99
import TicketsImage from "../../assets/images/TicketsImage.svg";
10-
import {navigationItems2025, subMenuItems2025} from "./NavigationData";
10+
import { navigationItems2025, subMenuItems2025 } from "./NavigationData";
1111
import {
12-
navigationItems2023,
13-
subMenuItems2023,
12+
navigationItems2023,
13+
subMenuItems2023,
1414
} from "../../2023/Navigation/NavigationData2023";
15-
import {useWindowSize} from "react-use";
15+
import { useWindowSize } from "react-use";
1616
import {
17-
StyledClipPath,
18-
StyledHeader,
19-
StyledHeaderLogo,
20-
StyledHeaderWrapper,
21-
StyledLink,
22-
StyledMenuIcon,
23-
StyledNavigation,
24-
StyledNavigationContainer,
25-
StyledNavigationLogo,
26-
StyledNavLinkHighlightedImage,
27-
StyledTicketLink,
17+
StyledClipPath,
18+
StyledHeader,
19+
StyledHeaderLogo,
20+
StyledHeaderWrapper,
21+
StyledLink,
22+
StyledMenuIcon,
23+
StyledNavigation,
24+
StyledNavigationContainer,
25+
StyledNavigationLogo,
26+
StyledNavLinkHighlightedImage,
27+
StyledTicketLink,
2828
} from "./Style.Navigation";
29-
import {HorizontalMenu} from "./HorizontalMenu";
30-
import {HamburgerMenu} from "./HamburgerMenu";
29+
import { HorizontalMenu } from "./HorizontalMenu";
30+
import { HamburgerMenu } from "./HamburgerMenu";
3131
import {
32-
navigationItems2024,
33-
subMenuItems2024
32+
navigationItems2024,
33+
subMenuItems2024,
3434
} from "../../2024/Navigation/NavigationData";
3535

3636
const Navigation: FC<React.PropsWithChildren<unknown>> = () => {
37-
const {width} = useWindowSize();
38-
const [isOpened, setIsOpened] = useState(false);
39-
const [navItems, setNavItems] = useState(navigationItems2025);
40-
const [subNavItems, setSubNavItems] = useState(subMenuItems2025);
41-
const {pathname} = useLocation();
42-
const navigate = useNavigate();
43-
const handleLogoClick = () => {
44-
navigate(ROUTE_HOME);
45-
};
46-
const handleSetMenu = () => {
47-
setIsOpened(!isOpened);
48-
};
49-
const isHomePage = () => {
50-
return pathname === ROUTE_HOME || pathname === ROUTE_HOME_ALTERNATE;
51-
};
37+
const { width } = useWindowSize();
38+
const [isOpened, setIsOpened] = useState(false);
39+
const [navItems, setNavItems] = useState(navigationItems2025);
40+
const [subNavItems, setSubNavItems] = useState(subMenuItems2025);
41+
const { pathname } = useLocation();
42+
const navigate = useNavigate();
43+
const handleLogoClick = () => {
44+
navigate(ROUTE_HOME);
45+
};
46+
const handleSetMenu = () => {
47+
setIsOpened(!isOpened);
48+
};
49+
const isHomePage = () => {
50+
return pathname === ROUTE_HOME || pathname === ROUTE_HOME_ALTERNATE;
51+
};
5252

53-
useEffect(() => {
54-
const navMapping = {
55-
"/2024": {
56-
navItems: navigationItems2024,
57-
subNavItems: subMenuItems2024
58-
},
59-
"/2023": {
60-
navItems: navigationItems2023,
61-
subNavItems: subMenuItems2023
62-
},
63-
default: {
64-
navItems: navigationItems2025,
65-
subNavItems: subMenuItems2025
66-
},
67-
};
68-
69-
const {
70-
navItems,
71-
subNavItems
72-
} = Object.entries(navMapping).find(([key]) => pathname.startsWith(key))?.[1] || navMapping.default;
53+
useEffect(() => {
54+
const navMapping = {
55+
"/2024": {
56+
navItems: navigationItems2024,
57+
subNavItems: subMenuItems2024,
58+
},
59+
"/2023": {
60+
navItems: navigationItems2023,
61+
subNavItems: subMenuItems2023,
62+
},
63+
default: {
64+
navItems: navigationItems2025,
65+
subNavItems: subMenuItems2025,
66+
},
67+
};
7368

74-
setNavItems(navItems);
75-
setSubNavItems(subNavItems);
76-
}, [pathname]);
69+
const { navItems, subNavItems } =
70+
Object.entries(navMapping).find(([key]) =>
71+
pathname.startsWith(key),
72+
)?.[1] || navMapping.default;
7773

74+
setNavItems(navItems);
75+
setSubNavItems(subNavItems);
76+
}, [pathname]);
7877

79-
const getTicketURL = (): string => {
80-
if (pathname.startsWith("/2023")) {
81-
return "https://tickets.devbcn.com/event/devbcn-2023";
82-
}
83-
if (pathname.startsWith("/2024")) {
84-
return "https://tickets.devbcn.com/event/devbcn-2024";
85-
}
86-
return "https://tickets.devbcn.com/event/devbcn-2025";
78+
const getTicketURL = (): string => {
79+
if (pathname.startsWith("/2023")) {
80+
return "https://tickets.devbcn.com/event/devbcn-2023";
81+
}
82+
if (pathname.startsWith("/2024")) {
83+
return "https://tickets.devbcn.com/event/devbcn-2024";
8784
}
85+
return "https://tickets.devbcn.com/event/devbcn-2025";
86+
};
8887

89-
return (
90-
<>
91-
<StyledHeaderWrapper>
92-
<StyledHeader>
93-
<StyledHeaderLogo
94-
alt="DevBcn — logo"
95-
src={NavigationLogo}
96-
onClick={handleLogoClick}
97-
/>
98-
<HorizontalMenu navItems={navItems}
99-
subMenuItems={subNavItems}/>
100-
<HamburgerMenu onClick={handleSetMenu}/>
101-
</StyledHeader>
88+
return (
89+
<>
90+
<StyledHeaderWrapper>
91+
<StyledHeader>
92+
<StyledHeaderLogo
93+
alt="DevBcn — logo"
94+
src={NavigationLogo}
95+
onClick={handleLogoClick}
96+
/>
97+
{width > BIG_BREAKPOINT && (
98+
<HorizontalMenu navItems={navItems} subMenuItems={subNavItems} />
99+
)}
100+
<HamburgerMenu onClick={handleSetMenu} />
101+
</StyledHeader>
102102

103-
{!isHomePage() && <Breadcrumbs/>}
104-
</StyledHeaderWrapper>
105-
<AnimatePresence>
106-
{isOpened && (
107-
<StyledNavigationContainer
108-
transition={{duration: 0.5, ease: "easeIn"}}
109-
initial={{width: 0}}
110-
animate={
111-
width > MOBILE_BREAKPOINT
112-
? {width: "140vw"}
113-
: {width: "100vw"}
114-
}
115-
exit={{width: 0}}
116-
>
117-
<StyledNavigation>
118-
<StyledMenuIcon
119-
src={CloseIcon}
120-
onClick={handleSetMenu}
121-
whileTap={{scale: 0.8}}
122-
/>
123-
<StyledNavigationLogo
124-
src={NavigationLogo}
125-
onClick={() => {
126-
navigate(ROUTE_HOME);
127-
handleSetMenu();
128-
}}
129-
/>
130-
{navItems.map((item) => (
131-
<StyledLink
132-
key={item.id}
133-
to={item.link}
134-
onClick={handleSetMenu}
135-
>
136-
{item.id}
137-
</StyledLink>
138-
))}
139-
{subNavItems.map((item) => (
140-
<StyledLink
141-
key={item.id}
142-
to={item.link}
143-
onClick={handleSetMenu}
144-
>
145-
{item.id}
146-
</StyledLink>
147-
))}
103+
{!isHomePage() && <Breadcrumbs />}
104+
</StyledHeaderWrapper>
105+
<AnimatePresence>
106+
{isOpened && (
107+
<StyledNavigationContainer
108+
transition={{ duration: 0.5, ease: "easeIn" }}
109+
initial={{ width: 0 }}
110+
animate={
111+
width > MOBILE_BREAKPOINT
112+
? { width: "140vw" }
113+
: { width: "100vw" }
114+
}
115+
exit={{ width: 0 }}
116+
>
117+
<StyledNavigation>
118+
<StyledMenuIcon
119+
src={CloseIcon}
120+
onClick={handleSetMenu}
121+
whileTap={{ scale: 0.8 }}
122+
/>
123+
<StyledNavigationLogo
124+
src={NavigationLogo}
125+
onClick={() => {
126+
navigate(ROUTE_HOME);
127+
handleSetMenu();
128+
}}
129+
/>
130+
{navItems.map((item) => (
131+
<StyledLink
132+
key={item.id}
133+
to={item.link}
134+
onClick={handleSetMenu}
135+
>
136+
{item.id}
137+
</StyledLink>
138+
))}
139+
{subNavItems.map((item) => (
140+
<StyledLink
141+
key={item.id}
142+
to={item.link}
143+
onClick={handleSetMenu}
144+
>
145+
{item.id}
146+
</StyledLink>
147+
))}
148148

149-
<StyledTicketLink
150-
href={getTicketURL()}
151-
target="_blank"
152-
rel="noreferrer"
153-
>
154-
<StyledNavLinkHighlightedImage
155-
src={TicketsImage}/>
156-
</StyledTicketLink>
157-
</StyledNavigation>
158-
{width > MOBILE_BREAKPOINT && <StyledClipPath/>}
159-
</StyledNavigationContainer>
160-
)}
161-
</AnimatePresence>
162-
</>
163-
);
149+
<StyledTicketLink
150+
href={getTicketURL()}
151+
target="_blank"
152+
rel="noreferrer"
153+
>
154+
<StyledNavLinkHighlightedImage src={TicketsImage} />
155+
</StyledTicketLink>
156+
</StyledNavigation>
157+
{width > MOBILE_BREAKPOINT && <StyledClipPath />}
158+
</StyledNavigationContainer>
159+
)}
160+
</AnimatePresence>
161+
</>
162+
);
164163
};
165164

166165
export default Navigation;

0 commit comments

Comments
 (0)