-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathheader.js
More file actions
executable file
·63 lines (58 loc) · 2.08 KB
/
header.js
File metadata and controls
executable file
·63 lines (58 loc) · 2.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import classNames from 'classnames';
import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import css from '../styles/header.module.scss';
import NAV_LINKS from '../constants/nav_links.js';
import MenuIcon from '@mui/icons-material/Menu';
export function Header({ children }) {
const router = useRouter();
const navItemsJSX = NAV_LINKS.map((link, index) => {
const classes = classNames({
[css.active]: link.url === router.pathname,
});
const target = link.url.substring(0, 4) === 'http' ? '_blank' : null;
return (
<>
<Link
key={index}
href="/?originalUrl=https%3A%2F%2Fgithub.com%2F%257B%253C%2Fdiv">
link.name.toLowerCase() == 'home'
? '/'
: `/${link.name.toLowerCase()}`
}
>
<a className={classes}> {link.name}</a>
</Link>
</>
);
});
const [menu, setMenu] = useState(`${css.smallHeaderHidden}`);
const handleClick = () => {
if (menu == `${css.smallHeaderHidden}`) {
setMenu(`${css.smallHeader}`);
} else if (menu == `${css.smallHeader}`) {
setMenu(`${css.smallHeaderHidden}`);
}
};
return (
<div className={css.headertop}>
<div className={css.headerleft}>
<img src="/?originalUrl=https%3A%2F%2Fgithub.com%2F%26quot%3B%2Flogo.png%26quot%3B%2520className%3D%257Bcss.headerLeftImg%257D%2520alt%3D%26quot%3Blogo%26quot%3B%2520%2F%26gt%3B%253C%2Fdiv">
<h1 className={css.logotitle}>hacktoolkit</h1>
</div>
<div className={css.header}>
{/* <div className={css.mainMenu}> */}
{navItemsJSX}
{/* </div> */}
</div>
<div className={menu}>
<img src="/?originalUrl=https%3A%2F%2Fgithub.com%2F%26quot%3B%2Flogo.png%26quot%3B%2520className%3D%257Bcss.headerLeftImg%257D%2520alt%3D%26quot%3Blogo%26quot%3B%2520%2F%26gt%3B%253C%2Fdiv">
{navItemsJSX}
</div>
<button className={css.smallMenu} onClick={handleClick}>
<MenuIcon style={{ fontSize: 50 }} />
</button>
</div>
);
}
You can’t perform that action at this time.