image feature + refactor

core/templates/shell.html

@@ -8,7 +8,7 @@
 <!-- Main wrapper that will hold the header, sidebar, and content -->
 <div class="flex flex-col min-h-screen">
     <header class="w-full bg-red-600 text-white flex py-4 shadow-md max-h-20 h-full max-h-20">
-      <button id="menu-toggle" class="text-2xl focus:outline-none ml-5">
+      <button id="menu-toggle" class="text-2xl focus:outline-none ml-5" onclick="toggleSidepanel()">
         &#9776;
     </button>
     
@@ -38,11 +38,9 @@
 </div>
 
 <!-- Script to toggle the sidebar -->
-<script>
-    const menuToggle = document.getElementById('menu-toggle');
-    const sidepanel = document.getElementById('sidepanel');
-
+<script>    
     function toggleSidepanel() {
+        const sidepanel = document.getElementById('sidepanel');
         if (sidepanel.classList.contains('w-0')) {
             sidepanel.classList.remove('w-0');
             sidepanel.classList.add('w-60');
@@ -59,8 +57,6 @@
             });
         }
     }
-
-    menuToggle.addEventListener('click', () => toggleSidepanel());
 </script>
 
 </body>