utopia-ui/src/Components/AppShell/NavBar.tsx

import { useAuth } from "../Auth"
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon'
import * as React from "react";


export default function NavBar({ appName, nameWidth = 200}: { appName: string, nameWidth?: number }) {


  const { isAuthenticated, user, logout, token } = useAuth();

  const onLogout = () => {
    toast.promise(
      logout(),
      {
        success: {
          render() {
            return `Bye bye`
          },
          // other options
          icon: "👋",
        },
        error: {
          render( {data} ) {   
            return `${data}`
          },
        },
        pending: 'logging out ..'
      });
  }

  return (
    <>
      <div className="tw-navbar tw-bg-base-100 tw-z-[10000] tw-shadow-xl tw-relative">
        <button className="tw-btn tw-btn-square tw-btn-ghost"
          data-te-sidenav-toggle-ref
          data-te-target="#sidenav"
          aria-controls="#sidenav"
          aria-haspopup="true">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="tw-inline-block tw-w-5 tw-h-5 tw-stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </button>
        <div className="tw-flex-1 tw-mr-2">
          <div className={`tw-flex-1 tw-truncate tw-grid tw-grid-flow-col`} style={{maxWidth: nameWidth}}>
            <Link className="tw-btn tw-btn-ghost tw-px-2 tw-normal-case tw-text-xl tw-flex-1 tw-truncate" to={"/"}><h1 className="tw-truncate">{appName}</h1></Link>
            <button className="tw-btn tw-px-2  tw-btn-ghost" onClick={() => window.my_modal_3.showModal()}><QuestionMarkIcon className="tw-h-5 tw-w-5" /></button>
          </div>
        </div>



        {isAuthenticated ?
          <div className="tw-flex-none">
            {user?.avatar ? <div className="tw-avatar">
              <div className="tw-w-10 tw-rounded-full">
                <img src={"https://api.utopia-lab.org/assets/" + user?.avatar + "?access_token=" + token} />
              </div>
            </div> : <></>}
            <div className='tw-ml-2 tw-mr-2'>{user?.first_name}</div>
            <div className="tw-dropdown tw-dropdown-end">
              <label tabIndex={0} className="tw-btn tw-btn-ghost tw-btn-square">
                <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
                </svg>
              </label>
              <ul tabIndex={0} className="tw-menu tw-menu-compact tw-dropdown-content tw-mt-3 tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box tw-w-52 !tw-z-[10000]">
                <li><Link to={"/profile-settings"}>Profile</Link></li>
                <li><Link to={"/user-settings"}>Settings</Link></li>
                <li><a onClick={() => { onLogout() }}>Logout</a></li>
              </ul>
            </div>
          </div>
          :
          <div>

            <div className="tw-hidden md:tw-flex">
            <Link to={"/login"}><div className="tw-btn tw-btn-ghost tw-mr-2">
                Login
              </div></Link>

              <Link to={"/signup"}><div  className="tw-btn tw-btn-ghost tw-mr-2">
                Sign Up
              </div></Link>
            </div>
            <div className="tw-dropdown tw-dropdown-end">
              <label tabIndex={1} className="tw-btn tw-btn-ghost md:tw-hidden">
                <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
                </svg>


              </label>
              <ul tabIndex={1} className="tw-menu tw-dropdown-content tw-mt-3 tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box tw-w-52 !tw-z-[10000]">
                <li><Link to={"/login"}>Login</Link></li>
                <li><Link to={"/signup"}>Sign Up</Link></li>
              </ul>
            </div>

          </div>
        }
      </div>

    </>
  )
}