Merge pull request #116 from CoderYUI/main

Improved the Toggle Design and Fix the Mobile Nabar Styling
Jyotibrat · Feb 6, 2025 · 2e23e69 · 2e23e69
2 parents 964dda0 + 8c8e4da
commit 2e23e69
Show file tree

Hide file tree

Showing 4 changed files with 234 additions and 76 deletions.
diff --git a/src/index.html b/src/index.html
@@ -30,10 +30,6 @@ <h2>Markdown Input</h2>
             <option value="18" selected>Medium</option>
             <option value="20">Large</option>
           </select>
-          <label class="toggle-label">
-            <input type="checkbox" id="real-time-toggle">
-            <span class="slider"></span> Real-Time Preview
-          </label>
           <button id="clear-markdown" class="secondary-button" aria-label="Clear Markdown">Clear</button>
         </div>
       </div>

diff --git a/src/navbar.html b/src/navbar.html
@@ -1,10 +1,15 @@
 <div class="navbar">
     <a href="index.html"><img src="logo1.png" alt="img" class="logo"></a>
-    <button class="hamburger" aria-label="Menu">
-        <span></span>
-        <span></span>
-        <span></span>
-    </button>
+    <div class="mobile-controls">
+        <button id="theme-toggle-mobile" class="theme-toggle" aria-label="Toggle Theme">
+            <i class="fas fa-sun"></i>
+        </button>
+        <button class="hamburger" aria-label="Menu">
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
+    </div>
     <div class="header-actions">
         <nav class="nav-links">
             <a href="index.html">Home</a>
@@ -13,11 +18,9 @@
             <a href="file_upload.html" id="upload-link">Upload File</a>
             <a href="Html_Previewer.html">Html Previewer</a>
         </nav>
-        <!-- Toggle switch for theme -->
-        <label class="switch">
-            <input type="checkbox" id="theme-toggle">
-            <span class="slider round"></span>
-        </label>
+        <button id="theme-toggle-desktop" class="theme-toggle" aria-label="Toggle Theme">
+            <i class="fas fa-sun"></i>
+        </button>
     </div>
 </div>
 <script src="script.js" defer></script>
diff --git a/src/script.js b/src/script.js
@@ -11,20 +11,23 @@ function initializeApp() {
     const savedTheme = localStorage.getItem('theme') || 'light';
     applyTheme(savedTheme);
 
-    const themeToggle = document.getElementById('theme-toggle');
-    if (themeToggle) {
-        // Set the initial state of the toggle based on the saved theme
-        themeToggle.checked = savedTheme === 'dark';
-
-        // Add event listener to toggle switch
-        themeToggle.addEventListener('change', (e) => {
-            const theme = e.target.checked ? 'dark' : 'light';
-            applyTheme(theme);
-            localStorage.setItem('theme', theme);
-        });
-    }
+    // Initialize both theme toggles
+    const themeToggles = document.querySelectorAll('#theme-toggle-mobile, #theme-toggle-desktop');
+    themeToggles.forEach(toggle => {
+        if (toggle) {
+            updateThemeIcon(savedTheme, toggle);
+            toggle.addEventListener('click', () => {
+                const currentTheme = document.body.classList.contains('theme-dark') ? 'light' : 'dark';
+                applyTheme(currentTheme);
+                localStorage.setItem('theme', currentTheme);
+                // Update all toggles
+                document.querySelectorAll('#theme-toggle-mobile, #theme-toggle-desktop').forEach(t => {
+                    updateThemeIcon(currentTheme, t);
+                });
+            });
+        }
+    });
 
-    // Hide the "Upload File" link if on the About page
     adjustPageSpecificContent();
 }
 
@@ -34,41 +37,59 @@ function applyTheme(theme) {
     console.log('Applied theme:', theme);
 }
 
+function updateThemeIcon(theme, toggle) {
+    const icon = toggle.querySelector('i');
+    if (icon) {
+        icon.className = theme === 'dark' ? 'fas fa-moon' : 'fas fa-sun';
+    }
+}
+
 // Load the navbar dynamically
 function loadNavbar() {
     const navbarPlaceholder = document.getElementById('navbar-placeholder');
     return fetch('navbar.html')
         .then(response => response.text())
         .then(data => {
             navbarPlaceholder.innerHTML = data;
-            const themeToggle = document.getElementById('theme-toggle');
-            if (themeToggle) {
-                const savedTheme = localStorage.getItem('theme') || 'light';
-                themeToggle.checked = savedTheme === 'dark';
-                themeToggle.addEventListener('change', (e) => {
-                    const theme = e.target.checked ? 'dark' : 'light';
-                    applyTheme(theme);
-                    localStorage.setItem('theme', theme);
-                });
-            }
-            // Add Sidebar Navigation Handler after navbar is loaded
+
+            // Initialize theme toggles after navbar is loaded
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            document.querySelectorAll('#theme-toggle-mobile, #theme-toggle-desktop').forEach(toggle => {
+                if (toggle) {
+                    updateThemeIcon(savedTheme, toggle);
+                    toggle.addEventListener('click', () => {
+                        const currentTheme = document.body.classList.contains('theme-dark') ? 'light' : 'dark';
+                        applyTheme(currentTheme);
+                        localStorage.setItem('theme', currentTheme);
+                        // Update all toggles
+                        document.querySelectorAll('#theme-toggle-mobile, #theme-toggle-desktop').forEach(t => {
+                            updateThemeIcon(currentTheme, t);
+                        });
+                    });
+                }
+            });
+
+            // Add Sidebar Navigation Handler
             const hamburger = document.querySelector('.hamburger');
             if (hamburger) {
                 hamburger.addEventListener('click', function() {
                     this.classList.toggle('active');
                     document.querySelector('.header-actions').classList.toggle('active');
+                    document.body.classList.toggle('menu-open');
                 });
             }
 
             // Close sidebar when clicking outside
             document.addEventListener('click', function(e) {
-                if (!e.target.closest('.header-actions') && !e.target.closest('.hamburger')) {
+                if (!e.target.closest('.header-actions') && 
+                    !e.target.closest('.hamburger') && 
+                    !e.target.closest('#theme-toggle-mobile')) {
                     document.querySelector('.hamburger')?.classList.remove('active');
                     document.querySelector('.header-actions')?.classList.remove('active');
+                    document.body.classList.remove('menu-open');
                 }
             });
 
-            // Call adjustPageSpecificContent again after navbar is loaded
             adjustPageSpecificContent();
         })
         .catch(error => console.error('Error loading navbar:', error));