G-Loot DS — navbar with search input and dropdown

by Augustin Hiebel

HTML

<div className="navbar bg-ui-900/95 rounded-lg shadow-lg">
  <div className="navbar-content container">
    <div className="flex-1">
      <a className="button button-ghost text-xl">
        <span>G-Loot</span>
      </a>
    </div>
    <div className='flex-none form-group"'>
      <div className="form-group">
        <input type="password" name="first-name" id="first-name" placeholder="Search" className="input-sm" />
      </div>
    </div>
    <div className="flex-none flex items-center ml-1">
      <div className="dropdown dropdown-end">
        <div tabIndex="0" className="avatar avatar-circle avatar-xs ">
          <div>
            <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_5.jpg" />
          </div>
        </div>
        <div tabIndex="0" className="dropdown-content bg-ui-600 w-52 p-1">
          <ul className="menu menu-rounded">
            <li>
              <a>
                <span className="icon icon-wallet-43" />
                <span>Wallet</span>
              </a>
            </li>
            <li>
              <a>
                <span className="icon icon-circle-09" />
                <span>Public profile</span>
              </a>
            </li>
            <li>
              <a>
                <span className="icon icon-cogwheel" />
                <span>Settings</span>
              </a>
            </li>
            <li>
              <a>
                <span className="icon icon-leave" />
                <span>Log out</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>