feat: add mobile sidebar close button

.gitignore

@@ -10,4 +10,3 @@ stop_server.sh
 remount_exec.sh
 GEMINI.md
 .gitignore
-.geminiignore

index.html

@@ -40,8 +40,17 @@
         
         <!-- Header -->
         <header class="p-4 mb-4 flex-shrink-0">
-            <h1 class="text-2xl font-bold text-white">Ignacio Urbina</h1>
-            <p class="text-sm text-gray-400">Statistical Tools Portfolio</p>
+            <div class="flex justify-between items-start">
+                <div>
+                    <h1 class="text-2xl font-bold text-white">Ignacio Urbina</h1>
+                    <p class="text-sm text-gray-400">Statistical Tools Portfolio</p>
+                </div>
+                <button id="sidebar-close-button" class="md:hidden p-1 text-gray-400 hover:text-white">
+                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
         </header>
 
         <!-- Navigation -->

main.js

@@ -6,6 +6,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const sidebarHandle = document.getElementById('sidebar-handle');
     const mainContent = document.getElementById('main-content');
     const loadingSpinner = document.getElementById('loading-spinner');
+    const sidebarCloseButton = document.getElementById('sidebar-close-button');
 
     let spinnerTimeout;
     const loadedUrls = new Set();
@@ -51,6 +52,11 @@ document.addEventListener('DOMContentLoaded', () => {
         sidebar.classList.add('is-open');
     });
 
+    // Close the sidebar when clicking the close button
+    sidebarCloseButton.addEventListener('click', () => {
+        sidebar.classList.remove('is-open');
+    });
+
     // Handle clicks on the navigation links
     navList.addEventListener('click', (e) => {
         const link = e.target.closest('.nav-link');

style.css

@@ -79,3 +79,45 @@ body:not(.touch-device) #sidebar:hover #sidebar-handle {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
+
+
+/* --- Responsive Adjustments --- */
+@media (max-width: 768px) {
+    #sidebar {
+        /* On smaller screens, the sidebar is completely hidden off-screen */
+        transform: translateX(-100%);
+    }
+    #sidebar:hover {
+        /* Disable hover effect on mobile */
+        transform: translateX(-100%);
+    }
+    #sidebar.is-open {
+        /* When opened by JS, it slides fully into view */
+        transform: translateX(0);
+    }
+    #main-content {
+        /* Main content takes up the full width */
+        margin-left: 0;
+    }
+    #sidebar-handle {
+        /* Make the handle slightly larger and more visible for touch */
+        width: 32px;
+        right: -32px; /* Position it outside the hidden sidebar */
+        background-color: rgba(31, 41, 55, 0.7); /* gray-800 with more opacity */
+    }
+    #sidebar-open-icon {
+        /* Make the icon slightly larger */
+        width: 20px;
+        height: 20px;
+    }
+    #sidebar-close-button {
+        display: block; /* Show the close button on mobile */
+    }
+}
+
+/* Hide close button on desktop */
+@media (min-width: 769px) {
+    #sidebar-close-button {
+        display: none;
+    }
+}