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 sidebar-collapsed"
  data-state="collapsed"
  data-ds="new"
>
  <div class="sidebar__inner">
    <div class="sidebar-scroll">
      <!-- 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="false"
            aria-label="Expand sidebar"
            title="Expand 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="#"
              data-blog-link
              class="sidebar-nav-link sidebar-nav-link--sub"
              title="Blog"
              rel="noopener noreferrer"
            >
              <img
                src="assets/svg/blog-icon.svg"
                alt=""
                aria-hidden="true"
                class="sidebar-icon"
              />
              <span class="sidebar-text">Blog</span>
            </a>
            <a
              href="#"
              data-nostr-link
              class="sidebar-nav-link sidebar-nav-link--sub"
              title="Nostr"
              rel="noopener noreferrer"
            >
              <img
                src="assets/svg/nostr-icon.svg"
                alt=""
                aria-hidden="true"
                class="sidebar-icon"
              />
              <span class="sidebar-text">Nostr</span>
            </a>
            <a
              href="#"
              data-community-link
              class="sidebar-nav-link sidebar-nav-link--sub"
              title="Community"
              rel="noopener noreferrer"
            >
              <svg
                class="sidebar-icon"
                width="24"
                height="24"
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                fill-rule="evenodd"
                clip-rule="evenodd"
                aria-hidden="true"
              >
                <path
                  d="M24 20h-3v4l-5.333-4h-7.667v-4h2v2h6.333l2.667 2v-2h3v-8.001h-2v-2h4v12.001zm-6-6h-9.667l-5.333 4v-4h-3v-14.001h18v14.001zm-13-8c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1zm4 0c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1zm4 0c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1z"
                />
              </svg>
              <span class="sidebar-text">Community</span>
            </a>
            <a
              href="#"
              data-github-link
              class="sidebar-nav-link sidebar-nav-link--sub"
              title="GitHub"
              rel="noopener noreferrer"
            >
              <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="#"
              data-beta-link
              class="sidebar-nav-link sidebar-nav-link--sub"
              title="Beta"
              rel="noopener noreferrer"
            >
              <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="#"
              data-dns-link
              class="sidebar-nav-link sidebar-nav-link--sub"
              title="DNS"
              rel="noopener noreferrer"
            >
              <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>
  </div>
</aside>