Refine desktop sidebar collapse experience

2026-11-05 04:12:25 +00:00 · 2025-10-06 15:29:29 -04:00
1 parent a453ead95e
commit bffd98247e
@@ -3,286 +3,263 @@
  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">
-  <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">
-        <div class="sidebar-desktop-toggle-row">
-          <button
-            id="sidebarCollapseToggle"
-            type="button"
-            class="sidebar-collapse-toggle"
-            aria-controls="sidebar"
-            aria-expanded="true"
+<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"
+        >
+          <span class="sr-only">Toggle sidebar</span>
+          <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"
          >
-            <span class="sr-only">Toggle sidebar</span>
-            <span class="sidebar-toggle-label">Collapse</span>
-            <svg
-              data-sidebar-chevron
-              class="w-4 h-4 transform transition-transform duration-300 sidebar-toggle-icon--rotated"
+            <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">
+      <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 hidden">
+        <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"
-              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="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"
+              class="sidebar-icon"
            />
-            <span class="sidebar-text">Recent</span>
+            <span class="sidebar-text">About</span>
          </a>
          <a
-            href="#view=explore"
-            class="flex items-center py-2 px-4 hover:bg-gray-700 rounded font-semibold"
+            href="#view=community-guidelines"
+            class="sidebar-nav-link sidebar-nav-link--sub"
+            title="Community Guidelines"
          >
            <img
-              src="assets/svg/explore-icon.svg"
-              alt="Explore"
-              class="w-6 h-6 mr-3 flex-shrink-0"
+              src="assets/svg/guidelines-icon.svg"
+              alt=""
+              aria-hidden="true"
+              class="sidebar-icon"
            />
-            <span class="sidebar-text">Explore</span>
+            <span class="sidebar-text">Guidelines</span>
          </a>
          <a
-            href="#view=history"
-            class="flex items-center py-2 px-4 hover:bg-gray-700 rounded font-semibold"
+            href="#view=getting-started"
+            class="sidebar-nav-link sidebar-nav-link--sub"
+            title="Getting Started"
          >
            <img
-              src="assets/svg/history-icon.svg"
-              alt="History"
-              class="w-6 h-6 mr-3 flex-shrink-0"
+              src="assets/svg/getting-started-icon.svg"
+              alt=""
+              aria-hidden="true"
+              class="sidebar-icon"
            />
-            <span class="sidebar-text">History</span>
+            <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
-            id="subscriptionsLink"
-            href="#view=subscriptions"
-            class="hidden flex items-center py-2 px-4 hover:bg-gray-700 rounded font-semibold"
+            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/subscriptions-icon.svg"
-              alt="Subscriptions"
-              class="w-6 h-6 mr-3 flex-shrink-0"
+              src="assets/svg/nostr-icon.svg"
+              alt=""
+              aria-hidden="true"
+              class="sidebar-icon"
            />
-            <span class="sidebar-text">Subscriptions</span>
+            <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>
-    </div>
-
-    <!-- Footer Links Toggle -->
-    <div class="md:mt-auto">
-      <div class="p-4">
-        <button
-          id="footerDropdownButton"
-          type="button"
-          class="flex items-center w-full py-2 px-4 bg-gray-800 hover:bg-gray-700 text-sm font-semibold text-gray-100 rounded shadow-md focus:outline-none transition-colors duration-200"
-          aria-expanded="false"
-          aria-controls="footerLinksContainer"
-        >
-          <!-- Arrow on the left side -->
-          <svg
-            id="footerDropdownIcon"
-            class="w-4 h-4 mr-2 transform 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="M19 9l-7 7-7-7"
-            />
-
-          </svg>
-          <span id="footerDropdownText">More</span>
-        </button>
-      </div>
-
-      <!-- Footer Links Container -->
-      <div id="footerLinksContainer" class="hidden">
-        <hr class="border-gray-700" />
-        <div class="p-4">
-          <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>
-    </div>
+    </footer>
  </div>
-
-  <script>
-    (function () {
-      var btn = document.getElementById("footerDropdownButton");
-      var footerLinks = document.getElementById("footerLinksContainer");
-      if (btn && footerLinks) {
-        btn.addEventListener("click", function () {
-          footerLinks.classList.toggle("hidden");
-          var isHidden = footerLinks.classList.contains("hidden");
-          btn.setAttribute("aria-expanded", String(!isHidden));
-          var icon = document.getElementById("footerDropdownIcon");
-          var textSpan = document.getElementById("footerDropdownText");
-          if (textSpan) {
-            textSpan.textContent = isHidden ? "More" : "Less";
-          }
-          if (icon) {
-            icon.classList.toggle("rotate-180", !isHidden);
-          }
-        });
-      }
-    })();
-  </script>
 </aside>
@@ -1451,38 +1451,6 @@ footer a:hover {
 }

 /* Sidebar default states */
-#sidebar .sidebar-desktop-toggle-row {
-  display: none;
-}
-
-.sidebar-collapse-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: inherit;
-  background: transparent;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  transition: color 150ms ease;
-}
-
-.sidebar-collapse-toggle:focus-visible {
-  outline: 0.125rem solid var(--color-secondary);
-  outline-offset: 0.25rem;
-}
-
-.sidebar-collapse-toggle:hover {
-  color: var(--color-secondary);
-}
-
-.sidebar-collapse-toggle svg {
-  width: 1rem;
-  height: 1rem;
-}
-
 #sidebar {
  position: fixed;
  top: 0;
@@ -1500,6 +1468,175 @@ footer a:hover {
  box-shadow: none;
 }

+#sidebar .sidebar__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  height: 100%;
+  padding: 1.5rem 1.25rem 1.75rem;
+}
+
+.sidebar-panel {
+  background: linear-gradient(
+    160deg,
+    rgba(30, 41, 59, 0.92) 0%,
+    rgba(15, 23, 42, 0.92) 100%
+  );
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 1rem;
+  box-shadow: 0 1.25rem 2.5rem rgba(15, 23, 42, 0.35);
+  padding: 1.25rem 1rem;
+}
+
+.sidebar-panel--primary {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.sidebar-panel__header {
+  display: none;
+  justify-content: flex-end;
+  margin-bottom: 1rem;
+}
+
+.sidebar-collapse-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  background: rgba(148, 163, 184, 0.08);
+  color: inherit;
+  cursor: pointer;
+  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
+}
+
+.sidebar-collapse-toggle:hover {
+  background: rgba(148, 163, 184, 0.18);
+  border-color: rgba(148, 163, 184, 0.35);
+  color: #f8fafc;
+}
+
+.sidebar-collapse-toggle:focus-visible {
+  outline: 0.125rem solid var(--color-secondary);
+  outline-offset: 0.25rem;
+}
+
+.sidebar-collapse-toggle__icon {
+  width: 1.125rem;
+  height: 1.125rem;
+  transition: transform 200ms ease;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.sidebar-nav-link {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.875rem;
+  border-radius: 0.875rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: rgba(226, 232, 240, 0.94);
+  text-decoration: none;
+  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
+}
+
+.sidebar-nav-link:hover {
+  background: rgba(148, 163, 184, 0.18);
+  color: #f8fafc;
+}
+
+.sidebar-nav-link:focus-visible {
+  outline: 0.125rem solid var(--color-secondary);
+  outline-offset: 0.25rem;
+}
+
+.sidebar-nav-link--sub {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: rgba(226, 232, 240, 0.82);
+  padding-block: 0.55rem;
+}
+
+.sidebar-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+}
+
+.sidebar-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.sidebar-dropup-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.75rem 0.875rem;
+  border-radius: 0.875rem;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(30, 41, 59, 0.85);
+  color: rgba(226, 232, 240, 0.9);
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
+}
+
+.sidebar-dropup-trigger:hover {
+  background: rgba(51, 65, 85, 0.95);
+  border-color: rgba(148, 163, 184, 0.32);
+  color: #f8fafc;
+}
+
+.sidebar-dropup-trigger:focus-visible {
+  outline: 0.125rem solid var(--color-secondary);
+  outline-offset: 0.25rem;
+}
+
+.sidebar-dropup-trigger__glyph {
+  width: 1.25rem;
+  height: 1.25rem;
+  opacity: 0.9;
+}
+
+.sidebar-dropup-trigger__chevron {
+  width: 1.125rem;
+  height: 1.125rem;
+  transition: transform 180ms ease;
+}
+
+.sidebar-dropup-trigger__chevron.is-rotated,
+.sidebar-dropup-trigger[aria-expanded="true"] .sidebar-dropup-trigger__chevron {
+  transform: rotate(180deg);
+}
+
+.sidebar-dropup-panel {
+  background: rgba(15, 23, 42, 0.88);
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 0.875rem;
+  box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.4);
+  padding: 0.75rem 0.5rem;
+}
+
+.sidebar-dropup-panel__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 #sidebar.sidebar-open {
  box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.45);
 }
@@ -1541,10 +1678,12 @@ body.sidebar-open #sidebarOverlay {

 /* Desktop (min-width: 768px): Always show the sidebar */
@media (min-width: 768px) {
-  #sidebar .sidebar-desktop-toggle-row {
+  .sidebar-panel__header {
    display: flex;
-    justify-content: flex-end;
-    margin-bottom: 0.5rem;
+  }
+
+  .sidebar-collapse-toggle {
+    display: inline-flex;
  }

  #sidebar {
@@ -1576,45 +1715,35 @@ body.sidebar-open #sidebarOverlay {
    --sidebar-width: var(--sidebar-width-expanded);
  }

-  body.sidebar-collapsed #sidebar a,
-  #sidebar.sidebar-collapsed a {
+  body.sidebar-collapsed #sidebar .sidebar-nav-link,
+  #sidebar.sidebar-collapsed .sidebar-nav-link {
    justify-content: center;
-    padding-inline: 1rem;
+    padding-inline: 0.5rem;
  }

-  body.sidebar-expanded #sidebar a,
-  #sidebar.sidebar-expanded a {
+  body.sidebar-expanded #sidebar .sidebar-nav-link,
+  #sidebar.sidebar-expanded .sidebar-nav-link {
    justify-content: flex-start;
-    padding-inline: 1rem;
+    padding-inline: 0.875rem;
  }

-  body.sidebar-collapsed #sidebar a > img,
-  body.sidebar-collapsed #sidebar a svg,
-  #sidebar.sidebar-collapsed a > img,
-  #sidebar.sidebar-collapsed a svg {
+  body.sidebar-collapsed #sidebar .sidebar-nav-link .sidebar-icon,
+  #sidebar.sidebar-collapsed .sidebar-nav-link .sidebar-icon {
    margin-right: 0;
    margin-inline-end: 0;
  }

-  body.sidebar-expanded #sidebar a > img,
-  body.sidebar-expanded #sidebar a svg,
-  #sidebar.sidebar-expanded a > img,
-  #sidebar.sidebar-expanded a svg {
+  body.sidebar-expanded #sidebar .sidebar-nav-link .sidebar-icon,
+  #sidebar.sidebar-expanded .sidebar-nav-link .sidebar-icon {
    margin-right: 0.75rem;
    margin-inline-end: 0.75rem;
  }

  body.sidebar-collapsed #sidebar .sidebar-text,
-  body.sidebar-collapsed #sidebar .sidebar-toggle-label,
-  #sidebar.sidebar-collapsed .sidebar-text,
-  #sidebar.sidebar-collapsed .sidebar-toggle-label {
+  #sidebar.sidebar-collapsed .sidebar-text {
    display: none;
  }

-  #sidebar.sidebar-expanded .sidebar-toggle-label {
-    display: inline;
-  }
-
  #sidebar .sidebar-toggle-icon--rotated {
    transform: rotate(180deg);
  }
@@ -1624,69 +1753,16 @@ body.sidebar-open #sidebarOverlay {
    transform: rotate(0deg);
  }

+  body.sidebar-collapsed #sidebar .sidebar-dropup-trigger {
+    justify-content: center;
+    padding-inline: 0.5rem;
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__chevron {
+    display: none;
+  }
 }

-/* Example: customizing the border & background in the sidebar */
-#sidebar hr {
-  border-color: rgba(255, 255, 255, 0.1);
-}
-
-/* Sidebar drop-up menu styling */
-.sidebar-dropup {
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 0.75rem;
-}
-
-.sidebar-dropup-panel {
-  background-color: #1f2937; /* gray-800 */
-  border: 0.0625rem solid rgba(148, 163, 184, 0.25);
-  border-radius: 0.75rem;
-  box-shadow: 0 1.125rem 2.1875rem rgba(15, 23, 42, 0.45);
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
-  pointer-events: none;
-  transform: translateY(1rem);
-  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease;
-}
-
-.sidebar-dropup-panel__inner {
-  padding: 1.25rem;
-}
-
-.sidebar-dropup-panel--expanded {
-  max-height: 40rem;
-  opacity: 1;
-  pointer-events: auto;
-  transform: translateY(0);
-}
-
-.sidebar-dropup-trigger {
-  align-items: center;
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(14, 116, 144, 0.35));
-  border: 0.0625rem solid rgba(148, 163, 184, 0.35);
-  border-radius: 9999px;
-  color: #f8fafc;
-  display: flex;
-  justify-content: space-between;
-  padding: 0.75rem 1.25rem;
-  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
-  width: 100%;
-}
-
-.sidebar-dropup-trigger:hover,
-.sidebar-dropup-trigger:focus {
-  border-color: rgba(148, 163, 184, 0.6);
-  box-shadow: 0 0.75rem 1.875rem rgba(37, 99, 235, 0.25);
-  outline: none;
-  transform: translateY(-0.0625rem);
-}
-
-.sidebar-dropup-trigger__content {
-  align-items: center;
-  display: flex;
-}
 .edit-field-button {
  align-items: center;
  background-color: #1f2937;
@@ -173,8 +173,6 @@ async function bootstrapInterface() {
  if (!collapseToggle) {
    console.warn("Sidebar collapse toggle not found; skipping density controls.");
  }
-  const collapseLabel = collapseToggle?.querySelector(".sidebar-toggle-label");
-  const appContainer = document.getElementById("app");

  const mobileMenuBtn = document.getElementById("mobileMenuBtn");
  const sidebarOverlay = document.getElementById("sidebarOverlay");
@@ -205,12 +203,12 @@ async function bootstrapInterface() {
  };

  const applySidebarDensity = (collapsed) => {
-    const widthTargets = [
-      document.documentElement,
-      document.body,
-      sidebar,
-      appContainer,
-    ].filter((element) => element instanceof HTMLElement);
+    const widthTargets = [document.documentElement, document.body].filter(
+      (element) => element instanceof HTMLElement,
+    );
+    if (sidebar instanceof HTMLElement) {
+      widthTargets.push(sidebar);
+    }
    const state = collapsed ? "collapsed" : "expanded";
    const nextWidth = collapsed
      ? SIDEBAR_WIDTH_COLLAPSED
@@ -236,10 +234,6 @@ async function bootstrapInterface() {
        collapsed ? "Expand sidebar" : "Collapse sidebar",
      );
    }
-
-    if (collapseLabel) {
-      collapseLabel.textContent = collapsed ? "Expand" : "Collapse";
-    }
  };

  const syncSidebarDensityToViewport = (isDesktopViewport) => {
@@ -349,17 +343,33 @@ async function bootstrapInterface() {
  }

  const footerDropdownButton = document.getElementById("footerDropdownButton");
-  if (footerDropdownButton) {
-    footerDropdownButton.addEventListener("click", () => {
-      const footerLinksContainer = document.getElementById("footerLinksContainer");
-      if (!footerLinksContainer) return;
-      footerLinksContainer.classList.toggle("hidden");
-      if (footerLinksContainer.classList.contains("hidden")) {
-        footerDropdownButton.innerHTML = "More &#9660;";
-      } else {
-        footerDropdownButton.innerHTML = "Less &#9650;";
+  const footerLinksContainer = document.getElementById("footerLinksContainer");
+  const footerDropdownLabel = document.getElementById("footerDropdownText");
+  const footerDropdownIcon = document.getElementById("footerDropdownIcon");
+
+  if (footerDropdownButton && footerLinksContainer) {
+    const syncFooterDropup = (expanded) => {
+      footerDropdownButton.setAttribute("aria-expanded", expanded ? "true" : "false");
+      footerDropdownButton.dataset.state = expanded ? "expanded" : "collapsed";
+      footerLinksContainer.classList.toggle("hidden", !expanded);
+
+      if (footerDropdownLabel) {
+        footerDropdownLabel.textContent = expanded ? "Less" : "More";
      }
+
+      if (footerDropdownIcon) {
+        footerDropdownIcon.classList.toggle("is-rotated", expanded);
+      }
+    };
+
+    footerDropdownButton.addEventListener("click", (event) => {
+      event.preventDefault();
+      const expanded = footerDropdownButton.getAttribute("aria-expanded") === "true";
+      syncFooterDropup(!expanded);
    });
+
+    const initialExpanded = footerDropdownButton.getAttribute("aria-expanded") === "true";
+    syncFooterDropup(initialExpanded);
  }

  try {