[FEATURE] Add Logo and language menu in navbar (#330)

* [TASK] add two new theme constants for having the logo and language menu in navbar * [TASK] compile css and less * [TASK] change if condition for langMenu in header top, add less variable for langMenus background-color, text color and lineheight
t3kit · Nov 3, 2017 · 93d1f26 · 93d1f26
1 parent c4138c4
commit 93d1f26
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 1 deletion.
diff --git a/Configuration/TypoScript/Library/themes.menu.constantsts b/Configuration/TypoScript/Library/themes.menu.constantsts
@@ -16,6 +16,10 @@ themes.configuration.menu.main.dropdownColumns = 0
 themes.configuration.menu.main.showThirdNavLevel = 0
 # cat=menu,advanced/main_menu; type=options[left,right]; label=  Navbar items position to the right
 themes.configuration.menu.main.navbarPos = left
+# cat=menu,advanced/main_menu; type=options[0,1]; label= Enable logo in navigation menu
+themes.configuration.menu.main.enableLogoInNavigation = 0
+# cat=menu,advanced/main_menu; type=options[0,1]; label= Enable LangMenu in navigation menu
+themes.configuration.menu.main.enableLangMenuInNavigation = 0
 
 # Sub Menu
 #############################################

diff --git a/Resources/Private/Partials/Header/Header.html b/Resources/Private/Partials/Header/Header.html
@@ -78,17 +78,29 @@
 		<button type="button" class="main-navigation__toggle-btn js__main-navigation__toggle-btn" >
 			<span>toggle menu</span>
 		</button>
+		<f:if condition="{theme:constant(constant:'themes.configuration.menu.main.enableLangMenuInNavigation')}">
+			<div class="main-navigation-mobile__language-menu">
+				<f:cObject typoscriptObjectPath="lib.menu.language.standard" />
+			</div>
+		</f:if>
 	</f:if>
 
 	<nav class="main-navigation js__main-navigation{f:if(condition: '{theme:constant(constant:\'themes.configuration.menu.main.dropdownColumns\')} == 1', then: ' _dropdown-menu-with-columns js__dropdown-menu-with-columns')}">
 		<div class="main-navigation__items-wrp js__navigation__items-wrp">
+			<f:if condition="{theme:constant(constant:'themes.configuration.menu.main.enableLogoInNavigation')}">
+				<div class="main-navigation__logo">
+					<f:cObject typoscriptObjectPath="lib.header.logo.main" />
+				</div>
+			</f:if>
+			<f:if condition="{theme:constant(constant:'themes.configuration.menu.main.enableLangMenuInNavigation')}">
+				<f:cObject typoscriptObjectPath="lib.menu.language.standard" />
+			</f:if>
 			<ul class="main-navigation__items-list js__main-navigation__items-list {f:if(condition: '{theme:constant(constant:\'themes.configuration.menu.main.navbarPos\')} == right', then: '_right-pos')}">
 				<f:cObject typoscriptObjectPath="lib.menu.main" />
 
 				<f:if condition="{theme:constant(constant:'themes.configuration.elem.status.headerTopNavigationVisibleInMobileMenu')}">
 					<f:cObject typoscriptObjectPath="lib.menu.topMobile" />
 				</f:if>
-
 				<f:if condition="{theme:constant(constant:'themes.configuration.elem.status.showHeaderMainMenuSearch')}">
 					<f:cObject typoscriptObjectPath="lib.menu.main.search" />
 				</f:if>

diff --git a/Resources/Public/css/main.css b/Resources/Public/css/main.css
diff --git a/Resources/Public/less/main.less b/Resources/Public/less/main.less
@@ -2183,6 +2183,7 @@
 .icon-t3-pinterest:before { content: "\f231"; }
 .icon-t3-instagram:before { content: "\ea92"; }
 .icon-t3-youtube:before { content: "\ea9d"; }
+.icon-t3-mynewsdesk:before { content: "\e902"; }
 
 // ==== Search icons ==========
 .icon-t3-search:before { content: "\e946"; } // search icon
@@ -2583,6 +2584,52 @@
     }
 }
 
+.main-navigation__logo {
+    float: none;
+    margin-right: 20px;
+    width: 50%;
+    display: inline-block;
+}
+
+.main-navigation-mobile__language-menu .header-top__language-menu {
+    float: right;
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 5001;
+    display: block;
+}
+
+.main-navigation-mobile__language-menu .header-top__language-menu .header-top__language-menu-box {
+    width: auto;
+    min-width: 150px;
+    background: @header-top-bg-color;
+    top: 1px;
+}
+
+.main-navigation .header-top__language-menu-box-close-btn {
+    top: 5px;
+}
+
+.main-navigation .header-top__language-menu-btn {
+    line-height: @nav-height;
+}
+
+.main-navigation .header-top__language-menu-box {
+    width: 100%;
+    height: 100%;
+    background-color: @nav-background-color;
+}
+
+.main-navigation .header-top__language-menu-box .header-top__language-menu-box-item {
+    color: @nav-link-color;
+    line-height: @nav-height;
+}
+
+.main-navigation .header-top__language-menu {
+    display: none;
+}
+
 .main-navigation__search-btn-wrp._header-top-search-btn {
     background: @header-top-bg-color;
     display: block;
@@ -2635,6 +2682,20 @@
 }
 
 @media (min-width: @screen-md-min) {
+    .main-navigation-mobile__language-menu .header-top__language-menu {
+        display: none;
+    }
+
+    .main-navigation .header-top__language-menu {
+        display: block;
+    }
+
+    .main-navigation__logo {
+        float: left;
+        margin-right: 20px;
+        width: auto;
+    }
+
     // ._header-top-search-btn .main-navigation__search-btn {
     //     height: 30px;
     // }

diff --git a/felayout_t3kit/dev/styles/main/header/header.less b/felayout_t3kit/dev/styles/main/header/header.less
@@ -357,6 +357,52 @@
     }
 }
 
+.main-navigation__logo {
+    float: none;
+    margin-right: 20px;
+    width: 50%;
+    display: inline-block;
+}
+
+.main-navigation-mobile__language-menu .header-top__language-menu {
+    float: right;
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 5001;
+    display: block;
+}
+
+.main-navigation-mobile__language-menu .header-top__language-menu .header-top__language-menu-box {
+    width: auto;
+    min-width: 150px;
+    background: @header-top-bg-color;
+    top: 1px;
+}
+
+.main-navigation .header-top__language-menu-box-close-btn {
+    top: 5px;
+}
+
+.main-navigation .header-top__language-menu-btn {
+    line-height: @nav-height;
+}
+
+.main-navigation .header-top__language-menu-box {
+    width: 100%;
+    height: 100%;
+    background-color: @nav-background-color;
+}
+
+.main-navigation .header-top__language-menu-box .header-top__language-menu-box-item {
+    color: @nav-link-color;
+    line-height: @nav-height;
+}
+
+.main-navigation .header-top__language-menu {
+    display: none;
+}
+
 .main-navigation__search-btn-wrp._header-top-search-btn {
     background: @header-top-bg-color;
     display: block;
@@ -409,6 +455,20 @@
 }
 
 @media (min-width: @screen-md-min) {
+    .main-navigation-mobile__language-menu .header-top__language-menu {
+        display: none;
+    }
+
+    .main-navigation .header-top__language-menu {
+        display: block;
+    }
+
+    .main-navigation__logo {
+        float: left;
+        margin-right: 20px;
+        width: auto;
+    }
+
     // ._header-top-search-btn .main-navigation__search-btn {
     //     height: 30px;
     // }