main-site/components/navbar.tsx

74 lines
2.6 KiB
TypeScript
Raw Normal View History

import { usePathname } from 'next/navigation'
2022-12-18 22:21:38 +00:00
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';
2022-12-18 22:21:38 +00:00
import { useState } from 'react';
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();
2022-12-18 22:21:38 +00:00
const [sideBarActive, setSideBarActive] = useState(true); //DEBUG: set to 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);
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>
2022-12-18 22:21:38 +00:00
</NavBar>
<StyleSelectorPlaceholder></StyleSelectorPlaceholder>
</NavWrap>
);
}
return navbar;
2022-12-03 20:02:13 +00:00
}
export default PageNavbar;