thingtime_review/remix/app/components/Nav/Nav.tsx

import React from "react"
import { Box, Center, Flex } from "@chakra-ui/react"
import { Link } from "@remix-run/react"

import { Commander } from "../Commander/Commander"
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 toggleProfileDrawer = React.useCallback(() => {
    setProfileDrawerOpen(!profileDrawerOpen)
  }, [profileDrawerOpen])

  return (
    <>
      <Box
        position="fixed"
        zIndex={999}
        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="12px"
          paddingY="10px"
          // bg='white'
          // boxShadow={'0px 0px 10px rgba(0,0,0,0.1)'}
        >
          <Center
            width="25px"
            height="25px"
            marginRight="auto"
            transform="scaleX(-100%)"
            cursor="pointer"
          >
            <Link to="/">
              <Icon size="12px" name="unicorn"></Icon>
            </Link>
          </Center>
          <Commander global id="nav"></Commander>
          <Center
            width="25px"
            height="25px"
            marginLeft="auto"
            transform="scaleX(-100%)"
            cursor="pointer"
          >
            <Icon size="12px" name="rainbow"></Icon>
          </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> */}
    </>
  )
}