main-site/components/navbar.tsx

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} aria-label={item.name}/>
            ))}
          </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;