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 = ( <> handleSidebar(event)} active={+sideBarActive}> setSideBarActive(sideBarActive => !sideBarActive)} active={+sideBarActive}>Menu {Links.links.map((item) => ( {item.name} ))} Mastodon {Links.links.map((item) => ( ))} ); } else { navbar = ( {Links.links.map((item) => ( {item.name} ))} Mastodon ); } return navbar; } export default PageNavbar;