main-site/components/navbar.tsx

74 lines
2.7 KiB
TypeScript
Raw Permalink Normal View History

import { usePathname } from 'next/navigation'
2022-12-19 20:03:08 +00:00
import { NavBarMobile, NavIndicator, NavIndicators , NavSideMenu, NavSideMenuButton, NavSideMenuPanel, NavLinkMobile, NavWrapMobile, NavWrapMobileGhost, NavSideMenuGhost } from './styles/navbar/mobile';
import { NavBar, NavLink, NavWrap } from './styles/navbar/desktop';
import { StyleSelector, StyleSelectorPlaceholder } from './themeselector';
import Links from '../public/data/navbar.json';
2022-12-18 22:21:38 +00:00
import { useState } from 'react';
2022-12-19 20:03:08 +00:00
import { NavMenuFooter } from './footer';
2022-12-03 20:02:13 +00:00
2022-12-18 22:21:38 +00:00
const PageNavbar = ({ mobile }: { mobile: number }) => {
const path = usePathname();
const [sideBarActive, setSideBarActive] = useState(false);
2022-12-03 20:02:13 +00:00
2022-12-18 22:21:38 +00:00
function handleSidebar(event: any) {
if (!event.currentTarget.contains(event.relatedTarget)) {
setSideBarActive(false);
}
}
let navbar: JSX.Element;
if (mobile) {
navbar = (
<>
2022-12-19 20:03:08 +00:00
<NavSideMenu tabIndex={-1} onBlur={(event) => handleSidebar(event)} active={+sideBarActive}>
<NavSideMenuButton onClick={() => setSideBarActive(sideBarActive => !sideBarActive)} active={+sideBarActive}>Menu</NavSideMenuButton>
<NavSideMenuPanel active={+sideBarActive}>
<NavBarMobile>
{Links.links.map((item) => (
<NavLinkMobile active={path === item.href ? +true : +false} key={item.name} href={item.href}>
2022-12-19 20:03:08 +00:00
{item.name}
</NavLinkMobile>
))}
<NavLinkMobile key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">
Mastodon
</NavLinkMobile>
</NavBarMobile>
<NavSideMenuGhost />
<StyleSelector mobile={mobile}/>
<NavSideMenuGhost num={2}/>
<NavMenuFooter />
</NavSideMenuPanel>
2022-12-18 22:21:38 +00:00
</NavSideMenu>
<NavWrapMobile>
<NavIndicators>
{Links.links.map((item) => (
<NavIndicator active={path === item.href ? +true : +false} key={item.name} href={item.href} aria-label={item.name}/>
2022-12-18 22:21:38 +00:00
))}
</NavIndicators>
</NavWrapMobile>
2022-12-19 20:03:08 +00:00
<NavWrapMobileGhost />
2022-12-18 22:21:38 +00:00
</>
);
}
else {
navbar = (
<NavWrap>
2022-12-19 20:03:08 +00:00
<StyleSelector mobile={mobile}/>
2022-12-18 22:21:38 +00:00
<NavBar>
{Links.links.map((item) => (
<NavLink active={path === item.href ? +true : +false} key={item.name} href={item.href}>
{item.name}
</NavLink>
))}
<NavLink key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">
Mastodon
</NavLink>
2022-12-18 22:21:38 +00:00
</NavBar>
2022-12-19 20:03:08 +00:00
<StyleSelectorPlaceholder />
2022-12-18 22:21:38 +00:00
</NavWrap>
);
}
return navbar;
2022-12-03 20:02:13 +00:00
}
export default PageNavbar;