Ctm Push Navigation Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require contao-thememanager/ctm-push-navigation
   

   Ensure contao-thememanager/core-bundle is also installed (dependency).

2. Enable the Bundle Add to config/bundles.php:

   ContaoThememanager\CtmPushNavigationBundle\CtmPushNavigationBundle::class => ['all' => true],
   

3. First Use Case: Push Navigation in a Template

   • Create a CTM Push Navigation element in the Contao backend (Content > Push Navigation).
   • Assign it to a template via Page Layout or Content Element.
   • Use the template variable in your Twig:

     {{ ctm_push_navigation(element) }}
     

4. Backend Configuration

   • Navigate to Thememanager > Push Navigation to configure menus, styles, and behaviors.

Implementation Patterns

Workflow: Dynamic Menu Integration

1. Define a Push Navigation Element

   • Create a new Push Navigation content element in Contao.
   • Configure:
     • Menu Type (e.g., "Main Navigation," "Footer Links").
     • Animation (slide, fade, etc.).
     • Trigger (click, hover, or auto).

2. Twig Integration

   • Embed in templates:

     {% if ctm_push_navigation.is_active(element) %}
         <button class="ctm-push-trigger">{{ 'CTM_PUSH_TRIGGER'|trans }}</button>
         {{ ctm_push_navigation.render(element) }}
     {% endif %}
     

   • Use JavaScript events (if custom triggers):

     document.querySelector('.ctm-push-trigger').addEventListener('click', (e) => {
         e.preventDefault();
         ctmPushNavigation.toggle(e.target);
     });
     

3. Styling with CSS

   • Override default styles via assets/css/ctm-push-navigation.css:

     .ctm-push-navigation {
         --ctm-push-bg: #2c3e50;
         --ctm-push-transition: all 0.3s ease;
     }
     

4. Multi-Language Support

   • Use Contao’s {{ 'CTM_*'|trans }} for translatable labels.
   • Configure language-specific menus in the backend.

Integration Tips

• With Contao Thememanager

  • Leverage CTM Themes to scope navigation styles per theme.
  • Use CTM Page Builder to drag-and-drop push navigation into layouts.

• With Frontend Frameworks

  • For Alpine.js, bind to x-data:

    <div x-data="{ open: false }" x-on:click.away="open = false">
        <button @click="open = !open">Menu</button>
        {{ ctm_push_navigation.render(element, { open: open }) }}
    </div>
    

  • For React, wrap the output in a controlled component:

    const PushNavigation = ({ isOpen, onToggle }) => (
        <>
            <button onClick={onToggle}>Menu</button>
            <div className="ctm-push-navigation" style={{ display: isOpen ? 'block' : 'none' }}>
                {renderTwig('ctm_push_navigation', { element: elementData })}
            </div>
        </>
    );
    

• AJAX Loading

  • Use Contao’s {{ content::load() }} to lazy-load navigation:

    {{ content::load('ctm_push_navigation', { id: element.id, ajax: true }) }}
    

Gotchas and Tips

Pitfalls

1. JavaScript Conflicts

   • Ensure jQuery (required by CTM) is loaded before the bundle’s JS.
   • Fix: Add to assets/app.js:

     document.addEventListener('DOMContentLoaded', function() {
         require(['ctm-push-navigation'], function() {
             // Initialize after dependencies
         });
     });
     

2. Caching Issues

   • Clear Contao cache after backend changes:

     php bin/contao-console cache:clear
     

   • Debug: Check var/log/contao.log for missing assets.

3. Mobile Responsiveness

   • Default styles may not adapt to small screens.
   • Fix: Override media queries:

     @media (max-width: 768px) {
         .ctm-push-navigation {
             width: 100vw !important;
         }
     }
     

4. Menu Hierarchy Limits

   • Deeply nested menus (>3 levels) may break animations.
   • Workaround: Flatten menus in the backend or use max_depth in Twig:

     {{ ctm_push_navigation.render(element, { max_depth: 2 }) }}
     

Debugging

• Backend Logs

  • Enable debug mode in config/local.php:

    'debug' => true,
    'log' => [
        'file' => 'var/log/contao.log',
    ],
    

  • Check for CtmPushNavigationBundle errors.

• Browser DevTools

  • Inspect the .ctm-push-navigation class for missing styles.
  • Verify JS events fire with:

    console.log(ctmPushNavigation); // Check if object exists
    

Extension Points

1. Custom Animations

   • Extend via JavaScript:

     ctmPushNavigation.animations.push({
         name: 'customSlide',
         enter: function(el, done) { /* ... */ },
         leave: function(el, done) { /* ... */ }
     });
     

2. Backend Overrides

   • Subclass the CtmPushNavigationWidget to modify the widget template:

     // src/Resources/contao/dca/tl_content.php
     $GLOBALS['TL_DCA']['tl_content']['config']['onload_callback'][] = function() {
         System::loadLanguageFile('tl_content');
         $GLOBALS['TL_DCA']['tl_content']['fields']['ctm_push_navigation']['eval']['template'] = 'custom_ctm_push';
     };
     

3. Event Listeners

   • Hook into Contao events (e.g., ctm.push.navigation.init):

     // config/services.yaml
     ContaoThememanager\CtmPushNavigationBundle\EventListener\PushNavigationListener:
         tags:
             - { name: kernel.event_listener, event: ctm.push.navigation.init, method: onInit }
     

4. Theme-Specific Config

   • Use Contao’s ThemeManager to load theme-specific JS/CSS:

     {% if theme.name == 'dark-theme' %}
         {{ ctm_push_navigation.render(element, { theme: 'dark' }) }}
     {% endif %}