Added logout button on profile menu

public/css/custom.css

@@ -42,7 +42,7 @@ a.btn-img .img {
   position: relative;
   top: -2px;
 }
-@media (max-width: 370px) {
+@media (max-width: 400px) {
   a.btn-img .img { margin: 0px !important; }
   a.btn-img .text { display: none !important; }
 }

public/img/sv-logout.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#7e7e7e" d="M16,17V14H9V10H16V7L21,12L16,17M14,2A2,2 0 0,1 16,4V6H14V4H5V20H14V18H16V20A2,2 0 0,1 14,22H5A2,2 0 0,1 3,20V4A2,2 0 0,1 5,2H14Z" />
+</svg>

src/views/web/modal.php

@@ -12,9 +12,14 @@
   margin: auto;
   background: #fff;
   border-radius: 2px;
-  padding: 1em;
+  padding: 2em;
   height: max-content;
 }
+@media (max-width: 350px) {
+  #modals > div {
+    padding: 2em 1em !important;
+  }
+}
 </style>
 
 <div id="modals" onclick="MODAL.hide(this)"
@@ -45,6 +50,20 @@
 				<div class="img"><img src="/img/sv-account-circle.svg"/></div>
 				<span class="text"><?php l('modals.profile', 'Profile') ?></span>
 			</a>
+			<a class="btn-img" href="javascript:MODAL.show('logout')">
+				<div class="img" style="margin:0">
+					<img src="/img/sv-logout.svg"/></div>
+			</a>
+		</div>
+	</div>
+	<div id="logout">
+		<p><?php l('modals.logout_confirm', 'Are you sure you want to end your current session?') ?></p>
+		<div style="display:flex">
+			<a class="button button-primary u-full-width" href="javascript:MODAL.hide()">
+				<?php l('modals.cancel', 'Cancel') ?></a>
+			<div style="width:1em"></div>
+			<a class="button u-full-width" href="/logout/">
+				<?php l('modals.yes', 'Yes') ?></a>
 		</div>
 	</div>
 
@@ -67,7 +86,7 @@ const MODAL = {
 				anchors[i].setAttribute('onclick', 'event.stopPropagation();');
 		}
 	},
-	hide: function(el) {
+	hide: function() {
 		document.querySelector('#modals').style = 'display:none';
 		document.querySelector('#modals').className = '';
 	}