ahooks#useToggle TypeScript Examples

The following examples show how to use ahooks#useToggle. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Header.tsx    From nextjs-hasura-fullstack with MIT License 4 votes vote down vote up 
Header: React.FC<HeaderProps> = (props) => {
  const { onMenuClick } = props
  const router = useRouter()
  const { theme, toggleTheme } = useThemeCtx()
  const [isMenuOpen, { toggle: toggleMenu }] = useToggle(false)

  React.useEffect(() => {
    toggleMenu(false)
  }, [router.pathname])

  return (
    <header className="z-10 bg-white shadow-md dark:bg-gray-800">
      <div className="container flex justify-between px-3 py-2 mx-auto text-purple-600 dark:text-purple-300">
        {/* Mobile hamburger  */}
        <div className={`flex items-center item`}>
          {onMenuClick && (
            <button
              onClick={() => {
                onMenuClick()
              }}
              className="mr-4 rounded-md lg:hidden focus:outline-none focus:shadow-outline-purple"
              aria-label="Menu"
            >
              <HamburgerIcon />
            </button>
          )}
          <Logo />

          <div className={`hidden lg:flex lg:items-center lg:ml-4`}>
            {(routes || []).map((item, index) => (
              <CustomLink href={`${item.href}`} key={`${item.href}-${index}`}>
                {({ isActive, href }) => (
                  <a
                    href={href}
                    className={`block relative px-4 py-1 text-gray-600 dark:text-gray-300 hover:text-purple-600 hover:bg-purple-300 dark:hover:text-purple-400 rounded-md ${
                      isActive && `text-purple-600 dark:text-purple-400`
                    }`}
                  >
                    <span
                      className={`w-full text-sm font-semibold transition-colors duration-150`}
                    >
                      {item.name}
                    </span>
                  </a>
                )}
              </CustomLink>
            ))}
          </div>
        </div>

        {/* Right bar */}
        <div className="flex items-center space-x-4">
          <button
            onClick={() => toggleMenu()}
            className="ml-4 rounded-md lg:hidden focus:outline-none focus:shadow-outline-purple"
            aria-label="Menu"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              className={`w-6 h-6`}
            >
              <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
            </svg>
          </button>
          <div className={`hidden px-4 py-2 sm:block`}>
            <InputGroup>
              <InputAddon position="left">
                <SearchIcon />
              </InputAddon>
              <Input
                className="pl-10"
                placeholder="Search for projects"
                aria-label="Search"
                hasLeft
              />
            </InputGroup>
          </div>
          <button
            className="rounded-md focus:outline-none focus:shadow-outline-purple"
            onClick={toggleTheme}
            aria-label="Toggle color mode"
          >
            {theme === 'light' && <MoonIcon />}
            {theme === 'dark' && <SunIcon />}
          </button>
          {/* Notifications menu */}
          <Dropdown>
            <DropdownButton aria-label="Notifications" aria-haspopup="true">
              {({ toggleOpen }) => (
                <button
                  onClick={() => toggleOpen()}
                  className="relative align-middle rounded-md focus:outline-none focus:shadow-outline-purple"
                >
                  <NotificationIcon />
                  <span
                    aria-hidden="true"
                    className="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full dark:border-gray-800"
                  ></span>
                </button>
              )}
            </DropdownButton>
            <DropdownList isAlignRight>
              <DropdownItem className="justify-between">
                <span>Messages</span>
                <span className="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600">
                  13
                </span>
              </DropdownItem>
              <DropdownItem className="justify-between">
                <span>Sales</span>
                <span className="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600">
                  2
                </span>
              </DropdownItem>
              <DropdownItem className="justify-between">
                <span>Alerts</span>
              </DropdownItem>
            </DropdownList>
          </Dropdown>
          {/* Profile menu */}

          <SessionItem />
        </div>
      </div>
      {/* Menu link */}
      <Transition
        show={isMenuOpen}
        enter="transition duration-150"
        enterFrom="opacity-0"
        enterTo="opacity-100 translate-y-1/2"
        leave="transition duration-75"
        leaveFrom="opacity-100 "
        leaveTo="opacity-0"
        as="div"
        className={`container mx-auto`}
      >
        <div className={`lg:hidden lg:mr-32`}>
          <div className={`px-4 py-2 sm:hidden`}>
            <InputGroup>
              <InputAddon position="left">
                <SearchIcon />
              </InputAddon>
              <Input
                className="pl-10"
                placeholder="Search for projects"
                aria-label="Search"
                hasLeft
              />
            </InputGroup>
          </div>
          {(routes || []).map((item, index) => (
            <CustomLink href={`${item.href}`} key={`${item.href}-${index}`}>
              {({ isActive, href }) => (
                <a
                  href={href}
                  className={`block relative px-4 py-2 text-gray-600 dark:text-gray-300 hover:text-purple-600 hover:bg-purple-300 dark:hover:text-purple-400 ${
                    isActive && `text-purple-600 dark:text-purple-400`
                  }`}
                >
                  <span
                    className={`w-full text-sm font-semibold transition-colors duration-150`}
                  >
                    {item.name}
                  </span>
                </a>
              )}
            </CustomLink>
          ))}
        </div>
      </Transition>
    </header>
  )
}