Move sidebar toggle to header and fix animation

- Moved toggle button to header (next to logo)
- Removed floating button to prevent content overlap
- Changed sidebar animation to use margin-left for proper layout reflow
- Main content now automatically expands when sidebar collapses
- Simplified JS logic for cleaner toggle behavior

public/templates/layout.html

@@ -42,43 +42,16 @@
             border-right: 1px solid #dee2e6;
             overflow-y: auto;
             flex-shrink: 0;
-            transition: transform 0.3s ease;
+            transition: margin-left 0.3s ease;
-            position: relative;
-            z-index: 1000;
         }
         .sidebar.collapsed {
-            transform: translateX(-250px);
+            margin-left: -250px;
-        }
-        .sidebar-toggle {
-            position: fixed;
-            top: 80px;
-            left: 10px;
-            z-index: 1001;
-            background-color: #0d6efd;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            padding: 8px 12px;
-            cursor: pointer;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            transition: all 0.3s ease;
-        }
-        .sidebar-toggle:hover {
-            background-color: #0a58ca;
-            transform: scale(1.05);
-        }
-        .sidebar-toggle.shifted {
-            left: 270px;
-        }
-        .main-content.shifted {
-            margin-left: 0;
         }
         
         .main-content {
             flex: 1;
             overflow-y: auto;
             padding: 20px;
-            transition: margin-left 0.3s ease;
         }
         
         .folder-toggle {
@@ -226,8 +199,11 @@
             <div class="row align-items-center">
                 <div class="col">
                     <div class="d-flex align-items-center">
+                        <button class="btn btn-link text-white p-0 me-3" id="sidebarToggle">
+                            <i class="bi bi-list fs-4"></i>
+                        </button>
                         <img src="assets/icon.svg" alt="CodePress Logo" width="32" height="32" class="me-2">
-                        <h1 class="h3 mb-0">{{site_title}}</h1>
+                        <h1 class="h3 mb-0">CodePress</h1>
                     </div>
                 </div>
                 <div class="col-auto">
@@ -242,9 +218,6 @@
     
     <div class="main-wrapper">
         <div class="content-wrapper">
-            <button class="sidebar-toggle" id="sidebarToggle">
-                <i class="bi bi-list"></i>
-            </button>
             <nav class="sidebar" id="sidebar">
                 <div class="pt-3">
                     <ul class="nav flex-column">
@@ -290,22 +263,9 @@
             // Sidebar toggle functionality
             const sidebarToggle = document.getElementById('sidebarToggle');
             const sidebar = document.getElementById('sidebar');
-            const mainContent = document.querySelector('.main-content');
             
             sidebarToggle.addEventListener('click', function() {
                 sidebar.classList.toggle('collapsed');
-                mainContent.classList.toggle('shifted');
-                sidebarToggle.classList.toggle('shifted');
-                
-                // Change icon
-                const icon = this.querySelector('i');
-                if (sidebar.classList.contains('collapsed')) {
-                    icon.classList.remove('bi-list');
-                    icon.classList.add('bi-chevron-right');
-                } else {
-                    icon.classList.remove('bi-chevron-right');
-                    icon.classList.add('bi-list');
-                }
             });
             
             // Open folders that contain the current active page