Add dedicated mobile navigation

.ddev/config.yaml

@@ -3,7 +3,7 @@ name: ep-reisen
 type: typo3
 docroot: public
 php_version: "7.3"
-webserver_type: nginx-fpm
+webserver_type: apache-cgi
 router_http_port: "80"
 router_https_port: "443"
 xdebug_enabled: false

public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript

@@ -14,6 +14,8 @@ plugin.tx_eptheme {
 		topNavPid =
 		# cat=eptheme/200/110; type=string; label=Main navigation PID
 		mainNavPid =
+		# cat=eptheme/200/115; type=string; label=Mobile navigation PID
+		mobileNavPid =
 		# cat=eptheme/200/120; type=string; label=Footer navigation PID
 		footerNavPid =
 		# cat=eptheme/200/130; type=string; label=Default homepage UID

public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript

@@ -31,6 +31,7 @@ plugin.tx_eptheme {
     settings {
         footerNavPid = {$plugin.tx_eptheme.settings.footerNavPid}
         mainNavPid = {$plugin.tx_eptheme.settings.mainNavPid}
+        mobileNavPid = {$plugin.tx_eptheme.settings.mobileNavPid}
         topNavPid = {$plugin.tx_eptheme.settings.topNavPid}
         legalNoticePageUid = {$plugin.tx_eptheme.settings.legalNoticePageUid}
         termsAndConditionsPageUid = {$plugin.tx_eptheme.settings.termsAndConditionsPageUid}

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js

@@ -122,7 +122,7 @@ new Vue({
             this.searchBoxVisible = false;
         },
         toggleMobileNavigation () {
-            $('#ep-navbar-burger-menu').collapse('toggle');
+            $('[data-mobile-menu]').collapse('toggle');
         },
         toggleAreaNavigation () {
             const $nav = $('.area-nav');

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html

@@ -8,7 +8,12 @@
         <div class="navbar-main-wrapper" :class="{ 'searchbar-fixed': searchbarFixed }">
             <nav class="container navbar navbar-default navbar-main{f:if(condition: data.tx_eptheme_hide_searchbar, then: ' navbar-main--no-searchbar')}">
                 <f:render section="NavbarHeader" arguments="{_all}"/>
-                <f:render section="FirstLevel" arguments="{_all}"/>
+                <div class="hidden-xs hidden-sm">
+                    <f:render section="FirstLevel" arguments="{navPid: settings.mainNavPid, mobile: 0}"/>
+                </div>
+                <div class="hidden-md hidden-lg">
+                    <f:render section="FirstLevel" arguments="{navPid: settings.mobileNavPid, mobile: 1}"/>
+                </div>
                 <f:if condition="{data.tx_eptheme_hide_searchbar}">
                     <f:else>
                         <f:cObject typoscriptObjectPath="lib.searchBox"/>
@@ -20,7 +25,7 @@
 
     <f:section name="NavbarHeader">
         <div class="navbar-header">
-            <a @click.prevent="toggleMobileNavigation()" type="button" class="navbar-toggle collapsed" id="navtoggle">
+            <a @click.prevent="toggleMobileNavigation()" href="#" class="navbar-toggle collapsed" id="navtoggle">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
@@ -40,9 +45,9 @@
     </f:section>
 
     <f:section name="FirstLevel">
-        <div class="collapse navbar-collapse" id="ep-navbar-burger-menu">
+        <div class="collapse navbar-collapse"{f:if(condition: mobile, then: ' data-mobile-menu')}>
             <ul class="nav navbar-nav">
-                <v:menu pageUid="{settings.mainNavPid}" entryLevel="1" useShortcutUid="true">
+                <v:menu pageUid="{navPid}" entryLevel="1" useShortcutUid="true">
                     <f:for each="{menu}" as="topitem" iteration="outerIteration">
                         <li class="dropdown">
                             <f:if condition="{topitem.hasSubPages}">