Navigation menu

by Imri Paloja

HTML

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-eb-dark">
  <nav
    class="bg-neutral-primary fixed w-full z-20 top-0 start-0 border-b border-default bg-eb-dark text-white"
  >
    <div
      class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"
    >
      <div
        class="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse"
      >
        <button
          type="button"
          class="flex text-sm bg-neutral-primary rounded-full md:me-0 focus:ring-4 focus:ring-neutral-tertiary"
          id="user-menu-button"
          aria-expanded="false"
          data-dropdown-toggle="user-dropdown"
          data-dropdown-placement="bottom"
          onclick="collapse.toggle()"
        >
          <span class="sr-only">Open user menu</span>
          <img
            class="w-8 h-8 rounded-full"
            src="https://dev.eurobytes.eu/img/teams/imri/imri-w360.avif"
            alt="user photo"
          />
        </button>
        <!-- Dropdown menu -->
        <div
          class="z-50 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-44"
          id="user-dropdown"
        >
          <div class="px-4 py-3 text-sm border-b border-default">
            <span class="block text-heading font-medium">Joseph McFall</span>
            <span class="block text-body truncate">[email protected]</span>
          </div>
          <ul
            class="p-2 text-sm text-body font-medium"
            aria-labelledby="user-menu-button"
          >
            <li>
              <a
                href="#"
                class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded"
                >Dashboard</a
              >
            </li>
            <li>
              <a
                href="#"
                class="inline-flex items-center w-full p-2...

Tailwind CSS

textarea {
  min-width: 250px;
  width: 450px;
  max-width: 100%;

  min-height: 250px;
  height: 100%;
  max-height: 450px;
}

JavaScript

tailwind.config = {
  theme: {
    extend: {
      colors: {
        'eb-red': '#e60000',
        'eb-dark': '#1b1e1f',
        'eb-gray': '#181a1b',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
};

// show the target element
//collapse.expand();

// hide the target element
//collapse.collapse();

// toggle the visibility of the target element
//collapse.toggle();

function toggleUserMenu() {
  // set the target element that will be collapsed or expanded (eg. navbar menu)
  const $targetEl = document.getElementById('user-dropdown');

  targetEl.toggle();

  // optionally set a trigger element (eg. a button, hamburger icon)
  const $triggerEl = document.getElementById('user-menu-button');

  // optional options with default values and callback functions
  const options = {
    onCollapse: () => {
      console.log('element has been collapsed');
    },
    onExpand: () => {
      console.log('element has been expanded');
    },
    onToggle: () => {
      console.log('element has been toggled');
    },
  };

  const instanceOptions = {
    id: 'user-dropdown',
    override: true,
  };

  collapse.toggle();
}