nav3

import React, { FC } from "react";
import { UseQueryResult } from "react-query";
import { useLocation, useNavigate } from "react-router-dom";

import MobileUserMenu from "./components/MobileUserMenu";
import UserMenu from "./components/UserMenu";
import navigation2 from "../.././config/navigation2";
import { NavigationSchema2 } from "../../types";
import ThemeToggle from "./components/ThemeToggle";

import {
  LinkItem,
  NavigationFooter,
  NavigationHeader,
  NestableNavigationContent,
  NestingItem,
  Section,
  SideNavigation,
} from "@atlaskit/side-navigation";

import { UserI } from "../../types";

interface PropsI {
  logout: () => void;
  user: UseQueryResult<UserI, any>;
  avatar: UseQueryResult<Blob, any>;
  theme: string;
  setTheme: (theme: string) => void;
}

const Nav3: FC<PropsI> = ({ logout, user, avatar, theme, setTheme }) => {
  const location = useLocation();
  const navigate = useNavigate();

  // Function to render navigation items
  const NavItem = ({
    id,
    title,
    path,
    iconBefore: Icon,
    items,
  }: NavigationSchema2) => {
    const handleOnClick = (path: string | undefined) => {
      if (path) {
        navigate(path);
      }
    };

    if (items) {
      return (
        <NestingItem
          key={id}
          id={id.toString()}
          title={title}
          iconBefore={Icon ? <Icon size={40} /> : undefined}
          onClick={() => handleOnClick(path)}
        >
          <Section title={title}>{items.map((item) => NavItem(item))}</Section>
        </NestingItem>
      );
    }
    return (
      <LinkItem
        key={id}
        iconBefore={Icon ? <Icon size={40} /> : undefined}
        isSelected={location.pathname === path}
        onClick={() => handleOnClick(path)}
      >
        {title}
      </LinkItem>
    );
  };
  return (
    <>
      <div className="w-72 h-screen bg-neutral overflow-y-auto">
        <SideNavigation label="project" testId="side-navigation">
          <NavigationHeader>
            <div className="flex justify-center">
              <a href="/">
                <img
                  className="h-14 w-auto"
                  src="/images/main-logo.png"
                  alt=""
                />
              </a>
            </div>
            <div>
              <UserMenu
                navType={1}
                className="hidden lg:block"
                userLoading={user.status === "loading"}
                user={user?.data}
                avatarLoading={avatar.status === "loading"}
                avatar={avatar?.data}
                logout={logout}
              />
              <MobileUserMenu
                className="block lg:hidden"
                userLoading={user.status === "loading"}
                user={user?.data}
                avatarLoading={avatar.status === "loading"}
                avatar={avatar?.data}
                logout={logout}
              />
            </div>
          </NavigationHeader>
          <div className="bg-neutral h-full w-full">
            <NestableNavigationContent
              initialStack={[]}
              testId="nestable-navigation-content"
            >
              <div className="text-text-secondary hover:text-text-primary pt-2 px-0 py-0 rounded-sm overflow-y-auto">
                <Section>{navigation2.map((item) => NavItem(item))}</Section>
              </div>
            </NestableNavigationContent>
          </div>
          <NavigationFooter>
            <div className="flex flex-row items-center">
              <ThemeToggle
                className={"absolute bottom-6 right-3"}
                theme={theme}
                setTheme={setTheme}
              />
            </div>
          </NavigationFooter>
        </SideNavigation>
      </div>
    </>
  );
};

export default Nav3;