Responsive/Collapsible horizontal nav or tabs into dropdown

[mauritskorse]

Inspired by the collapsible nav items here on github I tried to recreate that in flux:

First some tailwind and alpinejs prototype: https://codepen.io/mauritskorse/pen/vYoOGbe

I have gotten it to work using flux (see below). I use some javascript to clone the nav items into the dropdown, but it seems to be better if the cloning can be done statically within the blade file. Right now using the keyboard to navigate through this navigation doesn't seem to work yet.

<!-- resize-x is for demonstration only, remove this class from your code -->
<div x-data="collapsible()" class="flex flex-row h-14 min-w-12 resize-x overflow-hidden items-center">
    <flux:navbar class="flex flex-wrap overflow-hidden h-full">
        <div class="w-4 h-8"><!-- empty placeholder to make the first real item also wrappable --></div>
        <flux:navbar.item href="#">Dashboard</flux:navbar.item>
        <flux:navbar.item href="#">Transactions</flux:navbar.item>
        <flux:navbar.item href="#">Test</flux:navbar.item>

    </flux:navbar>

    <flux:spacer />

    <flux:dropdown class="has-[nav>*:not([aria-hidden])]:block hidden">
        <flux:navbar.item icon="ellipsis-horizontal"></flux:navbar.item>

        <flux:navmenu class="aria-hidden:*:hidden  *:!px-2">
            <flux:navmenu.item href="#">Profile</flux:navmenu.item>
            <flux:navmenu.item href="#">Settings</flux:navmenu.item>
            <flux:navmenu.item href="#">Billing</flux:navmenu.item>
        </flux:navmenu>
    </flux:dropdown>
</div>

document.addEventListener('alpine:init', () => {
  Alpine.data('collapsible', () => ({
      items: null,
      dropdown: null,
  
      init() {
          this.items = this.$el.querySelector('nav').children;
          this.dropdown = this.$el.querySelector('ui-dropdown nav');
  
          const visibilityObserver = new IntersectionObserver(entries => {
              for (let entry of entries) {
                  const el = entry.target;  
                  const clone = document.getElementById(el.dataset.cloneRef)
  
                  if (entry.intersectionRatio  < 0.9) {
                      el.setAttribute("aria-disabled", "true");
                      clone.removeAttribute("aria-hidden");
                  }
                  else{
                      if(el.hasAttribute("aria-disabled")){
                          el.removeAttribute("aria-disabled");
                          clone.setAttribute("aria-hidden", "true");
                      }
                  }
              }
          },
          {
              root: this.$el,
              rootMargin: "0px",
              threshold: 1.0,
          });
  
          Array.from(this.items).forEach((item, i) => {
              // if item has any contents (text or elements), clone it
              if(item.innerText.length > 0 || item.children.length > 0){
                  visibilityObserver.observe(item);
                  const clone = item.cloneNode(true);
                  clone.setAttribute("id", "dropdown-item-" + i);
                  clone.setAttribute("aria-hidden", "true");
                  item.setAttribute("data-clone-ref", "dropdown-item-" + i);
                  this.dropdown.appendChild(clone);
              }
          });
          
      },
  }))
})

[mauritskorse]

Got one working using tabs as well. Will still need some styling on the buttons that are inserted into the dropdown.
Hence, it would be preferable not to use a js solution to clone them into the dropdown, but to do this in the blade file.

    <flux:tab.group x-data="collapsible()">
        <!-- resize-x is for demonstration only, remove this from your code -->
        <div class="flex flex-row w-full h-10 min-w-12 resize-x overflow-hidden items-center
        data-[flux-tabs]:*:flex-wrap data-[flux-tabs]:*:overflow-hidden data-[flux-tabs]:*:h-10
        ">
            <flux:tabs class="data-[flux-tab]:*:h-10">
                <div class="w-4 h-8"><!-- empty placeholder to make the first real item also wrappable --></div>
                <flux:tab name="profile">Profile</flux:tab>
                <flux:tab name="account">Account</flux:tab>
                <flux:tab name="billing">Billing</flux:tab>
            </flux:tabs>

            <flux:spacer />

            <flux:dropdown class="has-[nav>*:not([aria-hidden])]:block hidden">
                <flux:navbar.item icon="ellipsis-horizontal"></flux:navbar.item>
                <flux:navmenu class="aria-hidden:*:hidden  *:!px-2">
                    <!-- in case a static item is inserted here, the dropdown button will always show -->
                </flux:navmenu>
            </flux:dropdown>
        </div>

        <flux:tab.panel name="profile">
            <flux:heading>Profile tab</flux:heading>
        </flux:tab.panel>
        <flux:tab.panel name="account">
            <flux:heading>Account tab</flux:heading>
        </flux:tab.panel>
        <flux:tab.panel name="billing">
            <flux:heading>Billing tab</flux:heading>
        </flux:tab.panel>
    </flux:tab.group>
        

document.addEventListener('alpine:init', () => {
  Alpine.data('collapsible', () => ({
      items: null,
      dropdown: null,
  
      init() {
          this.items = this.$el.querySelector('ui-tabs').children;
          this.dropdown = this.$el.querySelector('ui-dropdown nav');
  
          const visibilityObserver = new IntersectionObserver(entries => {

              for (let entry of entries) {
                  const el = entry.target;  
                  const clone = document.getElementById(el.dataset.cloneRef);
  
                  if (entry.intersectionRatio  < 0.9) {
                      el.setAttribute("aria-disabled", "true");
                      clone.removeAttribute("aria-hidden");
                  }
                  else{
                      if(el.hasAttribute("aria-disabled")){
                          el.removeAttribute("aria-disabled");
                          clone.setAttribute("aria-hidden", "true");
                      }
                  }
              }
          },
          {
              root: this.$el.querySelector('ui-tabs'),
          });
  
          Array.from(this.items).forEach((item, i) => {
              // if item has any contents (text or elements), clone it
              if(item.innerText.length > 0 || item.children.length > 0){
                  visibilityObserver.observe(item);
                  const clone = item.cloneNode(true);
                  clone.setAttribute("id", "dropdown-item-" + i);
                  clone.setAttribute("aria-hidden", "true");
                  clone.addEventListener("click", () => {
                      item._selectable.press(); // simulate a click on the original
                  });
                  item.setAttribute("data-clone-ref", "dropdown-item-" + i);
                  this.dropdown.appendChild(clone);
              }
          });
      },
  }))
})