DocsGPT/frontend/src/components/Navigation.tsx

import { useDispatch, useSelector } from 'react-redux';
import { NavLink } from 'react-router-dom';
import { useMediaQuery } from '../hooks';
import {
  toggleApiKeyModal,
  selectIsMenuOpen,
  toggleIsMenuOpen,
} from '../store';
import Arrow1 from '../imgs/arrow.svg';
import Hamburger from '../imgs/hamburger.svg';
import Key from '../imgs/key.svg';
import Info from '../imgs/info.svg';
import Link from '../imgs/link.svg';
import Exit from '../imgs/exit.svg';

//TODO - Need to replace Chat button to open secondary nav with scrollable past chats option and new chat at top
//TODO - Need to add Discord and Github links

function MobileNavigation({}) {
  const dispatch = useDispatch();
  const isMenuOpen = useSelector(selectIsMenuOpen);

  return (
    <div
      className={`${
        isMenuOpen ? 'border-b-2 border-gray-100' : 'h-16'
      } fixed flex w-full flex-col bg-gray-50 transition-all`}
    >
      <div className="h-16 w-full border-b-2 border-gray-100">
        {isMenuOpen ? (
          <>
            <button
              className="mt-5 ml-6 h-6 w-6"
              onClick={() => dispatch(toggleIsMenuOpen())}
            >
              <img src={Exit} alt="menu toggle" className="w-5" />
            </button>
          </>
        ) : (
          <>
            <button
              className="mt-5 ml-6 h-6 w-6"
              onClick={() => dispatch(toggleIsMenuOpen())}
            >
              <img src={Hamburger} alt="menu toggle" className="w-7" />
            </button>
          </>
        )}
      </div>
      {isMenuOpen && (
        <nav className="my-4 flex flex-col">
          <NavLink
            to="/"
            className="flex h-12 cursor-pointer gap-4 rounded-md px-6 hover:bg-gray-100"
          >
            <img src={Info} alt="info" className="ml-2 w-5" />
            <p className="my-auto text-eerie-black">Chat</p>
          </NavLink>
          <NavLink
            to="/about"
            className="flex h-12 cursor-pointer gap-4 rounded-md px-6 hover:bg-gray-100"
          >
            <img src={Info} alt="info" className="ml-2 w-5" />
            <p className="my-auto text-eerie-black">About</p>
          </NavLink>
          <div className="flex h-12 cursor-pointer gap-4 rounded-md px-6 hover:bg-gray-100">
            <img src={Link} alt="info" className="ml-2 w-5" />
            <p className="my-auto text-eerie-black">Discord</p>
          </div>
          <div className="flex h-12 cursor-pointer gap-4 rounded-md px-6 hover:bg-gray-100">
            <img src={Link} alt="info" className="ml-2 w-5" />
            <p className="my-auto text-eerie-black">Github</p>
          </div>
          <div
            className="flex h-12 cursor-pointer gap-4 rounded-md px-6 hover:bg-gray-100"
            onClick={() => dispatch(toggleApiKeyModal())}
          >
            <img src={Key} alt="info" className="ml-2 w-5" />
            <p className="my-auto text-eerie-black">Reset Key</p>
          </div>
        </nav>
      )}
    </div>
  );
}

function DesktopNavigation() {
  const dispatch = useDispatch();
  const isMenuOpen = useSelector(selectIsMenuOpen);

  return (
    <div
      className={`${
        isMenuOpen ? 'w-72 lg:w-96' : 'w-16'
      } fixed flex h-screen flex-col border-r-2 border-gray-100 bg-gray-50 transition-all`}
    >
      <div
        className={`${
          isMenuOpen ? 'w-full' : 'w-16'
        } ml-auto h-16 border-b-2 border-gray-100`}
      >
        <button
          className="float-right mr-5 mt-5 h-5 w-5"
          onClick={() => dispatch(toggleIsMenuOpen())}
        >
          <img
            src={Arrow1}
            alt="menu toggle"
            className={`${
              isMenuOpen ? 'rotate-0' : 'rotate-180'
            } m-auto w-3 transition-all`}
          />
        </button>
      </div>

      {isMenuOpen && (
        <>
          <div className="flex-grow border-b-2 border-gray-100"></div>

          <div className="flex h-16 flex-col border-b-2 border-gray-100">
            <div
              className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
              onClick={() => dispatch(toggleApiKeyModal())}
            >
              <img src={Key} alt="key" className="ml-2 w-6" />
              <p className="my-auto text-eerie-black">Reset Key</p>
            </div>
          </div>

          <div className="flex h-48 flex-col border-b-2 border-gray-100">
            <NavLink
              to="/about"
              className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
            >
              <img src={Info} alt="info" className="ml-2 w-5" />
              <p className="my-auto text-eerie-black">About</p>
            </NavLink>

            <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
              <img src={Link} alt="link" className="ml-2 w-5" />
              <p className="my-auto text-eerie-black">Discord</p>
            </div>

            <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
              <img src={Link} alt="link" className="ml-2 w-5" />
              <p className="my-auto text-eerie-black">Github</p>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

export default function Navigation() {
  const isMobile = useMediaQuery('(max-width: 768px)');

  if (isMobile) {
    return <MobileNavigation />;
  } else {
    return <DesktopNavigation />;
  }
}