From e7f11aee5477042c614302ab939e053ec2264321 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rn=20A=CC=8Ane?= <yorinad@pvv.ntnu.no>
Date: Tue, 13 Feb 2018 16:46:01 +0100
Subject: [PATCH] Improve login/logout buttons

---
 inc/navbar.php    | 19 +++++++++++++++----
 www/css/style.css | 26 +++++++++++++++++++++++++-
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/inc/navbar.php b/inc/navbar.php
index c7486b6..b4a3ea5 100644
--- a/inc/navbar.php
+++ b/inc/navbar.php
@@ -29,20 +29,31 @@ function loginBar($sp = 'default-sp') {
 	require_once(__DIR__ . '/../vendor/simplesamlphp/simplesamlphp/lib/_autoload.php');
 	$as = new SimpleSAML_Auth_Simple($sp);
 
-	$svg = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64">
+	$svgWhite = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64">
 	<circle cx="32" cy="27" r="14" stroke-width="0" fill="white" />
 	<ellipse cx="32" cy="66" rx="24" ry="28" stroke-width="0" fill="white" />
 </svg>
+';
+	$svgBlue = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64">
+	<circle cx="32" cy="27" r="14" stroke-width="0" fill="#024" />
+	<ellipse cx="32" cy="66" rx="24" ry="28" stroke-width="0" fill="#024" />
+</svg>
 ';
 
 	$attr = $as->getAttributes();
 	if($attr) {
 		$uname = $attr['uid'][0];
-		$result .= "\t<p id=\"login\">logget inn som: " . htmlspecialchars($uname) . "</p>\n";
+		$result .= "\t<a id=\"login\" href=\"#usermenu\" aria-hidden=\"true\">${svgWhite}" . htmlspecialchars($uname) . "</a>\n";
 	} else {
-		$result .= "\t<a id=\"login\" href=\"" . htmlspecialchars($as->getLoginURL()) . "\">${svg}Logg inn</a>\n";
+		$result .= "\t<a id=\"login\" href=\"" . htmlspecialchars($as->getLoginURL()) . "\">${svgWhite}Logg inn</a>\n";
 	}
-	$result .= "\t<a href=\"#menu\" id=\"menu_toggle\"><big>&#9776;&nbsp;</big>MENU</a>\n";
+
+	$result .= "\n\t<ul id=\"usermenu\">\n";
+	$result .= "\n\t\t<li><a id=\"login\" href=\"#\">${svgBlue}" . htmlspecialchars($uname) . "</a></li>\n";
+	$result .= "\n\t\t<li><a href=\"" . htmlspecialchars($as->getLogoutURL()) . "\">Logg ut</a></li>\n";
+	$result .= "\n\t</ul>\n";
+
+	$result .= "\n\t<a href=\"#menu\" id=\"menu_toggle\" aria-hidden=\"true\"><big>&#9776;&nbsp;</big>MENU</a>\n";
 
 	return $result;
 }
diff --git a/www/css/style.css b/www/css/style.css
index c1f2f51..a6b1a0d 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -43,7 +43,7 @@ nav #login {
 	margin: 0;
 }
 
-nav ul {
+nav #menu {
 	margin: .1em auto 0 auto;
 	text-align: center;
 	margin: 0;
@@ -71,6 +71,30 @@ nav a {
 nav li.active, nav li:hover {
 	border-bottom: 2px solid white;
 }
+nav #usermenu {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 0;
+	margin: 0;
+	background: #fff;
+	padding: 0;
+}
+nav #usermenu li:first-child, nav #usermenu li:first-child a {
+	line-height: 3em;
+	height: 3em;
+	margin: 0;
+}
+nav #usermenu li, nav #usermenu li a {
+	line-height: 2em;
+	height: 2em;
+	color: #024;
+	border: none;
+	display: block;
+}
+nav #usermenu:target {
+	display: block;
+}
 
 @media(max-width: 800px){
 	nav #menu, nav #menu li.active, nav #menu_toggle, nav #login {