Fix navbar navigation functionality across main and support pages

index.html

@@ -40,14 +40,14 @@ <h1 class="site-title">StudyPlan</h1>
   </div>
 
   <nav class="header-nav">
-    <a href="#">Dashboard</a>
-    <a href="#">Tasks</a>
-    <a href="#">Calendar</a>
+    <a href="#" id="nav-dashboard">Dashboard</a>
+    <a href="#" id="nav-tasks">Tasks</a>
+    <a href="#" id="nav-calendar">Calendar</a>
     <a href="#" id="nav-settings">Settings</a>
   </nav>
 
   <div class="header-right">
-    <button class="profile-btn">Profile</button>
+    <button class="profile-btn">My Profile</button>
     <button class="profile-btn" id="logout-btn">Logout</button>
   </div>
 </header>
@@ -137,7 +137,7 @@ <h1 class="site-title">StudyPlan</h1>
                 a 45,45 0 1,0 -90,0
               "></path>
             </svg>
-            <div id="timer-text" class="timer-text">25:00</div>
+            <div id="timer-text" class="timer-text">24:00</div>
           </div>
           <div class="timer-duration-row">
             <label for="timer-duration-input" class="timer-duration-label">Duration (min)</label>
@@ -389,6 +389,13 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(
   // Run on load
   loadPreferences();
 
+
+  const params = new URLSearchParams(window.location.search);
+
+  if (params.get('openSettings') === 'true') {
+  settingsModal.style.display = 'flex';
+  }
+
   // Save changes when user clicks "Save Changes"
   settingsSave.addEventListener('click', () => {
     localStorage.setItem('studyplan_dark_mode', darkModeToggle.checked);

js/app.js

@@ -111,6 +111,9 @@ function openNewSubjectModal() {
   newSubjectName.focus();
 }
 
+
+
+
 function renderSidebarSubjects() {
   const listEl = document.getElementById('subjects-sidebar-list');
   if (!listEl) return;
@@ -918,6 +921,29 @@ document.addEventListener('DOMContentLoaded', () => {
   const archivedTasksBtn = document.getElementById('archived-tasks-btn');
   const focusModeBtn = document.getElementById('focus-mode-btn');
 
+
+window.addEventListener('load', () => {
+  const params = new URLSearchParams(window.location.search);
+  const view = params.get('view');
+
+  if (view === 'tasks') {
+    allTasksBtn.click();
+  }
+
+  if (view === 'calendar') {
+    calendarBtn.click();
+  }
+});
+
+
+  const navTasks = document.getElementById('nav-tasks');
+
+navTasks.addEventListener('click', (e) => {
+  e.preventDefault();
+  allTasksBtn.click();
+});
+
+
   function updateSidebarActive(id) {
     document.querySelectorAll('.sidebar .nav-item').forEach(el => el.classList.remove('active'));
     document.getElementById(id).classList.add('active');
@@ -932,6 +958,21 @@ document.addEventListener('DOMContentLoaded', () => {
     renderTasks();
   });
 
+  const navCalendar = document.getElementById('nav-calendar');
+
+  navCalendar.addEventListener('click', (e) => {
+  e.preventDefault();
+  calendarBtn.click();
+});
+
+
+const navDashboard = document.getElementById('nav-dashboard');
+
+navDashboard.addEventListener('click', (e) => {
+  e.preventDefault();
+  calendarBtn.click();
+});
+
   allTasksBtn.addEventListener('click', () => {
     currentView = 'all-tasks';
     document.querySelector('.cal-section').classList.add('hidden');

support-page/index.html

@@ -17,9 +17,9 @@ <h1 class="site-title">StudyPlan</h1>
 
   <nav class="header-nav">
     <a href="/" class="nav-btn">Dashboard</a>
-    <a href="#" class="nav-btn">Tasks</a>
-    <a href="#" class="nav-btn">Calendar</a>
-    <a href="#" class="nav-btn">Settings</a>
+    <a href="/?view=tasks" class="nav-btn">Tasks</a>
+    <a href="/?view=calendar" class="nav-btn">Calendar</a>
+    <a href="/?openSettings=true" class="nav-btn">Settings</a>
   </nav>
 </header>
 

support-page/support.css

@@ -136,6 +136,13 @@ body {
   padding-left: 18px;
 }
 
+.active-card {
+  border: 2px solid var(--color-text-primary);
+  box-shadow: var(--shadow-md);
+  transform: scale(1.02);
+  transition: all 0.3s ease;
+}
+
 /* FOOTER */
 .site-footer {
   display: flex;

support-page/support.js

@@ -1 +1,48 @@
-console.log("Support page loaded");
+console.log("Support page loaded");
+
+const darkMode = localStorage.getItem('studyplan_dark_mode');
+
+if (darkMode === 'false') {
+
+  document.documentElement.style.setProperty('--color-background-primary', '#ffffff');
+  document.documentElement.style.setProperty('--color-background-secondary', '#f7f7f5');
+  document.documentElement.style.setProperty('--color-background-tertiary', '#efefec');
+
+  document.documentElement.style.setProperty('--color-text-primary', '#1a1a18');
+  document.documentElement.style.setProperty('--color-text-secondary', '#6b6b66');
+
+}
+
+
+const links = document.querySelectorAll('.footer-links a');
+
+links.forEach(link => {
+  link.addEventListener('click', () => {
+
+    document.querySelectorAll('.card').forEach(card => {
+      card.classList.remove('active-card');
+    });
+
+    const targetId = link.getAttribute('href').split('#')[1];
+    const targetSection = document.getElementById(targetId);
+
+    if (targetSection) {
+      targetSection.classList.add('active-card');
+    }
+  });
+});
+
+
+window.addEventListener('load', () => {
+
+  const currentHash = window.location.hash.substring(1);
+
+  if (currentHash) {
+
+    const targetSection = document.getElementById(currentHash);
+
+    if (targetSection) {
+      targetSection.classList.add('active-card');
+    }
+  }
+});