74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
import { usePathname } from 'next/navigation'
|
|
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';
|
|
import { useState } from 'react';
|
|
import { NavMenuFooter } from './footer';
|
|
|
|
const PageNavbar = ({ mobile }: { mobile: number }) => {
|
|
const path = usePathname();
|
|
const [sideBarActive, setSideBarActive] = useState(false);
|
|
|
|
function handleSidebar(event: any) {
|
|
if (!event.currentTarget.contains(event.relatedTarget)) {
|
|
setSideBarActive(false);
|
|
}
|
|
}
|
|
|
|
let navbar: JSX.Element;
|
|
if (mobile) {
|
|
navbar = (
|
|
<>
|
|
<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}>
|
|
{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>
|
|
</NavSideMenu>
|
|
<NavWrapMobile>
|
|
<NavIndicators>
|
|
{Links.links.map((item) => (
|
|
<NavIndicator active={path === item.href ? +true : +false} key={item.name} href={item.href} />
|
|
))}
|
|
</NavIndicators>
|
|
</NavWrapMobile>
|
|
<NavWrapMobileGhost />
|
|
</>
|
|
);
|
|
}
|
|
else {
|
|
navbar = (
|
|
<NavWrap>
|
|
<StyleSelector mobile={mobile}/>
|
|
<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>
|
|
</NavBar>
|
|
<StyleSelectorPlaceholder />
|
|
</NavWrap>
|
|
);
|
|
}
|
|
return navbar;
|
|
}
|
|
|
|
export default PageNavbar; |