Aarni Halinen
89 lines
3.1 KiB
TypeScript
89 lines
3.1 KiB
TypeScript
import * as React from "react";
|
||
import { Link } from "react-router-dom";
|
||
import "./Header.scss";
|
||
import NavbarDropdownLink from "../NavbarDropdownLink/NavbarDropdownLink";
|
||
import NavbarChildLink from "../NavbarChildLink/NavbarChildLink";
|
||
import Navigation from "../Navigation";
|
||
import * as TitleImage from "../../assets/img/SIK_RGB_W_side.png";
|
||
|
||
export interface HeaderProps { }
|
||
export interface HeaderState {
|
||
mobileMenuOpen: boolean;
|
||
}
|
||
|
||
class Header extends React.Component<HeaderProps, HeaderState> {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
mobileMenuOpen: false,
|
||
};
|
||
}
|
||
|
||
renderNavigationDesktopItems = () => {
|
||
return (
|
||
<React.Fragment>
|
||
<NavbarDropdownLink to="/kilta" text="Kilta ›">
|
||
<NavbarChildLink to="/kilta/toiminta">Toiminta</NavbarChildLink>
|
||
<NavbarChildLink to="/kilta/fuksi">Fuksi</NavbarChildLink>
|
||
<NavbarChildLink to="/kilta/arkisto">Arkisto</NavbarChildLink>
|
||
</NavbarDropdownLink>
|
||
<NavbarDropdownLink to="/opinnot_ja_ura" text="Opinnot ja ura"></NavbarDropdownLink>
|
||
<NavbarDropdownLink to="/yritysyhteistyo" text="Yritysyhteistyö"></NavbarDropdownLink>
|
||
<NavbarDropdownLink to="/yhteystiedot" text="Yhteystiedot">
|
||
{/* <NavbarChildLink to="https://en.wikipedia.org/wiki/Gay">Simo Höglund</NavbarChildLink> */}
|
||
</NavbarDropdownLink>
|
||
<NavbarDropdownLink to="/in_english" text="In English"></NavbarDropdownLink>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
|
||
renderNavigationMobileItems = () => {
|
||
return (
|
||
<React.Fragment>
|
||
<NavbarDropdownLink to="/kilta" text="Kilta ›" exploded>
|
||
<NavbarChildLink to="/kilta/toiminta">Toiminta</NavbarChildLink>
|
||
<NavbarChildLink to="/kilta/fuksi">Fuksi</NavbarChildLink>
|
||
<NavbarChildLink to="/kilta/arkisto">Arkisto</NavbarChildLink>
|
||
</NavbarDropdownLink>
|
||
<NavbarDropdownLink to="/opinnot_ja_ura" text="Opinnot ja ura" exploded />
|
||
<NavbarDropdownLink to="/yritysyhteistyo" text="Yritysyhteistyö" exploded />
|
||
<NavbarDropdownLink to="/yhteystiedot" text="Yhteystiedot" exploded>
|
||
{/* <NavbarChildLink to="https://en.wikipedia.org/wiki/Gay">Simo Höglund</NavbarChildLink> */}
|
||
</NavbarDropdownLink>
|
||
<NavbarDropdownLink to="/in_english" text="In English" exploded />
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
|
||
handleMobileMenuClick = (): void => {
|
||
this.setState(prevState => ({
|
||
mobileMenuOpen: !prevState.mobileMenuOpen,
|
||
}));
|
||
}
|
||
|
||
render() {
|
||
const desktopItems = this.renderNavigationDesktopItems();
|
||
const mobileItems = this.renderNavigationMobileItems();
|
||
const { mobileMenuOpen } = this.state;
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<div className="header">
|
||
<Link to="/">
|
||
<img className="logo" src={TitleImage} />
|
||
</Link>
|
||
<Navigation
|
||
onMobileMenuOpen={this.handleMobileMenuClick}
|
||
items={desktopItems}
|
||
/>
|
||
</div>
|
||
<div className="navigation-mobile-menu" hidden={!mobileMenuOpen}>
|
||
{mobileItems}
|
||
</div>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default Header;
|