test-task-sws

1
import styles from "./NavBar.module.scss";
2

3
import { IconsNames } from "../../ts/enums/IconsNames";
4
import navItems from "../../utils/navItems";
5
import NavItem from "../navitem/NavItem";
6
import { useCallback, useState } from "react";
7

8
/**
9
 * Navbar component
10
 */
11
export default function Navbar() {
12
	const [navs, setNavs] = useState(navItems);
13

14
	const setActiveNav = useCallback(
15
		(navName: string) => {
16
			const newNavs = [...navs.map((nav) => ({ active: false, navIconName: nav.navIconName as IconsNames, navName: nav.navName }))];
17

18
			newNavs.find((nav) => nav.navName === navName)!.active = true;
19
			setNavs(newNavs);
20
		},
21
		[navs, setNavs],
22
	);
23

24
	return (
25
		<>
26
			<div className={styles.navbar}>
27
				{navs.map((item) => (
28
					<NavItem
29
						key={item.navName}
30
						active={item.active}
31
						navIconName={item.navIconName as IconsNames}
32
						navName={item.navName}
33
						setActiveNav={setActiveNav}
34
					/>
35
				))}
36
			</div>
37
		</>
38
	);
39
}
40