thingtime_review/Nav.tsx at 3db274f2608fce0ae91698a9d27215c70afb53e8

 import React from 'react';
 import { Box, Center, Flex } from '@chakra-ui/react';
 import { Link, useLocation, useNavigate } from '@remix-run/react';
 import { Commander } from '../Commander/Commander';
 import { CommanderV1 } from '../Commander/CommanderV2';
 import { Icon } from '../Icon/Icon';
 import { RainbowSkeleton } from '../Skeleton/RainbowSkeleton';
 import { ProfileDrawer } from './ProfileDrawer';
 export const Nav = (props) => {
   const [profileDrawerOpen, setProfileDrawerOpen] = React.useState(false);
   const { pathname } = useLocation();
   const navigate = useNavigate();
   const toggleProfileDrawer = React.useCallback(() => {
     setProfileDrawerOpen(!profileDrawerOpen);
   }, [profileDrawerOpen]);
   const inEditorMode = React.useMemo(() => {
     if (pathname.slice(0, 7) === '/editor') {
       return true;
     }
     return false;
   }, [pathname]);
   const inEditMode = React.useMemo(() => {
     if (pathname.slice(0, 5) === '/edit') {
       return true;
     }
     return false;
   }, [pathname]);
   const editorToggleable = React.useMemo(() => {
     if (pathname.slice(0, 7) === '/things') {
       return true;
     } else if (pathname.slice(0, 5) === '/edit') {
       return true;
     }
     return false;
   }, [pathname]);
   const toggleEdit = React.useCallback(
     (e) => {
       // if first characters of pathname are /things replace with /edit
       // or if first characters of pathname are /edit replace with /things
       if (pathname.slice(0, 7) === '/things') {
         const newPathname = pathname.replace('/things', '/edit');
         navigate(newPathname);
       } else if (pathname.slice(0, 7) === '/editor') {
         const newPathname = pathname.replace('/editor', '/things');
         navigate(newPathname);
       } else if (pathname.slice(0, 5) === '/edit') {
         const newPathname = pathname.replace('/edit', '/things');
         navigate(newPathname);
       }
     },
     [pathname, navigate]
   );
   const toggleEditor = React.useCallback(
     (e) => {
       // if first characters of pathname are /things replace with /edit
       // or if first characters of pathname are /edit replace with /things
       if (pathname.slice(0, 7) === '/editor') {
         const newPathname = pathname.replace('/editor', '/edit');
         navigate(newPathname);
       } else if (pathname.slice(0, 5) === '/edit') {
         const newPathname = pathname.replace('/edit', '/editor');
         navigate(newPathname);
       }
     },
     [pathname, navigate]
   );
   return (
     <>
       <Box position="fixed" zIndex={9999} top={0} right={0} left={0} maxWidth="100vw">
         <Flex
           as="nav"
           position="relative"
           alignItems="center"
           justifyContent="center"
           flexDirection="row"
           width="100%"
           maxWidth="100%"
           marginY={1}
           paddingX="18px"
           paddingY="14px"
           // bg='white'
           // boxShadow={'0px 0px 10px rgba(0,0,0,0.1)'}
         >
           <Center className="nav-left-section" display={['none', 'flex']} height="100%" marginRight="auto">
             <Center transform="scaleX(-100%)" cursor="pointer">
               <Link to="/">
                 <Icon size="12px" name="🦄"></Icon>
               </Link>
             </Center>
           </Center>
           <CommanderV1 global id="nav" rainbow={false}></CommanderV1>
           <Center className="nav-right-section" columnGap={[3, 8]} height="100%" marginLeft="auto">
             {inEditMode && (
               <Center
                 // transform="scaleX(-100%)"
                 cursor="pointer"
                 onClick={toggleEditor}
               >
                 <Icon
                   chakras={{
                     opacity: inEditorMode ? 1 : 0.3
                   }}
                   size="12px"
                   name="👀"
                 ></Icon>
                 {/* <Icon
                   size="12px"
                   name={inEditorMode ? "glowing star" : "star"}
                 ></Icon> */}
               </Center>
             )}
             {editorToggleable && (
               <Center transform="scaleX(-100%)" cursor="pointer" onClick={toggleEdit}>
                 <Icon
                   chakras={{
                     opacity: inEditMode ? 1 : 0.3
                   }}
                   size="12px"
                   name="🎨"
                 ></Icon>
                 {/* <Icon
                   size="12px"
                   name={inEditMode ? "glowing star" : "star"}
                 ></Icon> */}
               </Center>
             )}
             {/* TODO - Add conditional only show if loggedIn */}
             {/* <Center transform={['', 'scaleX(-100%)']} cursor="pointer">
               <Link to="/logout">
                 <Icon size="12px" name="🗝️"></Icon>
               </Link>
             </Center> */}
             <Center transform={['', 'scaleX(-100%)']} cursor="pointer">
               <Link to="/login">
                 <Icon size="12px" name="🌈"></Icon>
               </Link>
             </Center>
             <Center display={['flex', 'none']} cursor="pointer">
               <Link to="/">
                 <Icon size="12px" name="🦄"></Icon>
               </Link>
             </Center>
           </Center>
           {/* <RainbowSkeleton
             marginLeft="auto"
             width="25px"
             height="25px"
             cursor="pointer"
             onClick={toggleProfileDrawer}
             background="rgba(0,0,0,0.1)"
             sx={{}}
             borderRadius="999px"
           ></RainbowSkeleton> */}
           {/* <RainbowSkeleton w='40px' ml='auto' mr={"4px"}></RainbowSkeleton>
           <RainbowSkeleton></RainbowSkeleton> */}
         </Flex>
       </Box>
       {/* <ProfileDrawer isOpen={profileDrawerOpen}></ProfileDrawer> */}
     </>
   );
 };