progress

js/content.js

@@ -1339,12 +1339,15 @@ function setupBetterSidebar(mode = "dash") {
 		else if (mode == "course") {
 			document.getElementById("header").style.display = "none";
 			document.querySelector(".ic-Layout-wrapper")?.style.setProperty("margin-left", "0");
+			document.querySelector("#main")?.style.setProperty("margin-left", "0");
 			// document.getElementById("not_right_side").style.display = "flex";
 			mainWrapper.style.display = "flex";
 			document.querySelector(".ic-Layout-contentMain").style.flex = "1";
 			document.querySelector(".ic-Layout-contentMain").style.minWidth = "0";
 			courseLinks = getCourseLinks();
 			document.querySelector(".ic-app-nav-toggle-and-crumbs").style.display = "none";
+			const leftSide = document.getElementById("left-side");
+			if (leftSide) leftSide.style.display = "none";
 			expanded = true;
 		}
 
@@ -1358,27 +1361,35 @@ function setupBetterSidebar(mode = "dash") {
 		populateSidebarFromNav(sidebarContent);
 
 		if (mode == "course") {
-			makeElement("h1", sidebarContent, {
+			const courseLinksContainer = makeElement("div", sidebarContent, {
+				id: "better-course-links",
+				style: "display:flex;flex-direction:column;gap:15px;width:100%;align-items:center;min-height:auto;padding:10px 0;border-top:1px solid var(--bcborder-0);"
+			});
+			
+			if (courseLinks && courseLinks.length > 0) {
+				makeElement("h1", courseLinksContainer, {
+					id: "better-course-links-title",
 					textContent: "Course Links:",
-				style: "font-size: 20px;color:var(--bctext-0);margin-top:5px;margin-bottom:5px;"
+					style: "font-size:12px;color:var(--bctext-0);margin:0;font-weight:bold;white-space:nowrap;text-align:center;display:block;"
 				})
 				courseLinks.forEach((link) => {
 				createSidebarButton(
 					link.name,
 					domain + link.url,
-					sidebarContent,
+					courseLinksContainer,
-					`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg0" style="width:20px;height:20px;">
+					`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:20px;height:20px;">
 						<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="var(--bctext-0)"></path>
+							<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="var(--bctext-0)"></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.707１Z" fill="var(--bctext-0)"></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, {
@@ -1427,14 +1438,21 @@ function populateSidebarFromNav(sidebarContent) {
 	const navMenu = document.getElementById("menu");
 	if (!navMenu) return;
 
-	const menuItems = navMenu.querySelectorAll(".menu-item a[id^='global_nav'], .globalNavExternalTool a");
+	const menuItems = navMenu.querySelectorAll("a[id^='global_nav'], .globalNavExternalTool a");
 	menuItems.forEach(item => {
-		const itemId = item.id || item.closest(".menu-item")?.id;
+		const itemId = item.id;
 		if (excludeIds.includes(itemId)) return;
 
 		const href = item.getAttribute("href");
-		const textEl = item.querySelector(".menu-item__text");
+		let textEl = item.querySelector(".menu-item__text");
-		const text = textEl?.textContent?.trim();
+		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 || !href) return;
 
@@ -1443,10 +1461,41 @@ function populateSidebarFromNav(sidebarContent) {
 			const svg = item.querySelector("svg");
 			if (svg) {
 				icon = svg.outerHTML;
-				// Make SVG white by adding style
+				// 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);
 	});
@@ -1458,9 +1507,20 @@ function updateSidebar(expanded, sidebarList, expander) {
 	labels.forEach(label => label.style.display = expanded ? "block" : "none");
 	const buttons = document.querySelectorAll(".better-sidebar-btn");
 	buttons.forEach(label => label.style.width = expanded ? "80%" : "40%");
+	const courseLinksTitle = document.getElementById("better-course-links-title");
+	if (courseLinksTitle) {
+		courseLinksTitle.style.display = expanded ? "block" : "none";
+		const container = document.getElementById("better-course-links");
+		if (container) {
+			container.style.borderTop = expanded ? "1px solid var(--bcborder-0)" : "none";
+			container.style.paddingTop = expanded ? "10px" : "5px";
+			container.style.paddingBottom = expanded ? "0" : "5px";
+		}
+	}
 }
 function getCourseLinks() {
 	const linkList = document.getElementById("section-tabs");
+	if (!linkList) return [];
 	const links = linkList.querySelectorAll("a");
 	const courseLinks = [];
 	links.forEach(link => {