From 62b7112954470d4c55f62588a0d383eb10e6a6d3 Mon Sep 17 00:00:00 2001
From: Guy Sandler <guy@sandler.co.il>
Date: Thu, 21 May 2026 18:06:02 -0700
Subject: [PATCH] trying to fix sidebar

---
 js/content.js | 160 ++++++++++++++++++++------------------------------
 1 file changed, 64 insertions(+), 96 deletions(-)

diff --git a/js/content.js b/js/content.js
index 7641f77..39367b3 100644
--- a/js/content.js
+++ b/js/content.js
@@ -1492,7 +1492,6 @@ async function setupBetterSidebar(mode = getSidebarLayoutMode()) {
         const layoutMode = mode === "course" || mode === "dash" ? mode : getSidebarLayoutMode();
         const mainWrapper = document.querySelector(".ic-Layout-contentWrapper");
         if (!mainWrapper) return;
-        let courseLinks;
         let expanded = await getSidebarExpandedState(layoutMode);
         mainWrapper.style.display = "flex";
         mainWrapper.style.alignItems = "stretch";
@@ -1510,10 +1509,6 @@ async function setupBetterSidebar(mode = getSidebarLayoutMode()) {
                 contentMain.style.flex = "1";
                 contentMain.style.minWidth = "0";
             }
-            courseLinks = getCourseLinks();
-            document.querySelector(".ic-app-nav-toggle-and-crumbs")?.style.setProperty("display", "none");
-            const leftSide = document.getElementById("left-side");
-            if (leftSide) leftSide.style.display = "none";
         }
 
         let sidebarList = makeElement("div", mainWrapper, { id: "better-sidebar-container",
@@ -1527,40 +1522,6 @@ async function setupBetterSidebar(mode = getSidebarLayoutMode()) {
         // Populate sidebar from Canvas navigation menu dynamically
         populateSidebarFromNav(sidebarContent);
 
-        if (layoutMode == "course") {
-            const courseLinksContainer = makeElement("div", sidebarContent, {
-                id: "better-course-links",
-                style: "display:flex;flex-direction:column;gap:12px;width:calc(100% - 16px);align-items:stretch;margin:15px 8px 0;padding:12px;border-radius:8px;background:linear-gradient(135deg, rgba(var(--bc-primary-rgb), 0.08) 0%, rgba(var(--bc-primary-rgb), 0.04) 100%);border:1px solid rgba(var(--bc-primary-rgb), 0.15);"
-            });
-			
-            if (courseLinks && courseLinks.length > 0) {
-                makeElement("div", courseLinksContainer, {
-                    id: "better-course-links-title",
-                    textContent: "Course Pages",
-                    style: "font-size:11px;color:var(--bctext-0);margin:0;font-weight:600;white-space:nowrap;text-align:center;display:block;letter-spacing:0.5px;text-transform:uppercase;opacity:0.8;"
-                })
-                makeElement("div", courseLinksContainer, {
-                    style: "height:1px;background:linear-gradient(90deg, transparent, rgba(var(--bctext-0-rgb), 0.2), transparent);margin:2px 0;"
-                })
-                courseLinks.forEach((link) => {
-                createSidebarButton(
-                    link.name,
-                    domain + link.url,
-                    courseLinksContainer,
-                    `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px;">
-                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-                        <g id="SVGRepo_iconCarrier">
-                            <path d="M7.05025 1.53553C8.03344 0.552348 9.36692 0 10.7574 0C13.6528 0 16 2.34721 16 5.24264C16 6.63308 15.4477 7.96656 14.4645 8.94975L12.4142 11L11 9.58579L13.0503 7.53553C13.6584 6.92742 14 6.10264 14 5.24264C14 3.45178 12.5482 2 10.7574 2C9.89736 2 9.07258 2.34163 8.46447 2.94975L6.41421 5L5 3.58579L7.05025 1.53553Z" fill="white"></path>
-                            <path d="M7.53553 13.0503L9.58579 11L11 12.4142L8.94975 14.4645C7.96656 15.4477 6.63308 16 5.24264 16C2.34721 16 0 13.6528 0 10.7574C0 9.36693 0.552347 8.03344 1.53553 7.05025L3.58579 5L5 6.41421L2.94975 8.46447C2.34163 9.07258 2 9.89736 2 10.7574C2 12.5482 3.45178 14 5.24264 14C6.10264 14 6.92742 13.6584 7.53553 13.0503Z" fill="white"></path>
-                            <path d="M5.70711 11.7071L11.7071 5.70711L10.2929 4.29289L4.29289 10.2929L5.70711 11.7071Z" fill="white"></path>
-                        </g>
-                    </svg>`
-                );
-            });
-            }
-        }
-
 
         let expander = makeElement("div", sidebarList, {
             className: "better-sidebar-expander",
@@ -1612,69 +1573,76 @@ function populateSidebarFromNav(sidebarContent) {
 	};
 	
 	const navMenu = document.getElementById("menu");
-	if (!navMenu) return;
+    let hasDashboardButton = false;
 
-	const menuItems = navMenu.querySelectorAll("a[id^='global_nav'], .globalNavExternalTool a");
-	menuItems.forEach(item => {
-		const itemId = item.id;
-		if (excludeIds.includes(itemId)) return;
+    if (navMenu) {
+        const menuItems = navMenu.querySelectorAll("a[id^='global_nav'], .globalNavExternalTool a");
+        menuItems.forEach(item => {
+            const itemId = item.id;
+            if (excludeIds.includes(itemId)) return;
 
-		const href = item.getAttribute("href");
-		let textEl = item.querySelector(".menu-item__text");
-		let text = textEl?.textContent?.trim();
+            const href = item.getAttribute("href");
+            let textEl = item.querySelector(".menu-item__text");
+            let text = textEl?.textContent?.trim();
 		
-		// If text not found, try other sources
-		if (!text) {
-			text = item.getAttribute("aria-label")?.trim() || 
-					item.getAttribute("title")?.trim() || 
-					item.textContent?.trim();
-		}
+            // If text not found, try other sources
+            if (!text) {
+                text = item.getAttribute("aria-label")?.trim() || 
+                        item.getAttribute("title")?.trim() || 
+                        item.textContent?.trim();
+            }
 		
-		if (!text || !href) return;
+            if (!text || !href) return;
 
-		let icon = customIcons[itemId] || "";
-		if (!icon) {
-			const svg = item.querySelector("svg");
-			if (svg) {
-				icon = svg.outerHTML;
-				// Detect and scale down large viewBox SVGs
-				const viewBoxMatch = icon.match(/viewBox="([^"]+)"/);
-				if (viewBoxMatch) {
-					const [, viewBox] = viewBoxMatch;
-					const parts = viewBox.split(/\s+/);
-					const width = parseFloat(parts[2]);
-					const height = parseFloat(parts[3]);
-					// If viewBox is large, add fixed size to scale it down
-					if (width > 32 || height > 32) {
-						// Check if svg already has a style attribute
-						if (icon.includes('style="')) {
-							// Append to existing style
-							icon = icon.replace(/style="([^"]*)"/, `style="$1 width:20px;height:20px;flex-shrink:0;fill:white;stroke:white;"`);
-						} else {
-							// Add new style attribute
-							icon = icon.replace("<svg", '<svg style="width:20px;height:20px;flex-shrink:0;fill:white;stroke:white;"');
-						}
-					} else {
-						// Smaller SVG - just add colors
-						if (icon.includes('style="')) {
-							icon = icon.replace(/style="([^"]*)"/, `style="$1 fill:white;stroke:white;flex-shrink:0;"`);
-						} else {
-							icon = icon.replace("<svg", '<svg style="fill:white;stroke:white;flex-shrink:0;"');
-						}
-					}
-				} else {
-					// No viewBox - just add colors
-					if (icon.includes('style="')) {
-						icon = icon.replace(/style="([^"]*)"/, `style="$1 fill:white;stroke:white;"`);
-					} else {
-						icon = icon.replace("<svg", '<svg style="fill:white;stroke:white;"');
-					}
-				}
-			}
-		}
+            let icon = customIcons[itemId] || "";
+            if (!icon) {
+                const svg = item.querySelector("svg");
+                if (svg) {
+                    icon = svg.outerHTML;
+                    // Detect and scale down large viewBox SVGs
+                    const viewBoxMatch = icon.match(/viewBox="([^"]+)"/);
+                    if (viewBoxMatch) {
+                        const [, viewBox] = viewBoxMatch;
+                        const parts = viewBox.split(/\s+/);
+                        const width = parseFloat(parts[2]);
+                        const height = parseFloat(parts[3]);
+                        // If viewBox is large, add fixed size to scale it down
+                        if (width > 32 || height > 32) {
+                            // Check if svg already has a style attribute
+                            if (icon.includes('style="')) {
+                                // Append to existing style
+                                icon = icon.replace(/style="([^"]*)"/, `style="$1 width:20px;height:20px;flex-shrink:0;fill:white;stroke:white;"`);
+                            } else {
+                                // Add new style attribute
+                                icon = icon.replace("<svg", '<svg style="width:20px;height:20px;flex-shrink:0;fill:white;stroke:white;"');
+                            }
+                        } else {
+                            // Smaller SVG - just add colors
+                            if (icon.includes('style="')) {
+                                icon = icon.replace(/style="([^"]*)"/, `style="$1 fill:white;stroke:white;flex-shrink:0;"`);
+                            } else {
+                                icon = icon.replace("<svg", '<svg style="fill:white;stroke:white;flex-shrink:0;"');
+                            }
+                        }
+                    } else {
+                        // No viewBox - just add colors
+                        if (icon.includes('style="')) {
+                            icon = icon.replace(/style="([^"]*)"/, `style="$1 fill:white;stroke:white;"`);
+                        } else {
+                            icon = icon.replace("<svg", '<svg style="fill:white;stroke:white;"');
+                        }
+                    }
+                }
+            }
 
-		createSidebarButton(text, href, sidebarContent, icon);
-	});
+            if (itemId === "global_nav_dashboard_link") hasDashboardButton = true;
+            createSidebarButton(text, href, sidebarContent, icon);
+        });
+    }
+
+    if (!hasDashboardButton) {
+        createSidebarButton("Dashboard", `${domain}/`, sidebarContent, customIcons["global_nav_dashboard_link"]);
+    }
 }
 function updateSidebar(expanded, sidebarList, expander) {
     const scale = getSidebarScale();