How do we collapse with javascript/buttons programmatically?

[Routhinator]

I want the menus I've created to collapse whenever a button is pressed or a menu item is pressed.

Specifically I've created a mainMenu collapsable fixed navbar, and I've created a FAB (Fast action button) called fabMenu in the lower right. When the menu is opened and then an item is clicked, I need the menu to close, and same for the fab. Likewise when the fab is opened and the menu is already opened, the menu should close, and vice versa.

I did this easily with ng-bootstrap (I'm in angular) as the collapse component exposes the collapse state in a way that I could set it to true/false for each collapsable element.

I see the Collapse class we have to import in Angular has show() and hide() methods, but I'm uncertain how to use it to target specific elements and control their state from my component rather than css. It's possible I might be able to do this with pure html/css as well - but there are no relevant examples covering this use case in the docs.

[Routhinator]

🤦 Nevermind, found the API docs, was missing the tap at the top of the docs.

https://tailwind-elements.com/docs/standard/components/collapse/#docsTabsAPI

[Routhinator]

I take it back. I cannot work out how to use the show/hide functions using the Javascript method of initializing collapse.

[Routhinator]

Ok, finally worked out the way to do this AND in an Angular Universal (SSR) safe way:

import {Component, ElementRef, Inject, OnInit, ViewChild} from '@angular/core';
import {UserAuthService} from '../../services/user-auth.service';
import {ModalService} from '../../services/modal.service';
import {User} from '../../models/user.model';
import {Subscription} from 'rxjs';
import {Collapse} from 'tw-elements';

@Component({
  selector: 'app-nav-bar',
  templateUrl: 'nav-bar.component.html',
  styleUrls: ['nav-bar.component.scss']
})
export class NavBarComponent implements OnInit{
  public mainMenuCollapse;
  public fabMenuCollapse;
  public mainMenuElement: ElementRef;
  public fabMenuElement: ElementRef;
  @ViewChild('mainMenu', {static: false, read: ElementRef}) set mainMenuContent(mainMenu: ElementRef) {
    if (mainMenu) {
      this.mainMenuElement = mainMenu;
      this.mainMenuCollapse = new Collapse(this.mainMenuElement.nativeElement, {
        toggle: false
      });
      console.log('mainMenu Element initialized.')
    }
  };
  @ViewChild('fabMenu', {static: false, read: ElementRef}) set fabMenuContent(fabMenu: ElementRef) {
    if (fabMenu) {
      this.fabMenuElement = fabMenu;
      this.fabMenuCollapse = new Collapse(this.fabMenuElement.nativeElement, {
        toggle: false
      });
      console.log('fabMenu Element initialized.')
    }
  };
  public user: User;
  public refreshUserObservable: Subscription;

  constructor(
    public modalService: ModalService,
    public userAuthService: UserAuthService,
  ) {}

  ngOnInit() {
    this.refreshUserObservable = this.userAuthService.refreshBehaviorSubject.subscribe(
      user => (this.user = user)
    )
  }

  public fabOpen() {
    if (this.fabMenuElement) {
      return this.fabMenuElement.nativeElement.hasAttribute('data-te-collapse-show')
    } else {
      return false;
    }
  };

}

<nav
  class="fixed top-0 z-50 flex-no-wrap flex w-full items-center bg-zinc-50 dark:bg-zinc-950 py-3"
  role="navigation">
  <div class="flex w-full flex-wrap items-center justify-between px-3 text-zinc-950 dark:text-zinc-50">
    <button
      title="Main Menu"
      class="block border dark:border-zinc-900 rounded bg-transparent py-[0.25rem] px-[0.75rem] text-neutral-500 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-200"
      type="button"
      data-te-collapse-init
      data-te-target="#mainMenu"
      aria-controls="mainMenu"
      aria-expanded="false"
      aria-label="Toggle navigation"
      (click)="mainMenuCollapse.toggle()">
      <img class="w-auto max-h-[45px]" alt="The Den of Amateur Writing Logo" src="/assets/images/logos/logo-minimal-white.png"/>
    </button>

    <div *ngIf="userAuthService.isAuthenticated" class='relative flex items-center'>
      <a title="Log Out" class="nav-link td-nav-button ms-1" routerLink="/logout" (click)="fabMenuCollapse.hide(); mainMenuCollapse.hide()">
        <app-logout-icon [iconSize]="25" class="icon"></app-logout-icon>
      </a>
      <a title="Notifications" class="nav-link td-nav-button ms-1" (click)="fabMenuCollapse.hide(); mainMenuCollapse.hide(); modalService.notifications()">
        <app-notifications-icon [iconSize]="25" class="icon"></app-notifications-icon>
      </a>
      <a title="User Dashboard" class="nav-link td-nav-button ms-1" routerLink="/dash" (click)="fabMenuCollapse.hide(); mainMenuCollapse.hide()">
        <app-avatar [username]="user.username" [slug]="user.slug" [avatar]="user.avatar" [type]="'navbar'"></app-avatar>
      </a>
    </div>

    <div *ngIf="userAuthService.isAuthenticated === false" class='navbar-nav float-lg-right keep-horizontal td-user-nav'>
      <a title="Login" class="nav-link td-nav-button ms-1" routerLink="/login" (click)="fabMenuCollapse.hide(); mainMenuCollapse.hide()">
        <app-login-icon [iconSize]="25" class="icon"></app-login-icon>
      </a>

      <a title="Register" class="nav-link td-nav-button ms-1" routerLink="/register" (click)="fabMenuCollapse.hide(); mainMenuCollapse.hide()">
        <app-person-add-icon [iconSize]="25" class="icon"></app-person-add-icon>
      </a>
    </div>

    <div
      class="!visible hidden flex-grow basis-[100%] items-center td-menu"
      id="mainMenu"
      #mainMenu
      data-te-collapse-item>
      <ul class='list-style-none mr-auto flex flex-col pl-0' data-te-navbar-nav-ref>
        <li class="my-2" data-te-nav-item-ref><a class="nav-link" routerLink="/" (click)="fabMenuCollapse.hide(); mainMenuCollapse.hide()">Home</a></li>
        <li class="my-2" data-te-nav-item-ref><a class="nav-link" routerLink="/feed" (click)="fabMenuCollapse.hide(); mainMenuCollapse.hide()">Latest Activity</a></li>
        <li class="my-2" data-te-nav-item-ref><a class="nav-link" routerLink="/members" (click)="fabMenuCollapse.hide(); mainMenuCollapse.hide()">Members</a></li>
        <li class="my-2" data-te-nav-item-ref><a class="nav-link" routerLink='/library' (click)="fabMenuCollapse.hide(); mainMenuCollapse.hide()">Library</a></li>
        <li class="my-2" data-te-nav-item-ref><a class="nav-link" routerLink='/discussions' (click)="fabMenuCollapse.hide(); mainMenuCollapse.hide()">Discussions</a></li>
        <li class="my-2" data-te-nav-item-ref><a class="nav-link" routerLink='/docs' (click)="fabMenuCollapse.hide(); mainMenuCollapse.hide()">Docs</a></li>
      </ul>
    </div>

  </div>
</nav>

<div class="fab-tray" *ngIf="userAuthService.isAuthenticated">
  <div
    class="!visible hidden flex-grow basis-[100%] items-center"
    id="fabMenu"
    #fabMenu
    data-te-collapse-item>
    <div class="fab-box mb-2"><span class="fab-label me-2">New Writing</span><button class="fab" (click)="fabMenuCollapse.hide(); mainMenuCollapse.hide(); modalService.writingsForm()"><app-edit-icon iconSize="36"></app-edit-icon></button></div>
    <div class="fab-box mb-2"><span class="fab-label me-2">New Message</span><button class="fab" (click)="fabMenuCollapse.hide(); mainMenuCollapse.hide(); modalService.privateMessageForm()"><app-mail-icon [iconSize]="36"></app-mail-icon></button></div>
    <div class="fab-box mb-2"><span class="fab-label me-2">New Discussion</span><button class="fab" (click)="fabMenuCollapse.hide(); mainMenuCollapse.hide(); modalService.discussionForm()"><app-forum-icon [iconSize]="36"></app-forum-icon></button></div>
    <div class="fab-box mb-2"><span class="fab-label me-2">Shoutbox</span><button class="fab" (click)="fabMenuCollapse.hide(); mainMenuCollapse.hide(); modalService.shoutBox()"><app-campaign-icon [iconSize]="36"></app-campaign-icon></button></div>
  </div>
  <span class="fab-box">
    <span class="fab-label me-2" *ngIf="fabOpen()">Close</span>
    <button
      class="fab"
      data-te-collapse-init
      data-te-target="#fabMenu"
      aria-expanded="false"
      aria-controls="fabMenu"
      type="button"
      title="Open Fast Action Bar"
      (click)="fabMenuCollapse.toggle()">
      <app-edit-icon [iconSize]="36" *ngIf="!fabOpen()"></app-edit-icon>
      <app-close-icon [iconSize]="36" *ngIf="fabOpen()"></app-close-icon>
    </button>
  </span>
</div>