Default sidebar to collapsed state by default

This commit is contained in:
thePR0M3TH3AN committed 2025-10-06 20:06:43 -04:00
1 parent b3b467755a
commit 8ad39b5cf6
9 files changed
+55 -31

No files matched your search

@@ -4,7 +4,7 @@
<meta charset="utf-8" />
<title>bitvid Whitelist Application Form</title>
<!-- Link to your main stylesheet -->
<link rel="stylesheet" href="../../css/style.css?v=2024.10.20" />
<link rel="stylesheet" href="../../css/style.css?v=2024.10.22" />
<style>
/* Override for form page to match modal field styling */
@@ -4,7 +4,7 @@
<meta charset="utf-8" />
<title>bitvid Bug Report Form</title>
<!-- Link to your main stylesheet -->
<link rel="stylesheet" href="../../css/style.css?v=2024.10.20" />
<link rel="stylesheet" href="../../css/style.css?v=2024.10.22" />
<style>
/* Override for form page to match modal field styling */
@@ -4,7 +4,7 @@
<meta charset="utf-8" />
<title>bitvid Content Appeals Form</title>
<!-- Link to your main stylesheet -->
<link rel="stylesheet" href="../../css/style.css?v=2024.10.20" />
<link rel="stylesheet" href="../../css/style.css?v=2024.10.22" />
<style>
/* Override for form page to match modal field styling */
@@ -4,7 +4,7 @@
<meta charset="utf-8" />
<title>bitvid General Feedback Form</title>
<!-- Link to your main stylesheet -->
<link rel="stylesheet" href="../../css/style.css?v=2024.10.20" />
<link rel="stylesheet" href="../../css/style.css?v=2024.10.22" />
<style>
/* Override for form page to match modal field styling */
@@ -4,7 +4,7 @@
<meta charset="utf-8" />
<title>bitvid Feature Request Form</title>
<!-- Link to your main stylesheet -->
<link rel="stylesheet" href="../../css/style.css?v=2024.10.20" />
<link rel="stylesheet" href="../../css/style.css?v=2024.10.22" />
<style>
/* Override for form page to match modal field styling */
+8 -4
View File
@@ -3,7 +3,11 @@
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">
<aside
id="sidebar"
class="fade-in fade-in-delay-100 sidebar-collapsed"
data-state="collapsed"
>
<div class="sidebar__inner">
<div class="sidebar-scroll">
<!-- Primary navigation -->
@@ -14,9 +18,9 @@
type="button"
class="sidebar-collapse-toggle"
aria-controls="sidebar"
aria-expanded="true"
aria-label="Collapse sidebar"
title="Collapse sidebar"
aria-expanded="false"
aria-label="Expand sidebar"
title="Expand sidebar"
>
<svg
data-sidebar-chevron
+1 -1
View File
@@ -1 +1 @@
export const ASSET_VERSION = "2024.10.20";
export const ASSET_VERSION = "2024.10.22";
+15 -15
View File
@@ -50,12 +50,12 @@
so browsers pick up the latest sidebar markup and styling without
hard-refreshing around CDN caches.
-->
<script src="js/tracking.js?v=2024.10.20" defer></script>
<link href="css/tailwind.generated.css?v=2024.10.20" rel="stylesheet" />
<link href="css/style.css?v=2024.10.20" rel="stylesheet" />
<link href="css/markdown.css?v=2024.10.20" rel="stylesheet" />
<script src="js/tracking.js?v=2024.10.22" defer></script>
<link href="css/tailwind.generated.css?v=2024.10.22" rel="stylesheet" />
<link href="css/style.css?v=2024.10.22" rel="stylesheet" />
<link href="css/markdown.css?v=2024.10.22" rel="stylesheet" />
</head>
<body>
<body class="sidebar-collapsed">
<!--
SIDEBAR CONTAINER:
The <aside id="sidebar"> inside handles visibility.
@@ -211,16 +211,16 @@
<!-- Additional Scripts -->
<!-- Bootstraps nostr-tools before other modules rely on nostrToolsReady -->
<script type="module" src="js/nostrToolsBootstrap.js?v=2024.10.20"></script>
<script type="module" src="js/config.js?v=2024.10.20"></script>
<script type="module" src="js/lists.js?v=2024.10.20"></script>
<script type="module" src="js/accessControl.js?v=2024.10.20"></script>
<script type="module" src="js/webtorrent.js?v=2024.10.20"></script>
<script type="module" src="js/nostr.js?v=2024.10.20"></script>
<script type="module" src="js/viewManager.js?v=2024.10.20"></script>
<script type="module" src="js/bootstrap.js?v=2024.10.20"></script>
<script type="module" src="js/disclaimer.js?v=2024.10.20"></script>
<script type="module" src="js/index.js?v=2024.10.20"></script>
<script type="module" src="js/nostrToolsBootstrap.js?v=2024.10.22"></script>
<script type="module" src="js/config.js?v=2024.10.22"></script>
<script type="module" src="js/lists.js?v=2024.10.22"></script>
<script type="module" src="js/accessControl.js?v=2024.10.22"></script>
<script type="module" src="js/webtorrent.js?v=2024.10.22"></script>
<script type="module" src="js/nostr.js?v=2024.10.22"></script>
<script type="module" src="js/viewManager.js?v=2024.10.22"></script>
<script type="module" src="js/bootstrap.js?v=2024.10.22"></script>
<script type="module" src="js/disclaimer.js?v=2024.10.22"></script>
<script type="module" src="js/index.js?v=2024.10.22"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
</body>
+26 -6
View File
@@ -189,14 +189,21 @@ async function bootstrapInterface() {
const SIDEBAR_COLLAPSED_STORAGE_KEY = "sidebarCollapsed";
const SIDEBAR_WIDTH_EXPANDED = "16rem";
const SIDEBAR_WIDTH_COLLAPSED = "4rem";
let isSidebarCollapsed = false;
const DEFAULT_SIDEBAR_COLLAPSED = true;
let isSidebarCollapsed = DEFAULT_SIDEBAR_COLLAPSED;
let isFooterDropupExpanded = false;
let syncFooterDropupFn = null;
const readStoredSidebarCollapsed = () => {
try {
return localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY) === "true";
const storedValue = localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY);
if (storedValue === null) {
return DEFAULT_SIDEBAR_COLLAPSED;
}
return storedValue === "true";
} catch (error) {
console.warn("Unable to read sidebar collapse state from storage:", error);
return false;
return DEFAULT_SIDEBAR_COLLAPSED;
}
};
@@ -246,6 +253,14 @@ async function bootstrapInterface() {
collapseToggle.setAttribute("aria-label", actionLabel);
collapseToggle.setAttribute("title", actionLabel);
}
if (
collapsed &&
isFooterDropupExpanded &&
typeof syncFooterDropupFn === "function"
) {
syncFooterDropupFn(false);
}
};
const syncSidebarDensityToViewport = (isDesktopViewport) => {
@@ -362,7 +377,7 @@ async function bootstrapInterface() {
if (footerDropdownButton && footerLinksContainer) {
const sidebarFooter = footerDropdownButton.closest(".sidebar-footer");
const syncFooterDropup = (expanded) => {
syncFooterDropupFn = (expanded) => {
const nextState = expanded ? "expanded" : "collapsed";
const actionLabel = expanded ? "Show fewer sidebar links" : "Show more sidebar links";
@@ -390,6 +405,7 @@ async function bootstrapInterface() {
if (sidebarFooter instanceof HTMLElement) {
sidebarFooter.dataset.footerState = nextState;
}
isFooterDropupExpanded = expanded;
};
footerDropdownButton.addEventListener("click", (event) => {
@@ -403,11 +419,15 @@ async function bootstrapInterface() {
persistSidebarCollapsed(nextCollapsed);
}
syncFooterDropup(!expanded);
if (typeof syncFooterDropupFn === "function") {
syncFooterDropupFn(!expanded);
}
});
const initialExpanded = footerDropdownButton.getAttribute("aria-expanded") === "true";
syncFooterDropup(initialExpanded);
if (typeof syncFooterDropupFn === "function") {
syncFooterDropupFn(initialExpanded);
}
}
try {