bitvid/components/sidebar.html

<aside
  id="sidebar"
  class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-screen overflow-y-auto"
>
  <div class="flex flex-col h-full">
    <!-- Top Navigation Links -->
    <div class="flex-1 overflow-y-auto px-4">
      <div class="bg-gray-800 rounded-lg shadow-md mt-4 p-4">
        <nav class="flex flex-col space-y-2">
          <a
            href="#view=most-recent-videos"
            class="flex items-center py-2 px-4 hover:bg-gray-700 rounded font-semibold"
          >
            <img
              src="assets/svg/recent-icon.svg"
              alt="Recent"
              class="w-6 h-6 mr-3 flex-shrink-0"
            />
            <span class="sidebar-text">Recent</span>
          </a>
          <a
            href="#view=explore"
            class="flex items-center py-2 px-4 hover:bg-gray-700 rounded font-semibold"
          >
            <img
              src="assets/svg/explore-icon.svg"
              alt="Explore"
              class="w-6 h-6 mr-3 flex-shrink-0"
            />
            <span class="sidebar-text">Explore</span>
          </a>
          <a
            id="subscriptionsLink"
            href="#view=subscriptions"
            class="hidden flex items-center py-2 px-4 hover:bg-gray-700 rounded font-semibold"
          >
            <img
              src="assets/svg/subscriptions-icon.svg"
              alt="Subscriptions"
              class="w-6 h-6 mr-3 flex-shrink-0"
            />
            <span class="sidebar-text">Subscriptions</span>
          </a>
        </nav>
      </div>
    </div>

    <!-- Footer Links Container -->
    <div class="md:mt-auto px-4 pb-6">
      <div class="sidebar-dropup">
        <div
          id="sidebarResourceLinks"
          class="sidebar-dropup-panel sidebar-dropup-panel--collapsed"
          aria-hidden="true"
        >
          <div class="sidebar-dropup-panel__inner">
            <nav class="space-y-2 text-sm opacity-70">
          <a
            href="#view=about"
            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
          >
            <img
              src="assets/svg/about-icon.svg"
              alt="About"
              class="w-5 h-5 mr-3"
            />
            <span class="sidebar-text">About</span>
          </a>
          <a
            href="#view=community-guidelines"
            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
          >
            <img
              src="assets/svg/guidelines-icon.svg"
              alt="Guidelines"
              class="w-5 h-5 mr-3"
            />
            <span class="sidebar-text">Guidelines</span>
          </a>
          <a
            href="#view=getting-started"
            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
          >
            <img
              src="assets/svg/getting-started-icon.svg"
              alt="Getting Started"
              class="w-5 h-5 mr-3"
            />
            <span class="sidebar-text">Getting Started</span>
          </a>
          <a
            href="#view=roadmap"
            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
          >
            <img
              src="assets/svg/roadmap-icon.svg"
              alt="Roadmap"
              class="w-5 h-5 mr-3"
            />
            <span class="sidebar-text">Roadmap</span>
          </a>
          <a
            href="#view=blog"
            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
          >
            <img
              src="assets/svg/blog-icon.svg"
              alt="Blog"
              class="w-5 h-5 mr-3"
            />
            <span class="sidebar-text">Blog</span>
          </a>
          <a
            href="https://primal.net/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe"
            target="_blank"
            rel="noopener noreferrer"
            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
          >
            <img
              src="assets/svg/nostr-icon.svg"
              alt="Nostr"
              class="w-5 h-5 mr-3"
            />
            <span class="sidebar-text">Nostr</span>
          </a>
          <a
            href="https://github.com/PR0M3TH3AN/bitvid"
            target="_blank"
            rel="noopener noreferrer"
            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
          >
            <img
              src="assets/svg/github-icon.svg"
              alt="GitHub"
              class="w-5 h-5 mr-3"
            />
            <span class="sidebar-text">GitHub</span>
          </a>
          <a
            href="torrent/beacon.html"
            target="_blank"
            rel="noopener noreferrer"
            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
          >
            <img
              src="assets/svg/beacon-icon.svg"
              alt="βeacon"
              class="w-5 h-5 mr-3"
            />
            <span class="sidebar-text">βeacon</span>
          </a>
          <a
            href="https://beta.bitvid.network/"
            target="_blank"
            rel="noopener noreferrer"
            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
          >
            <img
              src="assets/svg/beta-icon.svg"
              alt="Beta"
              class="w-5 h-5 mr-3"
            />
            <span class="sidebar-text">Beta</span>
          </a>
          <a
            href="#view=links"
            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
          >
            <img
              src="assets/svg/links-icon.svg"
              alt="Links"
              class="w-5 h-5 mr-3"
            />
            <span class="sidebar-text">Links</span>
          </a>
          <a
            href="#view=ipns"
            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
          >
            <img
              src="assets/svg/ipns-icon.svg"
              alt="IPNS"
              class="w-5 h-5 mr-3"
            />
            <span class="sidebar-text">IPNS</span>
          </a>
          <a
            href="https://bitvid.network/"
            target="_blank"
            rel="noopener noreferrer"
            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
          >
            <img src="assets/svg/dns-icon.svg" alt="DNS" class="w-5 h-5 mr-3" />
            <span class="sidebar-text">DNS</span>
          </a>
            </nav>
          </div>
        </div>
        <button
          id="sidebarResourceToggle"
          class="sidebar-dropup-trigger"
          type="button"
          aria-expanded="false"
          aria-controls="sidebarResourceLinks"
        >
          <span class="sidebar-dropup-trigger__content">
            <img
              src="assets/svg/video-settings-gear.svg"
              alt="Open resources menu"
              class="w-5 h-5"
            />
            <span class="ml-3 text-sm font-semibold tracking-wide">Resources</span>
          </span>
          <svg
            id="sidebarResourceArrow"
            class="w-4 h-4 ml-3 transition-transform duration-300"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M5 15l7-7 7 7"
            />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <script>
    (function () {
      var toggleButton = document.getElementById("sidebarResourceToggle");
      var dropupPanel = document.getElementById("sidebarResourceLinks");
      var arrowIcon = document.getElementById("sidebarResourceArrow");
      if (toggleButton && dropupPanel) {
        var focusableItems = dropupPanel.querySelectorAll("a, button, [tabindex]");
        var setFocusableState = function (shouldDisable) {
          focusableItems.forEach(function (el) {
            if (shouldDisable) {
              el.setAttribute("tabindex", "-1");
            } else if (el.hasAttribute("data-original-tabindex")) {
              el.setAttribute("tabindex", el.getAttribute("data-original-tabindex"));
            } else {
              el.removeAttribute("tabindex");
            }
          });
        };

        focusableItems.forEach(function (el) {
          if (el.hasAttribute("tabindex")) {
            el.setAttribute("data-original-tabindex", el.getAttribute("tabindex"));
          }
        });

        setFocusableState(true);

        toggleButton.addEventListener("click", function () {
          var isExpanded = toggleButton.getAttribute("aria-expanded") === "true";
          toggleButton.setAttribute("aria-expanded", String(!isExpanded));
          dropupPanel.setAttribute("aria-hidden", String(isExpanded));
          dropupPanel.classList.toggle("sidebar-dropup-panel--expanded", !isExpanded);
          dropupPanel.classList.toggle("sidebar-dropup-panel--collapsed", isExpanded);
          setFocusableState(isExpanded);
          if (arrowIcon) {
            arrowIcon.classList.toggle("rotate-180", !isExpanded);
          }
        });
      }
    })();
  </script>
</aside>