adding new logbook entry (#24)

* adding new logbook entry

* adding new logbook entry

app/src/components/siteNav/SiteNav.tsx

@@ -1,19 +1,14 @@
 import { useEffect, useState } from 'react';
 import { ISiteNavProps } from './ISiteNavProps';
-// import { Link as ReactRouterLink } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { useAppContext } from '../../hooks/appContext/UseAppContext';
 import {
   Avatar,
   Button,
+  IconButton,
   Menu,
-  MenuHandler,
   MenuItem,
-  MenuList,
   Navbar,
-  NavbarBrand,
-  NavbarLinks,
-  NavbarMenu,
-  NavbarItemProps,
   PlaneIcon,
   SignOutIcon,
   Spinner,
@@ -37,10 +32,15 @@ const SiteNav: React.FC<unknown> = () => {
   const isAuthenticated = useIsAuthenticated();
   const { getAccessToken } = useAccessToken();
   const { inProgress, instance } = useMsal();
-  const navItems: NavbarItemProps[] = [
+  const navigate = useNavigate();
+  const pages = [
+    {
+      name: 'Logbook',
+      url: '/'
+    },
     {
       name: 'Pilots',
-      url: '#'
+      url: '/pilots'
     }
   ];
   const handleSignIn = async () => {
@@ -83,6 +83,20 @@ const SiteNav: React.FC<unknown> = () => {
       throw new Error();
     }
   };
+  const handlePageClick = (url: string) => {
+    navigate(url);
+  };
+
+  const Settings = () => {
+    return (
+      <MenuItem onClick={handleSignOut}>
+        <SignOutIcon />
+        <Typography sx={{ marginLeft: '10px', textAlign: 'center' }}>
+          Sign Out
+        </Typography>
+      </MenuItem>
+    );
+  };
 
   useEffect(() => {
     const callback = instance.addEventCallback(
@@ -150,107 +164,16 @@ const SiteNav: React.FC<unknown> = () => {
   }, [isAuthenticated]);
 
   return (
-    <Navbar className="mt-6">
-      <NavbarBrand>
-        <img height={40} width={40} src="noahspan-logo.png" />{' '}
-        <PlaneIcon size="2x" />
-      </NavbarBrand>
-      <NavbarLinks items={navItems} />
-      <NavbarMenu>
-        <div className="flex items-center gap-2 hidden lg:inline-block">
-          {!loading && isAuthenticated && (
-            <Menu placement="bottom-end">
-              <MenuHandler>
-                <div>
-                  {userPhoto && (
-                    <img
-                      className="rounded-full cursor-pointer"
-                      height="40"
-                      width="40"
-                      src={userPhoto}
-                    />
-                  )}
-                  {!userPhoto && (
-                    <div className="rounded-full cursor-pointer text-white text-center pt-2 bg-black h-[40px] w-[40px]">
-                      NS
-                    </div>
-                  )}
-                </div>
-              </MenuHandler>
-              <MenuList>
-                <MenuItem onClick={handleSignOut}>
-                  <Typography
-                    className="flex justify-center gap-3"
-                    variant="small"
-                  >
-                    <SignOutIcon size="lg" />
-                    Sign Out
-                  </Typography>
-                </MenuItem>
-              </MenuList>
-            </Menu>
-          )}
-          {loading && isAuthenticated && (
-            <div className="flex justify-center gap-3">
-              <Spinner size="xs" />
-              <Typography variant="small">Loading...</Typography>
-            </div>
-          )}
-          {!isAuthenticated && (
-            <Button
-              variant="text"
-              size="sm"
-              onClick={handleSignIn}
-              loading={inProgress === InteractionStatus.Login ? true : false}
-            >
-              Sign In
-            </Button>
-          )}
-        </div>
-        {/* <IconButton
-          variant='text'
-          className='ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden'
-          ripple={false}
-          onClick={() => setOpenNav(!openNav)}
-        >
-          <FontAwesomeIcon icon={faBars} size='2x' />
-        </IconButton> */}
-      </NavbarMenu>
-    </Navbar>
+    <Navbar
+      handlePageClick={handlePageClick}
+      handleSignIn={handleSignIn}
+      isAuthenticated={isAuthenticated}
+      logo={<PlaneIcon size="2x" />}
+      pages={pages}
+      settings={<Settings />}
+      userPhoto={userPhoto}
+    />
   );
-
-  // return (
-  //   <Navbar
-  //     classNames={{
-  //       base: 'bg-transparent z-0'
-  //     }}
-  //     isBlurred={false}
-  //     maxWidth="full"
-  //     data-testid="flying-navbar"
-  //   >
-  //     <NavbarBrand>
-  //       <Logo className="pr-3" height={50} width={50} data-testid="logo" />
-  //       <Plane size="2xl" />
-  //     </NavbarBrand>
-  //     <NavbarContent justify="center">
-  //       <NavbarItem>
-  //         {appContext.state.featureFlags.find(
-  //           (featureFlag) => featureFlag.key === 'flying-pilots'
-  //         )?.enabled && (
-  //           <Link>
-  //             <ReactRouterLink to="/">Pilots</ReactRouterLink>
-  //           </Link>
-  //         )}
-  //       </NavbarItem>
-  //     </NavbarContent>
-  //     <NavbarContent justify='end'>
-  //       <Login
-  //         loginCompleted={loginCompleted}
-  //         loginView='compact'
-  //       />
-  //     </NavbarContent>
-  //   </Navbar>
-  // );
 };
 
 export default SiteNav;