offcanvas

css/offcanvas-menu.css

@@ -3,35 +3,74 @@
 }
 
 .hamburger-toggle {
+    position: fixed;
+    top: 30px;
+    right: 20px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    width: 30px;
-    height: 20px;
-    background: none;
+    align-items: center;
+    gap: 4px;
+    width: auto;
+    height: auto;
+    background-color: var(--wp--preset--color--accent-2, #19458c);
     border: none;
-    padding: 0;
+    padding: 12px;
+    border-radius: 4px;
     cursor: pointer;
+    z-index: 10000;
+    transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.hamburger-toggle:hover {
+    transform: scale(1.05);
+    background-color: var(--wp--preset--color--accent-3, #1d3863);
+}
+
+.hamburger-toggle .hamburger-lines {
+    position: relative;
+    width: 25px;
+    height: 14px;
 }
 
-.hamburger-toggle span {
+.hamburger-toggle .hamburger-lines span {
     display: block;
-    width: 100%;
+    position: absolute;
+    width: 25px;
     height: 2px;
     background-color: #ffffff;
-    transition: all 0.3s ease;
+    transform-origin: center;
+    transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
 }
 
-.hamburger-toggle.is-active span:nth-child(1) {
-    transform: translateY(9px) rotate(45deg);
+.hamburger-toggle .hamburger-lines span:nth-child(1) {
+    top: 0;
+}
+
+.hamburger-toggle .hamburger-lines span:nth-child(2) {
+    top: 6px;
 }
 
-.hamburger-toggle.is-active span:nth-child(2) {
+.hamburger-toggle .hamburger-lines span:nth-child(3) {
+    top: 12px;
+}
+
+.hamburger-toggle.active .hamburger-lines span:nth-child(1) {
+    transform: translate(0, 6px) rotate(45deg);
+}
+
+.hamburger-toggle.active .hamburger-lines span:nth-child(2) {
     opacity: 0;
 }
 
-.hamburger-toggle.is-active span:nth-child(3) {
-    transform: translateY(-9px) rotate(-45deg);
+.hamburger-toggle.active .hamburger-lines span:nth-child(3) {
+    transform: translate(0, -6px) rotate(-45deg);
+}
+
+.menu-text {
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: #ffffff;
 }
 
 .offcanvas-menu {
@@ -40,13 +79,13 @@
     right: -300px;
     width: 300px;
     height: 100vh;
-    background-color: #fff;
+    background-color: var(--wp--preset--color--accent-2, #19458c);
+    transition: 0.3s ease;
+    z-index: 9999;
     box-shadow: -2px 0 5px rgba(0,0,0,0.1);
-    transition: right 0.3s ease;
-    z-index: 1000;
 }
 
-.offcanvas-menu.is-active {
+.offcanvas-menu.active {
     right: 0;
 }
 
@@ -57,3 +96,21 @@
 body.offcanvas-active {
     overflow: hidden;
 }
+
+body.menu-open {
+    overflow: hidden;
+}
+
+@media (max-width: 768px) {
+    .offcanvas-menu {
+        width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    .offcanvas-menu {
+        width: 100%;
+    }
+}
+    }
+}

functions.php

@@ -221,20 +221,20 @@ add_action('init', 'register_offcanvas_menu_block');
 
 // Frontend assets remain the same
 function enqueue_offcanvas_menu_assets() {
-    wp_enqueue_script(
-        'offcanvas-menu-frontend',
-        get_stylesheet_directory_uri() . '/js/offcanvas-menu.js',
-        array('jquery'),
-        '1.0.0',
-        true
-    );
-    
     wp_enqueue_style(
         'offcanvas-menu-style',
         get_stylesheet_directory_uri() . '/css/offcanvas-menu.css',
         array(),
         '1.0.0'
     );
+    
+    wp_enqueue_script(
+        'offcanvas-menu',
+        get_stylesheet_directory_uri() . '/js/offcanvas-menu.js',
+        array('jquery'),
+        '1.0.0',
+        true
+    );
 }
 add_action('wp_enqueue_scripts', 'enqueue_offcanvas_menu_assets');
 
@@ -242,13 +242,16 @@ function render_offcanvas_menu($attributes, $content) {
     ob_start(); ?>
     <div class="wp-block-srh-offcanvas-menu">
         <button class="hamburger-toggle" aria-label="Toggle Menu">
-            <span></span>
-            <span></span>
-            <span></span>
+            <div class="hamburger-lines">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+            <span class="menu-text">Menu</span>
         </button>
         <div class="offcanvas-menu">
             <div class="offcanvas-menu-inner">
-                <?php wp_nav_menu(array('theme_location' => 'primary-menu')); ?>
+                <?php echo do_blocks('<!-- wp:template-part {"slug":"offcanvas-content","theme":"edit-srh"} /-->'); ?>
             </div>
         </div>
     </div>

js/auto-hide-nav.js

@@ -31,7 +31,7 @@
   });
   
   function init() {
-      console.log('Auto-hide navigation: jQuery script loaded');
+      // console.log('Auto-hide navigation: jQuery script loaded');
       
       // Find header elements - Try multiple selectors for Twenty Twenty-Five
       $header = $('header').first();
@@ -50,8 +50,8 @@
       
       $body = $('body');
       
-      console.log('Header element found:', $header[0]);
-      console.log('Header length:', $header.length);
+      // console.log('Header element found:', $header[0]);
+      // console.log('Header length:', $header.length);
       
       if (!$header.length) {
           console.warn('Auto-hide navigation: No header element found');
@@ -68,8 +68,8 @@
       // Initial state
       updateHeaderState();
       
-      console.log('Auto-hide navigation: Initialization complete');
-      console.log('Header height calculated:', state.headerHeight);
+      // console.log('Auto-hide navigation: Initialization complete');
+      // console.log('Header height calculated:', state.headerHeight);
   }
   
   function calculateHeaderHeight() {
@@ -78,7 +78,7 @@
       state.headerHeight = $header.outerHeight() || 80;
       $('html').css('--header-height', state.headerHeight + 'px');
       
-      console.log('Header height:', state.headerHeight);
+      // console.log('Header height:', state.headerHeight);
   }
   
   function bindEvents() {
@@ -100,7 +100,7 @@
       // Smooth scroll for anchor links
       $(document).on('click', 'a[href^="#"]', handleAnchorClick);
       
-      console.log('Events bound successfully');
+      // console.log('Events bound successfully');
   }
   
   function handleScroll() {
@@ -143,7 +143,7 @@
   function hideHeader() {
       if (!state.isVisible) return;
       
-      console.log('Hiding header');
+      // console.log('Hiding header');
       state.isVisible = false;
       $header.removeClass('header-visible').addClass('header-hidden');
       
@@ -158,7 +158,7 @@
   function showHeader() {
       if (state.isVisible) return;
       
-      console.log('Showing header');
+      // console.log('Showing header');
       state.isVisible = true;
       $header.removeClass('header-hidden').addClass('header-visible');
       

js/offcanvas-menu.js

@@ -6,19 +6,32 @@
         const $offcanvas = $('.offcanvas-menu');
         const $body = $('body');
         
-        $hamburger.on('click', function() {
-            $(this).toggleClass('is-active');
-            $offcanvas.toggleClass('is-active');
-            $body.toggleClass('offcanvas-active');
+        // Debug check for elements
+        console.log('Hamburger found:', $hamburger.length);
+        console.log('Offcanvas found:', $offcanvas.length);
+        
+        $hamburger.on('click', function(e) {
+            e.preventDefault();
+            console.log('Hamburger clicked');
+            
+            $(this).toggleClass('active'); // Changed from is-active to active
+            $offcanvas.toggleClass('active');
+            $body.toggleClass('menu-open');
         });
         
-        // Close menu when clicking outside
+        // Close menu when clicking document
         $(document).on('click', function(e) {
-            if (!$(e.target).closest('.wp-block-srh-offcanvas-menu').length) {
-                $hamburger.removeClass('is-active');
-                $offcanvas.removeClass('is-active');
-                $body.removeClass('offcanvas-active');
+            if (!$(e.target).closest('.wp-block-srh-offcanvas-menu').length && 
+                !$(e.target).closest('.hamburger-toggle').length) {
+                $hamburger.removeClass('active');
+                $offcanvas.removeClass('active');
+                $body.removeClass('menu-open');
             }
         });
+        
+        // Stop propagation on menu clicks
+        $('.offcanvas-menu-inner').on('click', function(e) {
+            e.stopPropagation();
+        });
     });
 })(jQuery);

parts/offcanvas-content.html

@@ -0,0 +1,23 @@
+<!-- wp:group {"tagName":"div","className":"offcanvas-content","layout":{"type":"constrained"}} -->
+<div class="wp-block-group offcanvas-content">
+    
+    <!-- wp:group {"tagName":"nav","className":"offcanvas-navigation","layout":{"type":"constrained"}} -->
+    <nav class="wp-block-group offcanvas-navigation">
+        <!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","orientation":"vertical","justifyContent":"left"}} /-->
+    </nav>
+    <!-- /wp:group -->
+
+    <!-- wp:group {"tagName":"div","className":"offcanvas-footer","layout":{"type":"constrained"}} -->
+    <div class="wp-block-group offcanvas-footer">
+        <!-- wp:social-links {"iconColor":"base","iconColorValue":"#ffffff","className":"is-style-logos-only"} -->
+        <ul class="wp-block-social-links has-icon-color is-style-logos-only">
+            <!-- wp:social-link {"url":"#","service":"facebook"} /-->
+            <!-- wp:social-link {"url":"#","service":"instagram"} /-->
+            <!-- wp:social-link {"url":"#","service":"linkedin"} /-->
+        </ul>
+        <!-- /wp:social-links -->
+    </div>
+    <!-- /wp:group -->
+
+</div>
+<!-- /wp:group -->