G-Loot DS — dropdown in navbar

by Augustin Hiebel

HTML

<div className="w-full surface surface-ui-700 rounded-xl p-2 flex items-center justify-between">
  <a href="#" className="text-0 rounded-full bg-ui-800 border border-ui-600 p-1 block">
    <span className="icon icon-gloot-symbol text-main text-2xl" />
  </a>
  <div className="dropdown dropdown-end">
    <div tabIndex="1" className="flex items-center rounded-full border border-ui-600 bg-ui-600/25 interactive">
      <figure 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" alt="avatar" />
        </div>
      </figure>
      <span className="icon icon-arrow-sm-down mx-2" />
    </div>

    <div tabIndex="1" className="dropdown-content bg-ui-600 w-52 p-1">
      <ul className="menu menu-rounded menu-secondary">
        <li>
          <a tabIndex="1">
            <span className="icon icon-circle-09" />
            <span>Profile</span>
          </a>
        </li>
        <li>
          <a tabIndex="1">
            <span className="icon icon-wallet-43" />
            <span>Wallet</span>
          </a>
        </li>
        <li className="separator"></li>
        <li>
          <a tabIndex="1">
            <span className="icon icon-cogwheel" />
            <span>Settings</span>
          </a>
        </li>
        <li>
          <a tabIndex="1">
            <span className="icon icon-file-article" />
            <span>How G-Loot works</span>
          </a>
        </li>
        <li>
          <a tabIndex="1" href="#" rel="noopener noreferrer">
            <span className="icon icon-cloud-data-download" />
            <span>Download tracker</span>
          </a>
        </li>
        <li className="separator"></li>
        <li>
          <a tabIndex="1">
            <span className="icon icon-leave" />
            <span>Log out</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>