Simon-Initiative
diff --git a/‎assets/.DS_Store‎
2 KB b/‎assets/.DS_Store‎
2 KB
diff --git a/‎assets/images/.DS_Store‎
6 KB b/‎assets/images/.DS_Store‎
6 KB
diff --git a/‎assets/images/20px/.DS_Store‎
6 KB b/‎assets/images/20px/.DS_Store‎
6 KB
diff --git a/‎assets/images/Question-Circle.png‎
2.56 KB b/‎assets/images/Question-Circle.png‎
2.56 KB
diff --git a/‎assets/images/explore-topics.png‎
1.64 KB b/‎assets/images/explore-topics.png‎
1.64 KB
diff --git a/‎assets/images/pick-your-role.png‎
2.7 KB b/‎assets/images/pick-your-role.png‎
2.7 KB
diff --git a/‎assets/images/picture-in-picture.png‎
1.44 KB b/‎assets/images/picture-in-picture.png‎
1.44 KB
diff --git a/‎assets/images/search-features.png‎
2.33 KB b/‎assets/images/search-features.png‎
2.33 KB
diff --git a/‎index.html‎
Lines changed: 16 additions & 0 deletions b/‎index.html‎
Lines changed: 16 additions & 0 deletions
diff --git a/‎main.js‎
Lines changed: 65 additions & 0 deletions b/‎main.js‎
Lines changed: 65 additions & 0 deletions
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@@ -150,6 +151,21 @@
         </ul>
       </div>
 
+       <div class="menu-section">
+        <div class="section-title" onclick="toggleSection(this)">
+          <span class="title-text">Publish Your Course</span>
+          <span class="caret" aria-hidden="true">
+            <svg viewBox="0 0 24 24" width="16" height="16">
+              <path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </span>
+        </div>
+
+        <ul class="submenu">
+          <li data-page="pages/publish-your-course/review-your-course.html"><span>Review Your Course</span></li>
+        </ul>
+
       <!-- INSTRUCTOR SECTIONS -->
       <div class="role-header">Instructor</div>
       <div class="menu-section">
 
@@ -15,6 +15,35 @@ console.log('main.js loaded');
     badge.setAttribute('aria-hidden', 'true');
   });
 
+  // Enable in-panel SPA navigation for data-page elements inside .content too
+document.addEventListener('click', function (event) {
+  const target = event.target.closest('[data-page]');
+  if (!target) return;
+
+  // Prevent full page reload
+  event.preventDefault();
+
+  const page = target.getAttribute('data-page');
+  if (!page) return;
+
+  // Highlight selected state if you want
+  document.querySelectorAll('.submenu li').forEach(li => li.classList.remove('selected'));
+
+  // Load the HTML into the main content area
+  fetch(page)
+    .then(response => response.text())
+    .then(html => {
+      const content = document.querySelector('.content');
+      if (content) {
+        content.innerHTML = html;
+        // Optional: scroll to top after load
+        content.scrollTo({ top: 0, behavior: 'smooth' });
+      }
+    })
+    .catch(err => console.error('Error loading page:', err));
+});
+
+
   // --- fuzzy matching helpers (used by search overlay) ---
   const _norm = (s) => String(s || '')
     .toLowerCase()
@@ -226,4 +255,40 @@ console.log('main.js loaded');
     setTimeout(() => li.classList.remove('spotlight'), 1100);
   });
 
+// --- Role-card spotlight navigation (for Logging In page) ---
+document.addEventListener('click', (e) => {
+  const card = e.target.closest('.role-card[data-page]');
+  if (!card) return;
+
+  e.preventDefault();
+  const page = card.getAttribute('data-page');
+  if (!page) return;
+
+  // Find matching sidebar item
+  const li = document.querySelector(`.submenu li[data-page="${page}"]`);
+  if (!li) {
+    console.warn('No matching sidebar item for:', page);
+    return;
+  }
+
+  // Expand the section if collapsed
+  const submenu = li.closest('.submenu');
+  if (submenu && submenu.classList.contains('collapsed')) {
+    const header = submenu.previousElementSibling;
+    if (header) header.click();
+  }
+
+  // Select and trigger load
+  li.classList.add('selected');
+  li.click();
+
+  // Smooth scroll and spotlight (uses your existing functions)
+  const container = getScrollContainer(li);
+  scrollIntoViewWithin(container, li);
+
+  li.classList.add('spotlight');
+  setTimeout(() => li.classList.remove('spotlight'), 1100);
+});
+
+
 })();