diff --git a/apps/home/static/home/css/sidebar.css b/apps/home/static/home/css/sidebar.css index 6fab53b..af4603b 100644 --- a/apps/home/static/home/css/sidebar.css +++ b/apps/home/static/home/css/sidebar.css @@ -1,16 +1,65 @@ +/* Show Sidebar Button */ + +.reveal-sidebar-btn { + display: none; + position: fixed; + bottom: 1rem; + right: 1rem; +} + + +/* Hide Sidebar Button */ + +.sidebar .btn-close { + display: none; +} + + /* Sidebar */ .sidebar { display: flex; flex-direction: column; flex-shrink: 0; - width: 280px; + width: 300px; color: var(--bs-body-color); background-color: var(--bs-tertiary-bg) } +@media (max-width: 992px) { + .reveal-sidebar-btn { + display: block; + } + + .sidebar .btn-close { + display: block; + } + + .sidebar { + z-index: 999; + position: fixed; + left: 0; + top: 0; + bottom: 0; + } + + .sidebar:not(.visible) { + display: none; + } + + .sidebar.visible { + display: flex; + } +} + +@media (max-width: 360px) { + .sidebar.visible { + width: 100vw; + } +} + /* Divider */ @@ -29,6 +78,13 @@ color: inherit; } +.sidebar .sidebar-header .sidebar-header-link { + display: flex; + align-items: center; + text-decoration: none; + color: inherit; +} + .sidebar .sidebar-header .sidebar-logo { width: 45px; margin-right: 0.5rem; @@ -91,11 +147,14 @@ background-color: var(--bs-tertiary-bg); } -.sidebar .sidebar-content .sidebar-item:hover { +.sidebar .sidebar-content .sidebar-item:hover, +.sidebar .sidebar-content .sidebar-item:focus, +.sidebar .sidebar-content .sidebar-item.active { background-color: var(--bs-body-bg); } .sidebar .sidebar-content .sidebar-item .sidebar-item-image { + flex-shrink: 0; width: 50px; height: 50px; border-radius: var(--bs-border-radius-sm); diff --git a/apps/home/static/home/js/index.js b/apps/home/static/home/js/index.js index f1b9da4..966af2d 100644 --- a/apps/home/static/home/js/index.js +++ b/apps/home/static/home/js/index.js @@ -1,8 +1,4 @@ $(document).ready(async function() { - // await initSubscriptionTable(); - // await initFiltersTable(); - // await initContentTable(); - initSubscriptionsModule(); initFiltersModule(); initContentModule(); @@ -258,4 +254,15 @@ function logError(error) { // Fallback for any other types (string, number, etc.) console.error('Error:', error); } -} \ No newline at end of file +} + + +// region Sidebar Visibility + +$(".reveal-sidebar-btn").on("click", () => { + $(".sidebar").toggleClass("visible"); +}); + +$(".sidebar .btn-close").on("click", () => { + $(".sidebar").removeClass("visible"); +}); \ No newline at end of file diff --git a/apps/home/static/home/js/servers.js b/apps/home/static/home/js/servers.js index 32dd478..e929549 100644 --- a/apps/home/static/home/js/servers.js +++ b/apps/home/static/home/js/servers.js @@ -83,13 +83,13 @@ function createSelectButton(serverData) { let imageUrl = `https://cdn.discordapp.com/icons/${id}/${iconHash}.webp?size=80`; let altText = name.split(' ').map(word => word.charAt(0)).join(''); // initials of server name, used if iconUrl is 404 - template.find("img").attr("src", imageUrl).attr("alt", altText); - template.find(".js-guildName").text(name); - template.find(".js-guildId").text(id); - template.attr("data-id", id); + template.find(".js-image").attr("src", imageUrl).attr("alt", altText); + template.find(".js-name").text(name); + template.find(".js-id").text(id); + template.find(".sidebar-item").data("id", id); // Bind the button for selecting this server - template.find(".server-item-selector").off("click").on("click", function() { + template.find(".sidebar-item").off("click").on("click", function() { selectServer(id); }); @@ -107,7 +107,6 @@ $("#backToSelectServer").on("click", function() { selectedServer = null; }); -// #endregion // #region Server Selection @@ -121,8 +120,8 @@ function selectServer(id) { } // Change appearance of selected vs none-selected items - $("#serverList .server-item").removeClass("active"); - $(`#serverList .server-item[data-id=${id}]`).addClass("active"); + $("#serverList .sidebar-item").removeClass("active"); + $(`#serverList .sidebar-item[data-id=${id}]`).addClass("active"); // Global variable selectedServer = server; @@ -131,11 +130,13 @@ function selectServer(id) { $("#noSelectedServer").hide(); $("#selectedServerContainer").show().css("display", "flex"); + // Close sidebar on smaller screens + $(".sidebar").removeClass("visible"); + // Announce change to any listeners $(document).trigger("selectedServerChange"); } -// #endregion // #region Resolve Strings @@ -177,6 +178,7 @@ async function loadServers() { $(".server-loading-item").show(); generateServers() .then(servers => { + $("#serverList .sidebar-loading").remove(); servers.forEach(server => addToLoadedServers(server, false)); }) .catch(error => { @@ -196,5 +198,3 @@ async function loadServers() { $(".server-loading-item").hide(); }); } - -// #endregion diff --git a/apps/home/templates/home/index.html b/apps/home/templates/home/index.html index 3f26012..67b0ee3 100644 --- a/apps/home/templates/home/index.html +++ b/apps/home/templates/home/index.html @@ -56,7 +56,7 @@ -
+