Improve: Aside slider: close slider when click on the outside of slider (#4061)

* CSS + PHTML

* give some grey background

* fixed whitespace

* fixed RTL

* close area just for mobile view

app/layout/aside_configure.phtml

@@ -1,5 +1,6 @@
 <nav class="nav nav-list aside" id="aside_feed">
 	<a class="toggle_aside" href="#close"><?= _i('close') ?></a>
+	
 	<ul>
 		<li class="nav-header"><?= _t('gen.menu.account') ?>: <?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8')?></li>	
 		<li class="item<?= Minz_Request::controllerName() === 'user' && Minz_Request::actionName() === 'profile' ? ' active' : '' ?>">
@@ -61,6 +62,7 @@
 		</li>
 	</ul>
 </nav>
+<a class="close-aside" href="#close">❌</a>
 <nav class="nav_menu nav_mobile">
 	<a class="btn toggle_aside" href="#aside_feed"><?= _i('category') ?></a>
 </nav>

app/layout/aside_feed.phtml

@@ -14,7 +14,7 @@
 		$state_filter_cat = '&state=' . $state_filter_cat;
 	}
 ?>
-<nav class="aside aside_feed<?= $class ?>" id="aside_feed">
+<nav class="nav aside aside_feed<?= $class ?>" id="aside_feed">
 	<a class="toggle_aside" href="#close"><?= _i('close') ?></a>
 
 	<?php if (FreshRSS_Auth::hasAccess()) { ?>
@@ -116,6 +116,7 @@
 	</ul>
 	</form>
 </nav>
+<a class="close-aside" href="#close">❌</a>
 
 <div id="first_load" class="loading"></div>
 <?php flush(); ?>

app/layout/aside_subscription.phtml

@@ -35,6 +35,7 @@
 
 	</ul>
 </nav>
+<a class="close-aside" href="#close">❌</a>
 <nav class="nav_menu nav_mobile">
 	<a class="btn toggle_aside" href="#aside_feed"><?= _i('category') ?></a>
 </nav>

p/themes/base-theme/template.css

@@ -664,6 +664,10 @@ input[type="search"] {
 	vertical-align: top;
 }
 
+.aside + .close-aside {
+	display: none;
+}
+
 /*=== Aside main page */
 .aside_feed .category .title {
 	width: calc(100% - 35px);
@@ -1431,6 +1435,19 @@ input:checked + .slide-container .properties {
 		display: inline-block;
 	}
 
+	.aside:target + .close-aside {
+		background: rgba(0, 0, 0, 0.2);
+		display: block;
+		font-size: 0;
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		cursor: pointer;
+		z-index: 99;
+	}
+
 	.nav_mobile {
 		display: block;
 	}

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

@@ -664,6 +664,10 @@ input[type="search"] {
 	vertical-align: top;
 }
 
+.aside + .close-aside {
+	display: none;
+}
+
 /*=== Aside main page */
 .aside_feed .category .title {
 	width: calc(100% - 35px);
@@ -1431,6 +1435,19 @@ input:checked + .slide-container .properties {
 		display: inline-block;
 	}
 
+	.aside:target + .close-aside {
+		background: rgba(0, 0, 0, 0.2);
+		display: block;
+		font-size: 0;
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		cursor: pointer;
+		z-index: 99;
+	}
+
 	.nav_mobile {
 		display: block;
 	}