Add dedicated mobile navigation

This commit is contained in:
Björn Fromme
2020-03-20 09:21:55 +01:00
parent f43fdd84f3
commit cf3a9b15fe
5 changed files with 14 additions and 6 deletions
+1 -1
View File
@@ -3,7 +3,7 @@ name: ep-reisen
type: typo3 type: typo3
docroot: public docroot: public
php_version: "7.3" php_version: "7.3"
webserver_type: nginx-fpm webserver_type: apache-cgi
router_http_port: "80" router_http_port: "80"
router_https_port: "443" router_https_port: "443"
xdebug_enabled: false xdebug_enabled: false
@@ -14,6 +14,8 @@ plugin.tx_eptheme {
topNavPid = topNavPid =
# cat=eptheme/200/110; type=string; label=Main navigation PID # cat=eptheme/200/110; type=string; label=Main navigation PID
mainNavPid = mainNavPid =
# cat=eptheme/200/115; type=string; label=Mobile navigation PID
mobileNavPid =
# cat=eptheme/200/120; type=string; label=Footer navigation PID # cat=eptheme/200/120; type=string; label=Footer navigation PID
footerNavPid = footerNavPid =
# cat=eptheme/200/130; type=string; label=Default homepage UID # cat=eptheme/200/130; type=string; label=Default homepage UID
@@ -31,6 +31,7 @@ plugin.tx_eptheme {
settings { settings {
footerNavPid = {$plugin.tx_eptheme.settings.footerNavPid} footerNavPid = {$plugin.tx_eptheme.settings.footerNavPid}
mainNavPid = {$plugin.tx_eptheme.settings.mainNavPid} mainNavPid = {$plugin.tx_eptheme.settings.mainNavPid}
mobileNavPid = {$plugin.tx_eptheme.settings.mobileNavPid}
topNavPid = {$plugin.tx_eptheme.settings.topNavPid} topNavPid = {$plugin.tx_eptheme.settings.topNavPid}
legalNoticePageUid = {$plugin.tx_eptheme.settings.legalNoticePageUid} legalNoticePageUid = {$plugin.tx_eptheme.settings.legalNoticePageUid}
termsAndConditionsPageUid = {$plugin.tx_eptheme.settings.termsAndConditionsPageUid} termsAndConditionsPageUid = {$plugin.tx_eptheme.settings.termsAndConditionsPageUid}
@@ -122,7 +122,7 @@ new Vue({
this.searchBoxVisible = false; this.searchBoxVisible = false;
}, },
toggleMobileNavigation () { toggleMobileNavigation () {
$('#ep-navbar-burger-menu').collapse('toggle'); $('[data-mobile-menu]').collapse('toggle');
}, },
toggleAreaNavigation () { toggleAreaNavigation () {
const $nav = $('.area-nav'); const $nav = $('.area-nav');
@@ -8,7 +8,12 @@
<div class="navbar-main-wrapper" :class="{ 'searchbar-fixed': searchbarFixed }"> <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')}"> <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="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:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else> <f:else>
<f:cObject typoscriptObjectPath="lib.searchBox"/> <f:cObject typoscriptObjectPath="lib.searchBox"/>
@@ -20,7 +25,7 @@
<f:section name="NavbarHeader"> <f:section name="NavbarHeader">
<div class="navbar-header"> <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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@@ -40,9 +45,9 @@
</f:section> </f:section>
<f:section name="FirstLevel"> <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"> <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"> <f:for each="{menu}" as="topitem" iteration="outerIteration">
<li class="dropdown"> <li class="dropdown">
<f:if condition="{topitem.hasSubPages}"> <f:if condition="{topitem.hasSubPages}">