Aarni Halinen
125 lines
3.2 KiB
TypeScript
125 lines
3.2 KiB
TypeScript
import React from "react";
|
||
import styled from "styled-components";
|
||
import colors from "@theme/colors";
|
||
import breakpoints from "@theme/breakpoints";
|
||
import Icon, { IconType } from "./Icon";
|
||
import NavbarDropdownLink from "./NavbarDropdownLink";
|
||
import NavbarChildLink from "./NavbarChildLink";
|
||
|
||
const renderNavigationDesktopItems = () => {
|
||
return (
|
||
<>
|
||
<NavbarDropdownLink to="/kilta" text="Kilta ›">
|
||
<NavbarChildLink to="/kilta/toiminta">Toiminta</NavbarChildLink>
|
||
<NavbarChildLink to="/kilta/fuksi">Fuksi</NavbarChildLink>
|
||
<NavbarChildLink to="/kilta/kunnia">Kunnianosoitukset</NavbarChildLink>
|
||
<NavbarChildLink to="https://static.sika.sik.party">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>
|
||
</>
|
||
);
|
||
}
|
||
|
||
|
||
const Nav = styled.div`
|
||
flex: 1 0 auto;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
font-size: 14px;
|
||
color: ${colors.lightBlue};
|
||
margin-left: 5rem;
|
||
|
||
a {
|
||
fill: ${colors.lightBlue};
|
||
color: ${colors.lightBlue};
|
||
text-decoration: none;
|
||
}
|
||
|
||
@media screen and (min-width: ${breakpoints.mobile}) and (max-width: ${breakpoints.medium}) {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
@media screen and (max-width: ${breakpoints.mobile}) {
|
||
justify-content: center;
|
||
margin-left: 0;
|
||
}
|
||
`;
|
||
|
||
const DesktopContainer = styled.div`
|
||
flex: 1 0 auto;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-between;
|
||
|
||
@media screen and (max-width: ${breakpoints.medium}) {
|
||
display: none;
|
||
}
|
||
`;
|
||
|
||
const SomeContainer = styled.div`
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
|
||
a {
|
||
fill: ${colors.white};
|
||
color: ${colors.white};
|
||
}
|
||
`;
|
||
|
||
const MobileMenu = styled.div`
|
||
display: flex;
|
||
margin: 0 1rem;
|
||
cursor: pointer;
|
||
|
||
span {
|
||
display: flex;
|
||
}
|
||
|
||
@media screen and (min-width: ${breakpoints.medium}) {
|
||
display: none;
|
||
}
|
||
|
||
@media screen and (max-width: ${breakpoints.mobile}) {
|
||
margin-left: 3rem;
|
||
}
|
||
|
||
svg {
|
||
width: 26px;
|
||
height: 26px;
|
||
fill: ${colors.white};
|
||
color: ${colors.white};
|
||
}
|
||
`;
|
||
|
||
interface NavigationProps {
|
||
onMobileMenuOpen: () => void;
|
||
}
|
||
|
||
const Navigation: React.FC<NavigationProps> = ({ onMobileMenuOpen }) => {
|
||
const desktopItems = renderNavigationDesktopItems();
|
||
return (
|
||
<Nav>
|
||
<DesktopContainer>
|
||
{desktopItems}
|
||
</DesktopContainer>
|
||
<SomeContainer>
|
||
<Icon name={IconType.Facebook} link="https://www.facebook.com/AaltoYliopistonSIK/" />
|
||
<Icon name={IconType.Instagram} link="https://www.instagram.com/sahkoinsinoorikilta/" />
|
||
<Icon name={IconType.LinkedIn} link="https://www.linkedin.com/groups/8103057/" />
|
||
</SomeContainer>
|
||
<MobileMenu>
|
||
<Icon name={IconType.HamburgerMenu} onClick={onMobileMenuOpen} />
|
||
</MobileMenu>
|
||
</Nav>
|
||
)};
|
||
|
||
export default Navigation;
|