New navbar

mobile still wip

inc/navbar.php

@@ -1,19 +1,21 @@
 <?php
 function navbar($depth, $active = NULL) {
-	$result = "<ul>\n";
+	$result = '<img class="logo" src="' . rtrim(str_repeat('../', $depth)) . "/css/logo-disk-white.png\"/>\n";
+	$result .= "\t\t<ul>\n";
 	$menuItems = [
-		'hjem' => '',
+		'Hjem' => '',
-		'kalender' => 'kalender',
+		'Kalender' => 'kalender',
-		'aktiviteter' => 'aktiviteter',
+		'Aktiviteter' => 'aktiviteter',
-		'prosjekter' => 'prosjekt',
+		'Prosjekter' => 'prosjekt',
-		'kontakt' => 'kontakt',
+		'Kontakt' => 'kontakt',
-		'wiki' => 'pvv'
+		'Wiki' => 'pvv'
 	];
 	foreach($menuItems as $caption => $link) {
 		$result .= "\t\t\t<a href=\"" . rtrim(str_repeat('../', $depth) . $link, '/') . "/\"" . ($active === $link ? ' class="active"' : '') . ">"
 			. "<li>" . $caption . "</li></a>\n"
 			;
 	}
+	$result .= "\t\t\t" . '<a href="javascript:void(0);" style="font-size:15px;" id="navopen" onclick="navbar()">&#9776;</a>' . "\n";
 	return $result . "\t\t</ul>\n";
 }
 
@@ -25,9 +27,9 @@ function loginBar($sp = 'default-sp') {
 	$attr = $as->getAttributes();
 	if($attr) {
 		$uname = $attr['uid'][0];
-		$result .= "\t\t<p class=\"login\">logget inn som: " . htmlspecialchars($uname) . "</p>\n";
+		$result .= "\t\t<p class=\"login\">Logget inn som: " . htmlspecialchars($uname) . "</p>\n";
 	} else {
-		$result .= "\t\t<a class=\"login\" href=\"" . htmlspecialchars($as->getLoginURL()) . "\">logg inn</a>\n";
+		$result .= "\t\t<a class=\"login\" href=\"" . htmlspecialchars($as->getLoginURL()) . "\">Logg inn</a>\n";
 	}
 
 	return $result;

www/css/style.css

@@ -15,8 +15,6 @@ nav {
 	height: 50px;
 	background-color: #002244;
 	overflow: hidden;
-
-	box-shadow: 0 0 5px #000;
 }
 
 nav * {
@@ -37,33 +35,37 @@ nav h2 {
 	color: #002244;
 }
 
-nav img{
+nav .logo{
-	width: 50px;
+	position: fixed;
-	height: 50px;
+	top: 6px;
+	left: 6px;
+	width: 38px;
+	height: 38px;
 }
 
 nav ul {
-	display: table;
-	table-layout: fixed;
 	position: fixed;
 	top: 0;
-	left: 15vw;
+	left: 50px;
-	right: 15vw;
+	width: 100vw;
-	width: 70vw;
+	height: 45px;
-	height: 50px;
 
 	list-style: none;
 }
 
+nav li {
+	height: 45px;
+	line-height: 55px;
+}
+
 nav a {
-	display: table-cell;
+	display: inline-block;
 	height: 100%;
-	margin: 0;
+	margin: 0 .7em;
 
 	text-decoration: none;
 	font-size: 1.2em;
 	text-align: center;
-	line-height: 48px;
 
 	border-bottom: 2px solid rgba(255, 255, 255, 0);
 
@@ -86,8 +88,12 @@ nav .login {
 	position: fixed;
 	top: 0;
 	right: 0;
-	height: 48px;
+	height: 45px;
-	padding: 0 1em;
+	line-height: 55px;
+}
+
+#navopen {
+	display: none;
 }
 
 main {
@@ -117,3 +123,80 @@ main h2 {
 
 	transition: background-color .2s ease;
 }
+
+@media(max-width: 800px){
+	nav .logo {
+		visibility: hidden;
+	}
+
+	nav .login {
+		display: none;
+	}
+
+	nav ul {
+		left: 0px;
+		height: 50px;
+	}
+
+	nav a {
+		display: none;
+		border-bottom: none;
+		text-align: left;
+		margin: 0;
+	}
+
+	nav a:hover {
+		border-bottom: none;
+	}
+
+	nav a.active {
+		display: block;
+		height: 50px;
+		line-height: 50px;
+		padding: 0 .5em;
+		border-bottom: none;
+	}
+
+	#navopen {
+		display: block;
+		position: fixed;
+		top: 0;
+		right: 0;
+		line-height: 50px;
+		text-align: center;
+		width: 50px;
+		height: 50px;
+		margin: 0;
+		padding: 0;
+		background-color: #002244;
+	}
+
+	.opennav a {
+		display: block;
+		text-align: left;
+		margin: 0;
+		padding: 0 .5em;
+	}
+
+	.opennav a:hover {
+		background-color: #00407F;
+	}
+
+	.opennav a:hover li {
+		background-color: #00407F;
+	}
+
+	.opennav a.active:hover {
+		background-color: #002244;
+	}
+
+	.opennav a.active:hover li {
+		background-color: #002244;
+	}
+
+	.opennav .login {
+		position: relative;
+		display: block;
+		border-top: 1px solid gray;
+	}
+}

www/index.php

@@ -25,10 +25,21 @@ $agenda = new \pvv\side\Agenda([
 	<link rel="stylesheet" href="css/style.css">
 	<link rel="stylesheet" href="css/splash.css">
 	<link rel="stylesheet" href="css/landing.css">
+
+	<script>
+	function navbar() {
+		var x = document.getElementById("navbar");
+		if (x.className === "opennav") {
+			x.className = "";
+		} else {
+			x.className = "opennav";
+		}
+	}
+	</script>
 </head>
 
 <body>
-	<nav>
+	<nav id="navbar" class="">
 		<?php echo navbar(0, ''); ?>
 		<?php echo loginbar(); ?>
 	</nav>