Method render

packages/omi-templates/src/components/navbar.tsx:135–268

()

    }
  }
  render() {
    return (
      <nav class="container mx-auto flex flex-wrap items-center">
        <div class="block md:hidden">
          <button
            onClick={this.onClick}
            data-collapse-toggle="navbar-multi-level"
            type="button"
            class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-zinc-500 rounded-lg md:hidden hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-zinc-600"
            aria-controls="navbar-multi-level"
            aria-expanded="false"
          >
            {this.state.isOpen ? (
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-width="2"
                  d="M12 12L19 19M12 12L5 5M12 12L5 19M12 12L19 5"
                ></path>
              </svg>
            ) : (
              <svg
                class="w-5 h-5"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 17 14"
              >
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M1 1h15M1 7h15M1 13h15"
                />
              </svg>
            )}
          </button>
        </div>
        <div
          class={classNames(
            'max-h-[calc(100vh-50px)] overflow-auto md:overflow-visible  w-full left-0 fixed top-14 pt-6 pb-14 md:pt-0 md:pb-0 whitespace-nowrap bg-[#fafafa] md:bg-transparent text-center md:w-auto md:flex-grow dark:bg-background md:dark:bg-transparent md:flex md:items-center md:static text-foreground',
            {
              hidden: !this.state.isOpen,
            },
          )}
        >
          <ul class="w-[288px] mx-auto md:w-full md:flex md:flex-row text-left">
            {this.props.items.map((navbarItem: NavbarItem) => {
              if (navbarItem.tag) {
                return (
                  <li class="md:relative md:mr-2 p-1 border-b md:border-none group md:rounded-md">
                    <navbarItem.tag></navbarItem.tag>
                  </li>
                )
              }