74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
import { usePathname } from 'next/navigation'
|
|
import { NavBar, NavBarMobile, NavIndicator, NavIndicators, NavLink, NavSideMenu, NavSideMenuButton, NavSideMenuPanel, NavSideMenuButtonPlaceholder, NavWrap, NavWrapMobile, NavWrapMobileGhost, NavSideMenuGhost } from './styles/navbar';
|
|
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(true); //DEBUG: set to false
|
|
|
|
function handleSidebar(event: any) {
|
|
if (!event.currentTarget.contains(event.relatedTarget)) {
|
|
setSideBarActive(false);
|
|
console.log(event.relatedTarget); // DEBUG
|
|
}
|
|
else { console.log("nah") } // DEBUG
|
|
}
|
|
|
|
let navbar: JSX.Element;
|
|
if (mobile) {
|
|
navbar = (
|
|
<>
|
|
<NavSideMenu onBlur={(event) => handleSidebar(event)} active={+sideBarActive}>
|
|
<NavBarMobile>
|
|
{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>
|
|
</NavBarMobile>
|
|
<NavSideMenuGhost/>
|
|
<StyleSelector />
|
|
<NavSideMenuGhost/>
|
|
<NavMenuFooter />
|
|
</NavSideMenu>
|
|
<NavWrapMobile>
|
|
<NavSideMenuButton onClick={() => setSideBarActive(!sideBarActive)} active={+sideBarActive}>Menu</NavSideMenuButton>
|
|
<NavIndicators>
|
|
{Links.links.map((item) => (
|
|
<NavIndicator active={path === item.href ? +true : +false} key={item.name} href={item.href} />
|
|
))}
|
|
</NavIndicators>
|
|
<NavSideMenuButtonPlaceholder />
|
|
</NavWrapMobile>
|
|
<NavWrapMobileGhost/>
|
|
</>
|
|
);
|
|
}
|
|
else {
|
|
navbar = (
|
|
<NavWrap>
|
|
<StyleSelector></StyleSelector>
|
|
<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></StyleSelectorPlaceholder>
|
|
</NavWrap>
|
|
);
|
|
}
|
|
return navbar;
|
|
}
|
|
|
|
export default PageNavbar; |