Search Improved: dropdown (#4994)

* first draft

* fix

* RTL CSS

* add link to documentation

* hide search button in desktop view

* rename .no-desktop to .only-mobile

* i18n

* add ID

* Theme: Swage

* Theme Scewdriver

* Theme Pafat

* Theme flat

* Theme: Adark

* Theme: Dark

* i18n: German

* i18n en-us

* fix i18n

* Update app/i18n/fr/gen.php

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Update app/layout/nav_menu.phtml

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Update app/layout/nav_menu.phtml

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Update app/layout/nav_menu.phtml

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* wip

* mapco theme

* RTL for Ansum and Mapco

* fix

* fix

---------

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

29 files changed, 285 insertions, 330 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 25df31194..0f600fa2e 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -1105,21 +1105,6 @@ kbd {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		padding: 3px 5px;
-		max-width: 97%;
-		width: 90px;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: var(--background-color-active);
 		border-top: 2px solid var(--background-color-light);
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 6fb1bf25a..a42fa2a71 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -1105,21 +1105,6 @@ kbd {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		padding: 3px 5px;
-		max-width: 97%;
-		width: 90px;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: var(--background-color-active);
 		border-top: 2px solid var(--background-color-light);
diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index 36b660345..88ab37296 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -22,6 +22,12 @@
 }
 
 /*=== Dropdown */
+.dropdown {
+	.dropdown-target:target + .btn {
+		background-color: variables.$grey-medium-light;
+	}
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -51,7 +57,9 @@
 
 		@include mixins.transition(all, 0.075s, ease-in-out);
 
-		a, .as-link {
+		> a,
+		> span,
+		> .as-link {
 			padding: 0 2rem;
 			color: variables.$main-font-color;
 			font-size: inherit;
@@ -60,7 +68,10 @@
 			span.icon {
 				padding: 0 0.25rem !important;
 			}
+		}
 
+		> a,
+		> .as-link {
 			&:not(.addItem):hover {
 				background: variables.$main-first;
 				color: variables.$white;
@@ -86,7 +97,7 @@
 		}
 
 		&:not(.addItem) {
-			a:hover,
+			> a:hover,
 			button:hover {
 				background: variables.$main-first;
 				color: variables.$white;
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index cb5271dcd..78431f462 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -207,7 +207,7 @@ main.prompt {
 			}
 		}
 
-		.dropdown {
+		.dropdown:not(#dropdown-search-wrapper) {
 			a.dropdown-toggle {
 				border-left-width: 0;
 				background-image: url(icons/more.svg);
@@ -217,6 +217,12 @@ main.prompt {
 				}
 			}
 		}
+
+		#dropdown-search-wrapper.dropdown {
+			a.dropdown-toggle {
+				border-left-width: 0;
+			}
+		}
 	}
 }
 
diff --git a/p/themes/Ansum/_mobile.scss b/p/themes/Ansum/_mobile.scss
index bb13a0e83..6fbca4a52 100644
--- a/p/themes/Ansum/_mobile.scss
+++ b/p/themes/Ansum/_mobile.scss
@@ -35,35 +35,9 @@
 	}
 
 	.header {
-		display: block;
-		height: 8rem;
-
 		.item {
 			&.search {
-				display: block;
-
-				form {
-					display: inherit;
-				}
-
-				.stick {
-					display: flex;
-				}
-
-				input {
-					width: 90%;
-					height: 3.5rem;
-
-					&:focus {
-						width: 100%;
-
-					}
-				}
-
-				.btn {
-					min-height: 49px;
-					padding: 0.5rem 2rem;
-				}
+				display: none;
 			}
 
 			&.configure {
@@ -103,11 +77,7 @@
 		}
 
 		.search {
-			display: none;
-			max-width: 97%;
-
 			.input {
-
 				max-width: 97%;
 				width: 90px;
 
diff --git a/p/themes/Ansum/_sidebar.scss b/p/themes/Ansum/_sidebar.scss
index e92dd2ec4..7c21d159d 100644
--- a/p/themes/Ansum/_sidebar.scss
+++ b/p/themes/Ansum/_sidebar.scss
@@ -93,7 +93,7 @@
 		border-radius: 5px 0 0 5px;
 	}
 
-	.btn:last-child, input:last-child, .btn + .dropdown > .btn {
+	.btn:last-child, input:last-child, .dropdown:last-child > .btn {
 		border-radius: 0 5px 5px 0;
 	}
 
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 03aa67e67..709861e18 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -221,6 +221,10 @@ form th {
 }
 
 /*=== Dropdown */
+.dropdown .dropdown-target:target + .btn {
+	background-color: #e4d8cc;
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -247,20 +251,26 @@ form th {
 .dropdown-menu .item {
 	transition: all 0.075s ease-in-out;
 }
-.dropdown-menu .item a, .dropdown-menu .item .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 2rem;
 	color: #363330;
 	font-size: inherit;
 	line-height: 2.5em;
 }
-.dropdown-menu .item a span.icon, .dropdown-menu .item .as-link span.icon {
+.dropdown-menu .item > a span.icon,
+.dropdown-menu .item > span span.icon,
+.dropdown-menu .item > .as-link span.icon {
 	padding: 0 0.25rem !important;
 }
-.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
+.dropdown-menu .item > a:not(.addItem):hover,
+.dropdown-menu .item > .as-link:not(.addItem):hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
+.dropdown-menu .item > a:not(.addItem):hover .icon,
+.dropdown-menu .item > .as-link:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
 .dropdown-menu .item.dropdown-section {
@@ -272,12 +282,12 @@ form th {
 .dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link {
 	padding-left: 2rem;
 }
-.dropdown-menu .item:not(.addItem) a:hover,
+.dropdown-menu .item:not(.addItem) > a:hover,
 .dropdown-menu .item:not(.addItem) button:hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item:not(.addItem) a:hover .icon,
+.dropdown-menu .item:not(.addItem) > a:hover .icon,
 .dropdown-menu .item:not(.addItem) button:hover .icon {
 	filter: brightness(3);
 }
@@ -518,7 +528,7 @@ form th {
 .stick .btn:first-child {
 	border-radius: 5px 0 0 5px;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
 	border-radius: 0 5px 5px 0;
 }
 .stick .btn + .btn,
@@ -819,13 +829,16 @@ main.prompt {
 .nav_menu .stick .btn.read_all:hover {
 	background-color: #e4d8cc;
 }
-.nav_menu .stick .dropdown a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-left-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+	border-left-width: 0;
+}
 
 #dropdown-query ~ .dropdown-menu .dropdown-header .icon {
 	vertical-align: middle;
@@ -1196,29 +1209,8 @@ main.prompt {
 #slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
 	}
-	.header {
-		display: block;
-		height: 8rem;
-	}
 	.header .item.search {
-		display: block;
-	}
-	.header .item.search form {
-		display: inherit;
-	}
-	.header .item.search .stick {
-		display: flex;
-	}
-	.header .item.search input {
-		width: 90%;
-		height: 3.5rem;
-	}
-	.header .item.search input:focus {
-		width: 100%;
-	}
-	.header .item.search .btn {
-		min-height: 49px;
-		padding: 0.5rem 2rem;
+		display: none;
 	}
 	.header .item.configure {
 		position: absolute;
@@ -1246,10 +1238,6 @@ main.prompt {
 	.nav_menu .stick .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .search {
-		display: none;
-		max-width: 97%;
-	}
 	.nav_menu .search .input {
 		max-width: 97%;
 		width: 90px;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index b106da359..ad480c952 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -221,6 +221,10 @@ form th {
 }
 
 /*=== Dropdown */
+.dropdown .dropdown-target:target + .btn {
+	background-color: #e4d8cc;
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -247,20 +251,26 @@ form th {
 .dropdown-menu .item {
 	transition: all 0.075s ease-in-out;
 }
-.dropdown-menu .item a, .dropdown-menu .item .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 2rem;
 	color: #363330;
 	font-size: inherit;
 	line-height: 2.5em;
 }
-.dropdown-menu .item a span.icon, .dropdown-menu .item .as-link span.icon {
+.dropdown-menu .item > a span.icon,
+.dropdown-menu .item > span span.icon,
+.dropdown-menu .item > .as-link span.icon {
 	padding: 0 0.25rem !important;
 }
-.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
+.dropdown-menu .item > a:not(.addItem):hover,
+.dropdown-menu .item > .as-link:not(.addItem):hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
+.dropdown-menu .item > a:not(.addItem):hover .icon,
+.dropdown-menu .item > .as-link:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
 .dropdown-menu .item.dropdown-section {
@@ -272,12 +282,12 @@ form th {
 .dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link {
 	padding-right: 2rem;
 }
-.dropdown-menu .item:not(.addItem) a:hover,
+.dropdown-menu .item:not(.addItem) > a:hover,
 .dropdown-menu .item:not(.addItem) button:hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item:not(.addItem) a:hover .icon,
+.dropdown-menu .item:not(.addItem) > a:hover .icon,
 .dropdown-menu .item:not(.addItem) button:hover .icon {
 	filter: brightness(3);
 }
@@ -518,7 +528,7 @@ form th {
 .stick .btn:first-child {
 	border-radius: 0 5px 5px 0;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
 	border-radius: 5px 0 0 5px;
 }
 .stick .btn + .btn,
@@ -819,13 +829,16 @@ main.prompt {
 .nav_menu .stick .btn.read_all:hover {
 	background-color: #e4d8cc;
 }
-.nav_menu .stick .dropdown a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-right-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+	border-right-width: 0;
+}
 
 #dropdown-query ~ .dropdown-menu .dropdown-header .icon {
 	vertical-align: middle;
@@ -1196,29 +1209,8 @@ main.prompt {
 #slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
 	}
-	.header {
-		display: block;
-		height: 8rem;
-	}
 	.header .item.search {
-		display: block;
-	}
-	.header .item.search form {
-		display: inherit;
-	}
-	.header .item.search .stick {
-		display: flex;
-	}
-	.header .item.search input {
-		width: 90%;
-		height: 3.5rem;
-	}
-	.header .item.search input:focus {
-		width: 100%;
-	}
-	.header .item.search .btn {
-		min-height: 49px;
-		padding: 0.5rem 2rem;
+		display: none;
 	}
 	.header .item.configure {
 		position: absolute;
@@ -1246,10 +1238,6 @@ main.prompt {
 	.nav_menu .stick .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .search {
-		display: none;
-		max-width: 97%;
-	}
 	.nav_menu .search .input {
 		max-width: 97%;
 		width: 90px;
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 859397eb1..fa194bb9e 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -995,20 +995,6 @@ a.btn {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		max-width: 97%;
-		width: 90px;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: #1a1a1a;
 		border-top: 1px solid #888;
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index a75552d51..2610e49d5 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -995,20 +995,6 @@ a.btn {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		max-width: 97%;
-		width: 90px;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: #1a1a1a;
 		border-top: 1px solid #888;
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index aefe3d454..8fd09bb35 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -147,7 +147,7 @@ form th {
 
 .stick .btn:last-child,
 .stick input:last-child,
-.stick .btn + .dropdown > .btn {
+.stick .dropdown:last-child > .btn {
 	border-radius: 0 5px 5px 0;
 }
 
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 43ada0a4c..43327ddeb 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -147,7 +147,7 @@ form th {
 
 .stick .btn:last-child,
 .stick input:last-child,
-.stick .btn + .dropdown > .btn {
+.stick .dropdown:last-child > .btn {
 	border-radius: 5px 0 0 5px;
 }
 
diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss
index 8b60dcf0f..5f7e04e56 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_components.scss
@@ -22,6 +22,12 @@
 }
 
 /*=== Dropdown */
+.dropdown {
+	.dropdown-target:target + .btn {
+		background-color: variables.$grey-medium-light;
+	}
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -51,7 +57,9 @@
 
 		@include mixins.transition(all, 0.075s, ease-in-out);
 
-		a, .as-link {
+		> a,
+		> span,
+		> .as-link {
 			padding: 0 2rem;
 			color: variables.$main-font-color;
 			font-size: inherit;
@@ -60,7 +68,10 @@
 			span.icon {
 				padding: 0 0.25rem !important;
 			}
+		}
 
+		> a,
+		> .as-link {
 			&:not(.addItem):hover {
 				background: variables.$main-first;
 				color: variables.$white;
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss
index 7be890369..b57a48fd0 100644
--- a/p/themes/Mapco/_layout.scss
+++ b/p/themes/Mapco/_layout.scss
@@ -226,7 +226,7 @@ main.prompt {
 			}
 		}
 
-		.dropdown {
+		.dropdown:not(#dropdown-search-wrapper) {
 			a.dropdown-toggle {
 				border-left-width: 0;
 				background-image: url(icons/more.svg);
@@ -236,6 +236,12 @@ main.prompt {
 				}
 			}
 		}
+
+		#dropdown-search-wrapper.dropdown {
+			a.dropdown-toggle {
+				border-left-width: 0;
+			}
+		}
 	}
 }
 
diff --git a/p/themes/Mapco/_mobile.scss b/p/themes/Mapco/_mobile.scss
index 6960873bf..3faea3d7e 100644
--- a/p/themes/Mapco/_mobile.scss
+++ b/p/themes/Mapco/_mobile.scss
@@ -35,30 +35,9 @@
 	}
 
 	.header {
-		display: block;
-		height: 8rem;
-
 		.item {
 			&.search {
-				display: block;
-
-				form {
-					display: inherit;
-				}
-
-				.stick {
-					display: flex;
-				}
-
-				input {
-					width: 90%;
-					height: 3.5rem;
-
-					&:focus {
-						width: 100%;
-
-					}
-				}
+				display: none;
 			}
 
 			&.configure {
@@ -105,11 +84,7 @@
 		}
 
 		.search {
-			display: none;
-			max-width: 97%;
-
 			.input {
-
 				max-width: 97%;
 				width: 90px;
 
diff --git a/p/themes/Mapco/_sidebar.scss b/p/themes/Mapco/_sidebar.scss
index a71960b1d..090a69580 100644
--- a/p/themes/Mapco/_sidebar.scss
+++ b/p/themes/Mapco/_sidebar.scss
@@ -93,7 +93,7 @@
 		border-radius: 5px 0 0 5px;
 	}
 
-	.btn:last-child, input:last-child, .btn + .dropdown > .btn {
+	.btn:last-child, input:last-child, .dropdown:last-child > .btn {
 		border-radius: 0 5px 5px 0;
 	}
 
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index d2978c217..967accc00 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -220,6 +220,10 @@ form th {
 }
 
 /*=== Dropdown */
+.dropdown .dropdown-target:target + .btn {
+	background-color: #d5d8db;
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -246,20 +250,26 @@ form th {
 .dropdown-menu .item {
 	transition: all 0.075s ease-in-out;
 }
-.dropdown-menu .item a, .dropdown-menu .item .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 2rem;
 	color: #303136;
 	font-size: inherit;
 	line-height: 2.5em;
 }
-.dropdown-menu .item a span.icon, .dropdown-menu .item .as-link span.icon {
+.dropdown-menu .item > a span.icon,
+.dropdown-menu .item > span span.icon,
+.dropdown-menu .item > .as-link span.icon {
 	padding: 0 0.25rem !important;
 }
-.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
+.dropdown-menu .item > a:not(.addItem):hover,
+.dropdown-menu .item > .as-link:not(.addItem):hover {
 	background: #36c;
 	color: #fff;
 }
-.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
+.dropdown-menu .item > a:not(.addItem):hover .icon,
+.dropdown-menu .item > .as-link:not(.addItem):hover .icon {
 	filter: brightness(3);
 }
 .dropdown-menu .item.dropdown-section {
@@ -532,7 +542,7 @@ form th {
 .stick .btn:first-child {
 	border-radius: 5px 0 0 5px;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
 	border-radius: 0 5px 5px 0;
 }
 .stick .btn + .btn,
@@ -843,13 +853,16 @@ main.prompt {
 .nav_menu .stick .btn.read_all:hover {
 	background-color: #d5d8db;
 }
-.nav_menu .stick .dropdown a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-left-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+	border-left-width: 0;
+}
 
 /*=== Content of feed articles */
 .content, .content.thin {
@@ -1213,25 +1226,8 @@ main.prompt {
 #slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
 	}
-	.header {
-		display: block;
-		height: 8rem;
-	}
 	.header .item.search {
-		display: block;
-	}
-	.header .item.search form {
-		display: inherit;
-	}
-	.header .item.search .stick {
-		display: flex;
-	}
-	.header .item.search input {
-		width: 90%;
-		height: 3.5rem;
-	}
-	.header .item.search input:focus {
-		width: 100%;
+		display: none;
 	}
 	.header .item.configure {
 		position: absolute;
@@ -1264,10 +1260,6 @@ main.prompt {
 	.nav_menu .stick .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .search {
-		display: none;
-		max-width: 97%;
-	}
 	.nav_menu .search .input {
 		max-width: 97%;
 		width: 90px;
@@ -1338,4 +1330,6 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
\ No newline at end of file
+}
+
+/*# sourceMappingURL=mapco.css.map */
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 7ed00631a..b962e5fe0 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -220,6 +220,10 @@ form th {
 }
 
 /*=== Dropdown */
+.dropdown .dropdown-target:target + .btn {
+	background-color: #d5d8db;
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -246,20 +250,26 @@ form th {
 .dropdown-menu .item {
 	transition: all 0.075s ease-in-out;
 }
-.dropdown-menu .item a, .dropdown-menu .item .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 2rem;
 	color: #303136;
 	font-size: inherit;
 	line-height: 2.5em;
 }
-.dropdown-menu .item a span.icon, .dropdown-menu .item .as-link span.icon {
+.dropdown-menu .item > a span.icon,
+.dropdown-menu .item > span span.icon,
+.dropdown-menu .item > .as-link span.icon {
 	padding: 0 0.25rem !important;
 }
-.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
+.dropdown-menu .item > a:not(.addItem):hover,
+.dropdown-menu .item > .as-link:not(.addItem):hover {
 	background: #36c;
 	color: #fff;
 }
-.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
+.dropdown-menu .item > a:not(.addItem):hover .icon,
+.dropdown-menu .item > .as-link:not(.addItem):hover .icon {
 	filter: brightness(3);
 }
 .dropdown-menu .item.dropdown-section {
@@ -532,7 +542,7 @@ form th {
 .stick .btn:first-child {
 	border-radius: 0 5px 5px 0;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
 	border-radius: 5px 0 0 5px;
 }
 .stick .btn + .btn,
@@ -843,13 +853,16 @@ main.prompt {
 .nav_menu .stick .btn.read_all:hover {
 	background-color: #d5d8db;
 }
-.nav_menu .stick .dropdown a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-right-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+	border-right-width: 0;
+}
 
 /*=== Content of feed articles */
 .content, .content.thin {
@@ -1213,25 +1226,8 @@ main.prompt {
 #slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
 	}
-	.header {
-		display: block;
-		height: 8rem;
-	}
 	.header .item.search {
-		display: block;
-	}
-	.header .item.search form {
-		display: inherit;
-	}
-	.header .item.search .stick {
-		display: flex;
-	}
-	.header .item.search input {
-		width: 90%;
-		height: 3.5rem;
-	}
-	.header .item.search input:focus {
-		width: 100%;
+		display: none;
 	}
 	.header .item.configure {
 		position: absolute;
@@ -1264,10 +1260,6 @@ main.prompt {
 	.nav_menu .stick .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .search {
-		display: none;
-		max-width: 97%;
-	}
 	.nav_menu .search .input {
 		max-width: 97%;
 		width: 90px;
@@ -1338,4 +1330,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
\ No newline at end of file
+}
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 319e6a2a4..eba455f52 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -291,6 +291,10 @@ a:hover .icon {
 	filter: brightness(1.1);
 }
 
+#toggle-search.active > .icon {
+	filter: invert(8%) sepia(99%) saturate(7064%) hue-rotate(248deg) brightness(99%) contrast(142%);
+}
+
 .btn.active,
 .btn:active,
 .dropdown-target:target ~ .btn.dropdown-toggle {
@@ -1138,22 +1142,6 @@ a:hover .icon {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		padding: 3px 5px;
-		max-width: 97%;
-		width: 90px;
-		line-height: 2;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: var(--background-color-light);
 		border-top: 1px solid var(--border-color);
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 983b1743e..081f1814f 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -291,6 +291,10 @@ a:hover .icon {
 	filter: brightness(1.1);
 }
 
+#toggle-search.active > .icon {
+	filter: invert(8%) sepia(99%) saturate(7064%) hue-rotate(248deg) brightness(99%) contrast(142%);
+}
+
 .btn.active,
 .btn:active,
 .dropdown-target:target ~ .btn.dropdown-toggle {
@@ -1138,22 +1142,6 @@ a:hover .icon {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		padding: 3px 5px;
-		max-width: 97%;
-		width: 90px;
-		line-height: 2;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: var(--background-color-light);
 		border-top: 1px solid var(--border-color);
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index f5d418f15..4ff9d2812 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -1093,21 +1093,6 @@ a.signin {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		max-width: 97%;
-		width: 90px;
-		line-height: 2;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		border-top: 1px solid var(--border-color-grey-dark);
 		border-left: 1px solid var(--border-color-grey-dark);
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index cc8d72da4..8a71232bb 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -1093,21 +1093,6 @@ a.signin {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		max-width: 97%;
-		width: 90px;
-		line-height: 2;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		border-top: 1px solid var(--border-color-grey-dark);
 		border-right: 1px solid var(--border-color-grey-dark);
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index e66861563..859e34f35 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -1117,10 +1117,6 @@ a.btn {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: none;
-	}
-
 	.nav_menu .search input {
 		padding: 3px 5px;
 		max-width: 97%;
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index a823dc93d..216c84262 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -1117,10 +1117,6 @@ a.btn {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: none;
-	}
-
 	.nav_menu .search input {
 		padding: 3px 5px;
 		max-width: 97%;
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 02fd9471f..6478c0581 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -342,12 +342,32 @@ form th {
 	font-weight: bold;
 	margin: 0 0 0 -14px;
 }
+.dropdown-menu .help a {
+	color: var(--color-text-light);
+	text-decoration: underline;
+	text-decoration-style: dotted;
+}
+.dropdown-menu .help a:hover {
+	text-decoration-style: solid;
+}
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 }
 
+#dropdown-search-wrapper .dropdown-menu {
+	padding-top: 1rem;
+	padding-bottom: 0.25rem;
+}
+#dropdown-search-wrapper .dropdown-menu .stick.search {
+	width: 100%;
+}
+#dropdown-search-wrapper .dropdown-menu .stick.search input[type=search] {
+	width: 100%;
+	border: 0;
+}
+
 .labels .dropdown-menu,
 .tags .dropdown-menu,
 .share .dropdown-menu {
@@ -912,6 +932,9 @@ a.signin {
 	.dropdown {
 		position: relative;
 	}
+	.dropdown .dropdown-menu {
+		width: auto;
+	}
 	#new-article {
 		margin-top: 2rem;
 		width: 100%;
@@ -1151,10 +1174,15 @@ button.as-link {
 	left: 0;
 	right: auto;
 }
+
 #nav_menu_actions ul.dropdown-menu::after {
 	display: none;
 }
 
+#nav_menu_actions .dropdown.only-mobile {
+	display: initial !important;
+}
+
 #nav_menu_read_all ul.dropdown-menu {
 	right: 0;
 	left: auto;
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 9cee872c9..a4ba4f159 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -342,12 +342,32 @@ form th {
 	font-weight: bold;
 	margin: 0 -14px 0 0;
 }
+.dropdown-menu .help a {
+	color: var(--color-text-light);
+	text-decoration: underline;
+	text-decoration-style: dotted;
+}
+.dropdown-menu .help a:hover {
+	text-decoration-style: solid;
+}
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 }
 
+#dropdown-search-wrapper .dropdown-menu {
+	padding-top: 1rem;
+	padding-bottom: 0.25rem;
+}
+#dropdown-search-wrapper .dropdown-menu .stick.search {
+	width: 100%;
+}
+#dropdown-search-wrapper .dropdown-menu .stick.search input[type=search] {
+	width: 100%;
+	border: 0;
+}
+
 .labels .dropdown-menu,
 .tags .dropdown-menu,
 .share .dropdown-menu {
@@ -912,6 +932,9 @@ a.signin {
 	.dropdown {
 		position: relative;
 	}
+	.dropdown .dropdown-menu {
+		width: auto;
+	}
 	#new-article {
 		margin-top: 2rem;
 		width: 100%;
@@ -1151,10 +1174,15 @@ button.as-link {
 	right: 0;
 	left: auto;
 }
+
 #nav_menu_actions ul.dropdown-menu::after {
 	display: none;
 }
 
+#nav_menu_actions .dropdown.only-mobile {
+	display: initial !important;
+}
+
 #nav_menu_read_all ul.dropdown-menu {
 	left: 0;
 	right: auto;
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index c3092b2e1..cc7aed10e 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -455,6 +455,16 @@ form {
 		}
 	}
 
+	.help a {
+		color: var(--color-text-light);
+		text-decoration: underline;
+		text-decoration-style: dotted;
+
+		&:hover {
+			text-decoration-style: solid;
+		}
+	}
+
 	.input {
 		select,
 		input {
@@ -464,6 +474,20 @@ form {
 	}
 }
 
+#dropdown-search-wrapper .dropdown-menu {
+	padding-top: 1rem;
+	padding-bottom: 0.25rem;
+
+	.stick.search {
+		width: 100%;
+
+		input[type="search"] {
+			width: 100%;
+			border: 0;
+		}
+	}
+}
+
 .labels,
 .tags,
 .share {
@@ -1171,6 +1195,10 @@ a.signin {
 
 	.dropdown {
 		position: relative;
+
+		.dropdown-menu {
+			width: auto;
+		}
 	}
 
 	#new-article {
@@ -1476,6 +1504,10 @@ button.as-link {
 			display: none;
 		}
 	}
+
+	.dropdown.only-mobile {
+		display: initial !important;
+	}
 }
 
 #nav_menu_read_all {
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index a546de43a..d142308bc 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -115,6 +115,10 @@ h3 {
 	display: none;
 }
 
+.only-mobile {
+	display: none !important;
+}
+
 /*=== Paragraphs */
 p {
 	margin: 1rem 0 0.5rem;
@@ -443,7 +447,7 @@ td.numeric {
 	flex-shrink: 0;
 }
 
-.stick form {
+#nav_menu_read_all form {
 	display: inline-flex;
 }
 
@@ -1933,7 +1937,6 @@ input:checked + .slide-container .properties {
 }
 
 .nav-login,
-.nav_menu .search,
 .aside .toggle_aside,
 #slider .toggle_aside,
 .nav_menu .toggle_aside,
@@ -2008,6 +2011,10 @@ input:checked + .slide-container .properties {
 		display: none;
 	}
 
+	.only-mobile {
+		display: unset !important;
+	}
+
 	.header > .item {
 		padding: 5px;
 	}
@@ -2076,6 +2083,23 @@ input:checked + .slide-container .properties {
 		margin: 2px 0;
 	}
 
+	.dropdown .dropdown-menu .item .stick .btn {
+		margin: 0;
+	}
+
+	.dropdown .dropdown-menu .item form {
+		display: block;
+		text-align: center;
+	}
+
+	.dropdown .dropdown-menu .item .stick.search {
+		width: calc(100% - 20px);
+	}
+
+	.dropdown .dropdown-menu .item .stick.search input {
+		width: 95%;
+	}
+
 	.dropdown .dropdown-menu .item button.as-link,
 	.dropdown .dropdown-menu .item button.as-link:hover, button.as-link:active {
 		width: 100%;
@@ -2138,7 +2162,6 @@ input:checked + .slide-container .properties {
 	}
 
 	.nav_menu .toggle_aside,
-	.nav_menu .search,
 	#panel .close img {
 		display: inline-block;
 	}
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 610144fcb..6353f1a39 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -115,6 +115,10 @@ h3 {
 	display: none;
 }
 
+.only-mobile {
+	display: none !important;
+}
+
 /*=== Paragraphs */
 p {
 	margin: 1rem 0 0.5rem;
@@ -443,7 +447,7 @@ td.numeric {
 	flex-shrink: 0;
 }
 
-.stick form {
+#nav_menu_read_all form {
 	display: inline-flex;
 }
 
@@ -1933,7 +1937,6 @@ input:checked + .slide-container .properties {
 }
 
 .nav-login,
-.nav_menu .search,
 .aside .toggle_aside,
 #slider .toggle_aside,
 .nav_menu .toggle_aside,
@@ -2008,6 +2011,10 @@ input:checked + .slide-container .properties {
 		display: none;
 	}
 
+	.only-mobile {
+		display: unset !important;
+	}
+
 	.header > .item {
 		padding: 5px;
 	}
@@ -2076,6 +2083,23 @@ input:checked + .slide-container .properties {
 		margin: 2px 0;
 	}
 
+	.dropdown .dropdown-menu .item .stick .btn {
+		margin: 0;
+	}
+
+	.dropdown .dropdown-menu .item form {
+		display: block;
+		text-align: center;
+	}
+
+	.dropdown .dropdown-menu .item .stick.search {
+		width: calc(100% - 20px);
+	}
+
+	.dropdown .dropdown-menu .item .stick.search input {
+		width: 95%;
+	}
+
 	.dropdown .dropdown-menu .item button.as-link,
 	.dropdown .dropdown-menu .item button.as-link:hover, button.as-link:active {
 		width: 100%;
@@ -2138,7 +2162,6 @@ input:checked + .slide-container .properties {
 	}
 
 	.nav_menu .toggle_aside,
-	.nav_menu .search,
 	#panel .close img {
 		display: inline-block;
 	}