Improve mobile view: access to the config menu (#3881)

* wip

* improve the header

* Fix theme "Adark"

* fixed theme: Ansum

* Fixed theme: BlueLagoon

* fixed Ansum after PR comment of Frenzie

* Fixed theme: Dark

* fixed theme: Flat

* fixed theme: Mapco

* fixed theme: Origine compact

* fixed theme: Pafat

* fixed theme: Screwdriver

* fixed theme: Swage

* hide the close button in wide view

* fixed base/template RTL

* fixed SCSS of theme Swage

* stylelint fix

* fixed theme Swage

* make fix-all

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

app/layout/header.phtml

@@ -1,17 +1,3 @@
-<?php
-
-if (FreshRSS_Auth::accessNeedsAction()) {
-	?><ul class="nav nav-head nav-login"><?php
-		if (FreshRSS_Auth::hasAccess()) {
-			?><li class="item"><?= _i('logout') ?> <a class="signout" href="<?= _url('auth', 'logout') ?>"><?php
-				echo _t('gen.auth.logout') . ' (' . htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8') . ')'; ?></a></li><?php
-		} else {
-			?><li class="item"><?= _i('login') ?> <a class="signin" href="<?= _url('auth', 'login') ?>"><?= _t('gen.auth.login') ?></a></li><?php
-		}
-	?></ul><?php
-}
-?>
-
 <header class="header">
 	<div class="item title">
 		<a href="<?= _url('index', 'index') ?>">
@@ -52,7 +38,8 @@ if (FreshRSS_Auth::accessNeedsAction()) {
 		<div class="dropdown">
 			<div id="dropdown-configure" class="dropdown-target"></div>
 			<a class="btn dropdown-toggle" href="#dropdown-configure"><?= _i('configure') ?></a>
-			<ul class="dropdown-menu">
+			<ul class="dropdown-menu scrollbar-thin">
+				<li class="dropdown-header-close"><a class="toggle_aside" href="#close"><?= _i('close') ?></a></li>
 				<li class="dropdown-close"><a href="#close">❌</a></li>
 				<li class="dropdown-header"><?= _t('gen.menu.account') ?>: <?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8') ?></li>
 				<li class="item"><a href="<?= _url('user', 'profile') ?>"><?= _t('gen.menu.user_profile') ?></a></li>

p/themes/Alternative-Dark/adark.css

@@ -1105,7 +1105,8 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #262626;
 		display: block;
 		width: 100%;

p/themes/Alternative-Dark/adark.rtl.css

@@ -1105,7 +1105,8 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #262626;
 		display: block;
 		width: 100%;

p/themes/Ansum/_mobile.scss

@@ -56,7 +56,8 @@
 
 	.aside .toggle_aside,
 	#panel .close,
-	#close-slider.active {
+	#close-slider.active,
+	.dropdown-menu .toggle_aside {
 		background: $main-first-alt;
 		display: block;
 		width: 100%;
@@ -69,13 +70,13 @@
 		padding: 0.5rem;
 
 		.item {
-			&.title {
-				display: none;
-			}
-
 			&.search {
 				display: block;
 
+				form {
+					display: inherit;
+				}
+
 				.stick {
 					display: flex;
 				}
@@ -95,10 +96,6 @@
 					padding: 0.5rem 2rem;
 				}
 			}
-
-			&.configure {
-				display: none;
-			}
 		}
 	}
 

p/themes/Ansum/ansum.css

@@ -1480,8 +1480,9 @@ form th {
 	}
 
 	.aside .toggle_aside,
-#panel .close,
-#close-slider.active {
+	#panel .close,
+	#close-slider.active,
+	.dropdown-menu .toggle_aside {
 		background: #b7641d;
 		display: block;
 		width: 100%;
@@ -1493,8 +1494,8 @@ form th {
 	.header {
 		padding: 0.5rem;
 	}
-	.header .item.title {
-		display: none;
+	.header .item.search form {
+		display: inherit;
 	}
 	.header .item.search {
 		display: block;
@@ -1513,9 +1514,6 @@ form th {
 		min-height: 49px;
 		padding: 0.5rem 2rem;
 	}
-	.header .item.configure {
-		display: none;
-	}
 
 	.post {
 		padding-left: 1rem;

p/themes/Ansum/ansum.rtl.css

@@ -1480,8 +1480,9 @@ form th {
 	}
 
 	.aside .toggle_aside,
-#panel .close,
-#close-slider.active {
+	#panel .close,
+	#close-slider.active,
+	.dropdown-menu .toggle_aside {
 		background: #b7641d;
 		display: block;
 		width: 100%;
@@ -1493,8 +1494,8 @@ form th {
 	.header {
 		padding: 0.5rem;
 	}
-	.header .item.title {
-		display: none;
+	.header .item.search form {
+		display: inherit;
 	}
 	.header .item.search {
 		display: block;
@@ -1513,9 +1514,6 @@ form th {
 		min-height: 49px;
 		padding: 0.5rem 2rem;
 	}
-	.header .item.configure {
-		display: none;
-	}
 
 	.post {
 		padding-right: 1rem;

p/themes/BlueLagoon/BlueLagoon.css

@@ -1262,6 +1262,10 @@ a.btn {
 		display: table;
 	}
 
+	.header > .item.title .logo {
+		height: 24px;
+	}
+
 	.nav-login {
 		display: none;
 	}
@@ -1278,7 +1282,8 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #171717;
 		display: block;
 		width: 100%;
@@ -1355,15 +1360,6 @@ a.btn {
 }
 
 @media (max-width: 700px) {
-	.header {
-		display: none;
-	}
-
-	.nav-login {
-		display: inline-block;
-		width: 100%;
-	}
-
 	.nav_menu .search {
 		display: inline-block;
 	}

p/themes/BlueLagoon/BlueLagoon.rtl.css

@@ -1262,6 +1262,10 @@ a.btn {
 		display: table;
 	}
 
+	.header > .item.title .logo {
+		height: 24px;
+	}
+
 	.nav-login {
 		display: none;
 	}
@@ -1278,7 +1282,8 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #171717;
 		display: block;
 		width: 100%;
@@ -1355,15 +1360,6 @@ a.btn {
 }
 
 @media (max-width: 700px) {
-	.header {
-		display: none;
-	}
-
-	.nav-login {
-		display: inline-block;
-		width: 100%;
-	}
-
 	.nav_menu .search {
 		display: inline-block;
 	}

p/themes/Dark/dark.css

@@ -583,10 +583,6 @@ a.btn {
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
-.header {
-	height: 85px;
-}
-
 .header > .item {
 	padding: 10px;
 	vertical-align: middle;
@@ -599,7 +595,6 @@ a.btn {
 }
 
 .header > .item.title .logo {
-	margin: 0.5em 0;
 	filter: grayscale(60%) brightness(1.1);
 }
 
@@ -1136,7 +1131,8 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #111;
 		display: block;
 		width: 100%;

p/themes/Dark/dark.rtl.css

@@ -583,10 +583,6 @@ a.btn {
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
-.header {
-	height: 85px;
-}
-
 .header > .item {
 	padding: 10px;
 	vertical-align: middle;
@@ -599,7 +595,6 @@ a.btn {
 }
 
 .header > .item.title .logo {
-	margin: 0.5em 0;
 	filter: grayscale(60%) brightness(1.1);
 }
 
@@ -1136,7 +1131,8 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #111;
 		display: block;
 		width: 100%;

p/themes/Flat/flat.css

@@ -584,7 +584,6 @@ a.btn {
 /*=== Header */
 .header {
 	background: #ecf0f1;
-	height: 85px;
 }
 
 .header > .item {
@@ -1123,7 +1122,8 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #2c3e50;
 		display: block;
 		width: 100%;

p/themes/Flat/flat.rtl.css

@@ -584,7 +584,6 @@ a.btn {
 /*=== Header */
 .header {
 	background: #ecf0f1;
-	height: 85px;
 }
 
 .header > .item {
@@ -1123,7 +1122,8 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #2c3e50;
 		display: block;
 		width: 100%;

p/themes/Mapco/_mobile.scss

@@ -55,7 +55,8 @@
 
 	.aside .toggle_aside,
 	#panel .close,
-	#close-slider.active {
+	#close-slider.active,
+	.dropdown-menu .toggle_aside {
 		background: $main-first-alt;
 		display: block;
 		width: 100%;
@@ -68,13 +69,13 @@
 		padding: 0.5rem;
 
 		.item {
-			&.title {
-				display: none;
-			}
-
 			&.search {
 				display: block;
 
+				form {
+					display: inherit;
+				}
+
 				.stick {
 					display: flex;
 				}
@@ -95,9 +96,6 @@
 				}
 			}
 
-			&.configure {
-				display: none;
-			}
 		}
 	}
 

p/themes/Mapco/mapco.css

@@ -1492,8 +1492,9 @@ form th {
 	}
 
 	.aside .toggle_aside,
-#panel .close,
-#close-slider.active {
+	#panel .close,
+	#close-slider.active,
+	.dropdown-menu .toggle_aside {
 		background: #25c;
 		display: block;
 		width: 100%;
@@ -1505,12 +1506,12 @@ form th {
 	.header {
 		padding: 0.5rem;
 	}
-	.header .item.title {
-		display: none;
-	}
 	.header .item.search {
 		display: block;
 	}
+	.header .item.search form {
+		display: inherit;
+	}
 	.header .item.search .stick {
 		display: flex;
 	}
@@ -1525,9 +1526,6 @@ form th {
 		min-height: 49px;
 		padding: 0.5rem 2rem;
 	}
-	.header .item.configure {
-		display: none;
-	}
 
 	.post {
 		padding-left: 1rem;

p/themes/Mapco/mapco.rtl.css

@@ -1492,8 +1492,9 @@ form th {
 	}
 
 	.aside .toggle_aside,
-#panel .close,
-#close-slider.active {
+	#panel .close,
+	#close-slider.active,
+	.dropdown-menu .toggle_aside {
 		background: #25c;
 		display: block;
 		width: 100%;
@@ -1505,12 +1506,12 @@ form th {
 	.header {
 		padding: 0.5rem;
 	}
-	.header .item.title {
-		display: none;
-	}
 	.header .item.search {
 		display: block;
 	}
+	.header .item.search form {
+		display: inherit;
+	}
 	.header .item.search .stick {
 		display: flex;
 	}
@@ -1525,9 +1526,6 @@ form th {
 		min-height: 49px;
 		padding: 0.5rem 2rem;
 	}
-	.header .item.configure {
-		display: none;
-	}
 
 	.post {
 		padding-right: 1rem;

p/themes/Origine-compact/origine-compact.css

@@ -1208,7 +1208,8 @@ a.btn,
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #f6f6f6;
 		display: block;
 		width: 100%;

p/themes/Origine-compact/origine-compact.rtl.css

@@ -1208,7 +1208,8 @@ a.btn,
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #f6f6f6;
 		display: block;
 		width: 100%;

p/themes/Origine/origine.css

@@ -590,7 +590,6 @@ a.btn {
 /*=== Header */
 .header {
 	background: #f4f4f4;
-	height: 85px;
 }
 
 .header > .item {
@@ -604,10 +603,6 @@ a.btn {
 	width: 230px;
 }
 
-.header > .item.title .logo {
-	margin: 0.5em 0;
-}
-
 .header > .item.search input {
 	width: 230px;
 }
@@ -1148,7 +1143,8 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #f6f6f6;
 		display: block;
 		width: 100%;

p/themes/Origine/origine.rtl.css

@@ -590,7 +590,6 @@ a.btn {
 /*=== Header */
 .header {
 	background: #f4f4f4;
-	height: 85px;
 }
 
 .header > .item {
@@ -604,10 +603,6 @@ a.btn {
 	width: 230px;
 }
 
-.header > .item.title .logo {
-	margin: 0.5em 0;
-}
-
 .header > .item.search input {
 	width: 230px;
 }
@@ -1148,7 +1143,8 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #f6f6f6;
 		display: block;
 		width: 100%;

p/themes/Pafat/pafat.css

@@ -553,7 +553,6 @@ a.btn {
 /*=== Header */
 .header {
 	background: #41444f;
-	height: 85px;
 }
 
 .header > .item {
@@ -1134,7 +1133,8 @@ a.signin {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #f6f6f6;
 		display: block;
 		width: 100%;

p/themes/Pafat/pafat.rtl.css

@@ -553,7 +553,6 @@ a.btn {
 /*=== Header */
 .header {
 	background: #41444f;
-	height: 85px;
 }
 
 .header > .item {
@@ -1134,7 +1133,8 @@ a.signin {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #f6f6f6;
 		display: block;
 		width: 100%;

p/themes/Screwdriver/screwdriver.css

@@ -1263,7 +1263,8 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #171717;
 		display: block;
 		width: 100%;
@@ -1344,10 +1345,6 @@ a.btn {
 }
 
 @media (max-width: 700px) {
-	.header {
-		display: none;
-	}
-
 	.nav-login {
 		display: inline-block;
 		width: 100%;

p/themes/Screwdriver/screwdriver.rtl.css

@@ -1263,7 +1263,8 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: #171717;
 		display: block;
 		width: 100%;
@@ -1344,10 +1345,6 @@ a.btn {
 }
 
 @media (max-width: 700px) {
-	.header {
-		display: none;
-	}
-
 	.nav-login {
 		display: inline-block;
 		width: 100%;

p/themes/Swage/swage.css

@@ -179,6 +179,7 @@ form th {
 .form-group .group-controls .control {
 	line-height: 2em;
 }
+
 .stick {
 	vertical-align: middle;
 	font-size: 0;
@@ -469,6 +470,7 @@ form th {
 	max-height: 260px;
 }
 .box .box-content .item {
+	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
@@ -586,7 +588,7 @@ form th {
 }
 .header .item.configure {
 	position: fixed;
-	right: 0px;
+	right: 0;
 	z-index: 1000;
 	width: 35px;
 }
@@ -921,6 +923,11 @@ form th {
 	.header .item.title .logo {
 		display: none;
 	}
+	.header .item.configure {
+		padding: 0;
+		position: absolute;
+		right: 77px;
+	}
 
 	.header > .item.title a {
 		display: block;
@@ -929,8 +936,7 @@ form th {
 		left: 10px;
 	}
 
-	.header .item.configure,
-button.read_all.btn {
+	button.read_all.btn {
 		display: none;
 	}
 
@@ -971,18 +977,21 @@ button.read_all.btn {
 		height: 71px;
 	}
 	.nav_menu .btn {
-		margin: 5px 10px;
+		margin: 0;
 	}
 	.nav_menu .stick {
-		margin: 0 10px;
+		margin: 0;
 	}
 	.nav_menu .stick .btn {
-		margin: 5px 0;
+		margin: 0;
 	}
 	.nav_menu .search {
 		position: absolute !important;
-		top: 35px;
-		left: 55px;
+		top: 3px;
+		left: 37px;
+	}
+	.nav_menu .search form {
+		display: block;
 	}
 	.nav_menu .search input {
 		width: 85%;
@@ -992,7 +1001,8 @@ button.read_all.btn {
 		margin: 0 0 3.5em;
 	}
 
-	#panel .close {
+	#panel .close,
+.dropdown-menu .toggle_aside {
 		background: #22303d;
 		display: block;
 		height: 50px;
@@ -1035,7 +1045,7 @@ button.read_all.btn {
 
 	a.btn.toggle_aside {
 		position: absolute;
-		top: 29px;
+		top: 0;
 	}
 
 	form#mark-read-menu,
@@ -1047,24 +1057,23 @@ div#nav_menu_views {
 	}
 
 	form#mark-read-menu {
-		right: 46px;
-		top: 30px;
-		z-index: 1100;
+		right: 38px;
+		top: 0;
 	}
 
 	a#actualize,
 a#toggle-order {
-		right: 0px;
+		right: 0;
 	}
 
 	a#actualize {
-		top: 29px;
+		top: 0;
 	}
 
 	a#toggle-order,
 div#nav_menu_actions,
 div#nav_menu_views {
-		top: 65px;
+		top: 36px;
 	}
 
 	div#nav_menu_actions {
@@ -1152,6 +1161,4 @@ button.as-link {
 }
 #slider .form-group:hover {
 	background: inital;
-}
-
-/*# sourceMappingURL=swage.css.map */
+}

p/themes/Swage/swage.rtl.css

@@ -179,6 +179,7 @@ form th {
 .form-group .group-controls .control {
 	line-height: 2em;
 }
+
 .stick {
 	vertical-align: middle;
 	font-size: 0;
@@ -469,6 +470,7 @@ form th {
 	max-height: 260px;
 }
 .box .box-content .item {
+	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
@@ -586,7 +588,7 @@ form th {
 }
 .header .item.configure {
 	position: fixed;
-	left: 0px;
+	left: 0;
 	z-index: 1000;
 	width: 35px;
 }
@@ -921,6 +923,11 @@ form th {
 	.header .item.title .logo {
 		display: none;
 	}
+	.header .item.configure {
+		padding: 0;
+		position: absolute;
+		left: 77px;
+	}
 
 	.header > .item.title a {
 		display: block;
@@ -929,8 +936,7 @@ form th {
 		right: 10px;
 	}
 
-	.header .item.configure,
-button.read_all.btn {
+	button.read_all.btn {
 		display: none;
 	}
 
@@ -971,18 +977,21 @@ button.read_all.btn {
 		height: 71px;
 	}
 	.nav_menu .btn {
-		margin: 5px 10px;
+		margin: 0;
 	}
 	.nav_menu .stick {
-		margin: 0 10px;
+		margin: 0;
 	}
 	.nav_menu .stick .btn {
-		margin: 5px 0;
+		margin: 0;
 	}
 	.nav_menu .search {
 		position: absolute !important;
-		top: 35px;
-		right: 55px;
+		top: 3px;
+		right: 37px;
+	}
+	.nav_menu .search form {
+		display: block;
 	}
 	.nav_menu .search input {
 		width: 85%;
@@ -992,7 +1001,8 @@ button.read_all.btn {
 		margin: 0 0 3.5em;
 	}
 
-	#panel .close {
+	#panel .close,
+.dropdown-menu .toggle_aside {
 		background: #22303d;
 		display: block;
 		height: 50px;
@@ -1035,7 +1045,7 @@ button.read_all.btn {
 
 	a.btn.toggle_aside {
 		position: absolute;
-		top: 29px;
+		top: 0;
 	}
 
 	form#mark-read-menu,
@@ -1047,24 +1057,23 @@ div#nav_menu_views {
 	}
 
 	form#mark-read-menu {
-		left: 46px;
-		top: 30px;
-		z-index: 1100;
+		left: 38px;
+		top: 0;
 	}
 
 	a#actualize,
 a#toggle-order {
-		left: 0px;
+		left: 0;
 	}
 
 	a#actualize {
-		top: 29px;
+		top: 0;
 	}
 
 	a#toggle-order,
 div#nav_menu_actions,
 div#nav_menu_views {
-		top: 65px;
+		top: 36px;
 	}
 
 	div#nav_menu_actions {
@@ -1152,4 +1161,4 @@ button.as-link {
 }
 #slider .form-group:hover {
 	background: inital;
-}
+}

p/themes/Swage/swage.scss

@@ -576,13 +576,15 @@ form {
 		background: darken( $color_light, 10%);
 		color: darken( $color_light, 40% );
 		border-bottom: 1px solid darken( $color_light, 10%);
-	}
 
-	.configure {
-		margin-right: 4px;
+		.configure {
+			margin-right: 4px;
+		}
 	}
 
 
+
+
 	.box-content {
 		padding-left: 30px;
 		max-height: 260px;
@@ -735,7 +737,7 @@ form {
 
 	.item.configure {
 		position: fixed;
-		right: 0px;
+		right: 0;
 		z-index: 1000;
 		width: 35px;
 	}
@@ -927,9 +929,11 @@ form {
 		}
 	}
 
-	.date {
-		color: darken( $color_light, 40% );
-		font-size: 0.7rem;
+	.item {
+		&.date {
+			color: darken( $color_light, 40% );
+			font-size: 0.7rem;
+		}
 	}
 
 	.bottom {
@@ -1149,6 +1153,12 @@ form {
 		.item.title .logo {
 			display: none;
 		}
+
+		.item.configure {
+			padding: 0;
+			position: absolute;
+			right: 77px;
+		}
 	}
 
 	.header > .item.title a {
@@ -1158,7 +1168,6 @@ form {
 		left: 10px;
 	}
 
-	.header .item.configure,
 	button.read_all.btn {
 		display: none;
 	}
@@ -1204,21 +1213,25 @@ form {
 		height: 71px;
 
 		.btn {
-			margin: 5px 10px;
+			margin: 0;
 		}
 
 		.stick {
-			margin: 0 10px;
+			margin: 0;
 
 			.btn {
-				margin: 5px 0;
+				margin: 0;
 			}
 		}
 
 		.search {
 			position: absolute !important;
-			top: 35px;
-			left: 55px;
+			top: 3px;
+			left: 37px;
+
+			form {
+				display: block;
+			}
 
 			input {
 				width: 85%;
@@ -1230,7 +1243,8 @@ form {
 		margin: 0 0 3.5em;
 	}
 
-	#panel .close {
+	#panel .close,
+	.dropdown-menu .toggle_aside {
 		background: $color_aside;
 		display: block;
 		height: 50px;
@@ -1276,7 +1290,7 @@ form {
 
 	a.btn.toggle_aside {
 		position: absolute;
-		top: 29px;
+		top: 0;
 	}
 
 	form#mark-read-menu,
@@ -1288,24 +1302,23 @@ form {
 	}
 
 	form#mark-read-menu {
-		right: 46px;
-		top: 30px;
-		z-index: 1100;
+		right: 38px;
+		top: 0;
 	}
 
 	a#actualize,
 	a#toggle-order {
-		right: 0px;
+		right: 0;
 	}
 
 	a#actualize {
-		top: 29px;
+		top: 0;
 	}
 
 	a#toggle-order,
 	div#nav_menu_actions,
 	div#nav_menu_views {
-		top: 65px;
+		top: 36px;
 	}
 
 	div#nav_menu_actions {

p/themes/base-theme/template.css

@@ -525,30 +525,35 @@ a.btn {
 /*=== Scrollbar */
 
 @supports (scrollbar-width: thin) {
-	#sidebar {
+	#sidebar,
+	.scrollbar-thin {
 		overflow-y: auto;
 		scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05);
 		scrollbar-width: thin;
 	}
 
-	#sidebar:hover {
+	#sidebar:hover,
+	.scrollbar-thin {
 		scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05);
 	}
 }
 
 @supports not (scrollbar-width: thin) {
-	#sidebar::-webkit-scrollbar {
+	#sidebar::-webkit-scrollbar,
+	.scrollbar-thin {
 		background: rgba(0, 0, 0, 0.05);
 		width: 8px;
 	}
 
-	#sidebar::-webkit-scrollbar-thumb {
+	#sidebar::-webkit-scrollbar-thumb,
+	.scrollbar-thin::-webkit-scrollbar-thumb {
 		background: rgba(0, 0, 0, 0.1);
 		display: unset;
 		border-radius: 5px;
 	}
 
-	#sidebar:hover::-webkit-scrollbar-thumb {
+	#sidebar:hover::-webkit-scrollbar-thumb,
+	.scrollbar-thin::-webkit-scrollbar-thumb {
 		background: rgba(0, 0, 0, 0.3);
 	}
 }
@@ -1299,7 +1304,8 @@ input:checked + .slide-container .properties {
 .nav-login,
 .nav_menu .search,
 .aside .toggle_aside,
-.nav_menu .toggle_aside {
+.nav_menu .toggle_aside,
+.configure .dropdown-header-close {
 	display: none;
 }
 
@@ -1345,7 +1351,6 @@ input:checked + .slide-container .properties {
 /*===========*/
 
 @media (max-width: 840px) {
-	.header,
 	.flux_header .item.website span,
 	.item.date, .day .date,
 	.dropdown-menu > .no-mobile,
@@ -1353,6 +1358,19 @@ input:checked + .slide-container .properties {
 		display: none;
 	}
 
+	.header > .item {
+		padding: 5px;
+	}
+
+	.header > .item.title .logo {
+		height: 24px;
+	}
+
+
+	.item.search form {
+		display: none;
+	}
+
 	.form-group {
 		margin-bottom: 10px;
 	}
@@ -1372,11 +1390,30 @@ input:checked + .slide-container .properties {
 		position: fixed;
 	}
 
+	.configure .dropdown .dropdown-menu {
+		width: 90%;
+		height: 100vh;
+		overflow: auto;
+		box-shadow: -3px 0 3px #aaa;
+	}
+
+	.dropdown-target ~ .dropdown-menu {
+		width: 0;
+
+	}
+
+	.dropdown-target:target ~ .dropdown-menu {
+		display: table-cell;
+		z-index: 1000;
+
+	}
+
 	.dropdown-menu::after {
 		display: none;
 	}
 
 	.aside .toggle_aside,
+	.configure .dropdown-header-close,
 	.nav-login {
 		display: block;
 	}

p/themes/base-theme/template.rtl.css

@@ -525,30 +525,35 @@ a.btn {
 /*=== Scrollbar */
 
 @supports (scrollbar-width: thin) {
-	#sidebar {
+	#sidebar,
+	.scrollbar-thin {
 		overflow-y: auto;
 		scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05);
 		scrollbar-width: thin;
 	}
 
-	#sidebar:hover {
+	#sidebar:hover,
+	.scrollbar-thin {
 		scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05);
 	}
 }
 
 @supports not (scrollbar-width: thin) {
-	#sidebar::-webkit-scrollbar {
+	#sidebar::-webkit-scrollbar,
+	.scrollbar-thin {
 		background: rgba(0, 0, 0, 0.05);
 		width: 8px;
 	}
 
-	#sidebar::-webkit-scrollbar-thumb {
+	#sidebar::-webkit-scrollbar-thumb,
+	.scrollbar-thin::-webkit-scrollbar-thumb {
 		background: rgba(0, 0, 0, 0.1);
 		display: unset;
 		border-radius: 5px;
 	}
 
-	#sidebar:hover::-webkit-scrollbar-thumb {
+	#sidebar:hover::-webkit-scrollbar-thumb,
+	.scrollbar-thin::-webkit-scrollbar-thumb {
 		background: rgba(0, 0, 0, 0.3);
 	}
 }
@@ -1299,7 +1304,8 @@ input:checked + .slide-container .properties {
 .nav-login,
 .nav_menu .search,
 .aside .toggle_aside,
-.nav_menu .toggle_aside {
+.nav_menu .toggle_aside,
+.configure .dropdown-header-close {
 	display: none;
 }
 
@@ -1345,7 +1351,6 @@ input:checked + .slide-container .properties {
 /*===========*/
 
 @media (max-width: 840px) {
-	.header,
 	.flux_header .item.website span,
 	.item.date, .day .date,
 	.dropdown-menu > .no-mobile,
@@ -1353,6 +1358,19 @@ input:checked + .slide-container .properties {
 		display: none;
 	}
 
+	.header > .item {
+		padding: 5px;
+	}
+
+	.header > .item.title .logo {
+		height: 24px;
+	}
+
+
+	.item.search form {
+		display: none;
+	}
+
 	.form-group {
 		margin-bottom: 10px;
 	}
@@ -1372,11 +1390,30 @@ input:checked + .slide-container .properties {
 		position: fixed;
 	}
 
+	.configure .dropdown .dropdown-menu {
+		width: 90%;
+		height: 100vh;
+		overflow: auto;
+		box-shadow: 3px 0 3px #aaa;
+	}
+
+	.dropdown-target ~ .dropdown-menu {
+		width: 0;
+
+	}
+
+	.dropdown-target:target ~ .dropdown-menu {
+		display: table-cell;
+		z-index: 1000;
+
+	}
+
 	.dropdown-menu::after {
 		display: none;
 	}
 
 	.aside .toggle_aside,
+	.configure .dropdown-header-close,
 	.nav-login {
 		display: block;
 	}