bitvid/components/sidebar.html

<!--
  Sidebar fades in once when hydrated on the client. js/index.js removes the
  helper classes after the initial animation to avoid flashes each time we
  re-render navigation links.
-->
<aside id="sidebar" class="fade-in fade-in-delay-100" data-state="expanded">
  <div class="sidebar__inner">
    <!-- Primary navigation -->
    <section class="sidebar-panel sidebar-panel--primary">
      <div class="sidebar-panel__header">
        <button
          id="sidebarCollapseToggle"
          type="button"
          class="sidebar-collapse-toggle"
          aria-controls="sidebar"
          aria-expanded="true"
          aria-label="Collapse sidebar"
          title="Collapse sidebar"
        >
          <svg
            data-sidebar-chevron
            class="sidebar-collapse-toggle__icon sidebar-toggle-icon--rotated"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M10 6l6 6-6 6" />
          </svg>
        </button>
      </div>
      <nav class="sidebar-nav" aria-label="Primary">
        <a href="#view=most-recent-videos" class="sidebar-nav-link" title="Recent">
          <img
            src="assets/svg/recent-icon.svg"
            alt=""
            aria-hidden="true"
            class="sidebar-icon"
          />
          <span class="sidebar-text">Recent</span>
        </a>
        <a href="#view=explore" class="sidebar-nav-link" title="Explore">
          <img
            src="assets/svg/explore-icon.svg"
            alt=""
            aria-hidden="true"
            class="sidebar-icon"
          />
          <span class="sidebar-text">Explore</span>
        </a>
        <a href="#view=history" class="sidebar-nav-link" title="History">
          <img
            src="assets/svg/history-icon.svg"
            alt=""
            aria-hidden="true"
            class="sidebar-icon"
          />
          <span class="sidebar-text">History</span>
        </a>
        <a
          id="subscriptionsLink"
          href="#view=subscriptions"
          class="sidebar-nav-link hidden"
          title="Subscriptions"
        >
          <img
            src="assets/svg/subscriptions-icon.svg"
            alt=""
            aria-hidden="true"
            class="sidebar-icon"
          />
          <span class="sidebar-text">Subscriptions</span>
        </a>
      </nav>
    </section>

    <!-- Footer Links Toggle -->
    <footer class="sidebar-footer" data-footer-state="collapsed">
      <button
        id="footerDropdownButton"
        type="button"
        class="sidebar-dropup-trigger"
        aria-expanded="false"
        aria-controls="footerLinksContainer"
      >
        <img
          src="assets/svg/ellipsis.svg"
          alt=""
          aria-hidden="true"
          class="sidebar-icon sidebar-dropup-trigger__glyph"
        />
        <span id="footerDropdownText" class="sidebar-text">More</span>
        <svg
          id="footerDropdownIcon"
          class="sidebar-dropup-trigger__chevron"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M6 9l6 6 6-6" />
        </svg>
      </button>

      <!-- Footer Links Container -->
      <div
        id="footerLinksContainer"
        class="sidebar-dropup-panel"
        aria-hidden="true"
        data-state="collapsed"
      >
        <nav class="sidebar-dropup-panel__inner" aria-label="Secondary">
          <a href="#view=about" class="sidebar-nav-link sidebar-nav-link--sub" title="About">
            <img
              src="assets/svg/about-icon.svg"
              alt=""
              aria-hidden="true"
              class="sidebar-icon"
            />
            <span class="sidebar-text">About</span>
          </a>
          <a
            href="#view=community-guidelines"
            class="sidebar-nav-link sidebar-nav-link--sub"
            title="Community Guidelines"
          >
            <img
              src="assets/svg/guidelines-icon.svg"
              alt=""
              aria-hidden="true"
              class="sidebar-icon"
            />
            <span class="sidebar-text">Guidelines</span>
          </a>
          <a
            href="#view=getting-started"
            class="sidebar-nav-link sidebar-nav-link--sub"
            title="Getting Started"
          >
            <img
              src="assets/svg/getting-started-icon.svg"
              alt=""
              aria-hidden="true"
              class="sidebar-icon"
            />
            <span class="sidebar-text">Getting Started</span>
          </a>
          <a href="#view=roadmap" class="sidebar-nav-link sidebar-nav-link--sub" title="Roadmap">
            <img
              src="assets/svg/roadmap-icon.svg"
              alt=""
              aria-hidden="true"
              class="sidebar-icon"
            />
            <span class="sidebar-text">Roadmap</span>
          </a>
          <a href="#view=blog" class="sidebar-nav-link sidebar-nav-link--sub" title="Blog">
            <img
              src="assets/svg/blog-icon.svg"
              alt=""
              aria-hidden="true"
              class="sidebar-icon"
            />
            <span class="sidebar-text">Blog</span>
          </a>
          <a
            href="https://primal.net/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe"
            target="_blank"
            rel="noopener noreferrer"
            class="sidebar-nav-link sidebar-nav-link--sub"
            title="Nostr"
          >
            <img
              src="assets/svg/nostr-icon.svg"
              alt=""
              aria-hidden="true"
              class="sidebar-icon"
            />
            <span class="sidebar-text">Nostr</span>
          </a>
          <a
            href="https://github.com/PR0M3TH3AN/bitvid"
            target="_blank"
            rel="noopener noreferrer"
            class="sidebar-nav-link sidebar-nav-link--sub"
            title="GitHub"
          >
            <img
              src="assets/svg/github-icon.svg"
              alt=""
              aria-hidden="true"
              class="sidebar-icon"
            />
            <span class="sidebar-text">GitHub</span>
          </a>
          <a
            href="torrent/beacon.html"
            target="_blank"
            rel="noopener noreferrer"
            class="sidebar-nav-link sidebar-nav-link--sub"
            title="βeacon"
          >
            <img
              src="assets/svg/beacon-icon.svg"
              alt=""
              aria-hidden="true"
              class="sidebar-icon"
            />
            <span class="sidebar-text">βeacon</span>
          </a>
          <a
            href="https://beta.bitvid.network/"
            target="_blank"
            rel="noopener noreferrer"
            class="sidebar-nav-link sidebar-nav-link--sub"
            title="Beta"
          >
            <img
              src="assets/svg/beta-icon.svg"
              alt=""
              aria-hidden="true"
              class="sidebar-icon"
            />
            <span class="sidebar-text">Beta</span>
          </a>
          <a href="#view=links" class="sidebar-nav-link sidebar-nav-link--sub" title="Links">
            <img
              src="assets/svg/links-icon.svg"
              alt=""
              aria-hidden="true"
              class="sidebar-icon"
            />
            <span class="sidebar-text">Links</span>
          </a>
          <a href="#view=ipns" class="sidebar-nav-link sidebar-nav-link--sub" title="IPNS">
            <img
              src="assets/svg/ipns-icon.svg"
              alt=""
              aria-hidden="true"
              class="sidebar-icon"
            />
            <span class="sidebar-text">IPNS</span>
          </a>
          <a
            href="https://bitvid.network/"
            target="_blank"
            rel="noopener noreferrer"
            class="sidebar-nav-link sidebar-nav-link--sub"
            title="DNS"
          >
            <img
              src="assets/svg/dns-icon.svg"
              alt=""
              aria-hidden="true"
              class="sidebar-icon"
            />
            <span class="sidebar-text">DNS</span>
          </a>
        </nav>
      </div>
    </footer>
  </div>
</aside>