better navigation CSS

app/assets/dash_v1.css

@@ -25,69 +25,6 @@ a {
 	color: #004d4d;
 }
 
-.page-header {
-	background: #ccdddd;
-	width: 100%;
-	margin: 0;
-	padding: 0;
-	padding-left: 20px;
-	padding-right: 20px;
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 100;
-}
-
-.devbug-header {
-	background: #509d9d;
-	width: 100%;
-	position: relative;
-	margin: 0;
-	padding: 5px;
-	padding-left: 20px;
-	margin-left: -20px;
-	color: white;
-}
-
-.spacer {
-	min-height: 165px;
-}
-
-.navul {
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
-	padding-left: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-	margin-left: -20px;
-	position: relative;
-	width: 100%;
-	background: #004d4d;
-}
-
-.navli {
-	display: inline;
-	background: #eee;
-	border-radius: 7px;
-	margin-right: 10px;
-	transition: all 0.5s ease;
-}
-
-.navli:hover {
-	background: #509d9d;
-}
-
-.nava {
-	text-decoration: none;
-	padding: 20;
-	transition: all 0.5s ease;
-}
-
-.nava:hover {
-	color: #eee;
-}
-
 .btn, .action {
 	margin: 5;
 	margin-bottom: 20;
@@ -134,3 +71,81 @@ pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
     min-height: 500px;
     z-index: 0;
 }
+
+/* New Theme Styles */
+body { 
+	margin:0;
+	padding:0;
+	box-sizing:border-box;
+}
+
+#pre-header, #title-header {
+	margin: 0;
+	top: 0;
+	left: 0;
+	background: #307d7d;
+	width: 100%;
+}
+
+#title-header {
+	background: #ccdddd;
+}
+
+#title-header-content {
+	padding: 14px;
+	font-size: 20pt;
+	font-weight: bold;
+}
+
+#pre-header-content {
+	padding: 7px;
+	padding-left: 14px;
+	color: #f2f2f2;
+}
+
+#navbar {
+	overflow: hidden;
+	background-color: #333;
+	top: 0;
+	left: 0;
+	margin: 0;
+}
+
+#navbar a {
+	float: left;
+	display: block;
+	color: #f2f2f2;
+	text-align: center;
+	padding: 14px;
+	text-decoration: none;
+	transition: all 0.5s ease;
+}
+
+#navbar {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+}
+
+.navbar-right {
+	float: right;
+}
+
+#navbar a:hover {
+	background: #307d7d;
+}
+
+.content {
+	padding: 16px;
+}
+
+.sticky {
+	position: fixed;
+	top: 0;
+	width: 100%;
+}
+
+.sticky + .content {
+	padding-top: 60px;
+}

app/assets/dash_v1.js

@@ -28,3 +28,15 @@ function from_server(json_string){
     json_string = JSON.parse(json_string.replace(/"/g, '"').replace(/\p{C}+/g, '?'))
     window.devbug = json_string
 }
+
+const navbar = document.getElementById('navbar')
+const sticky = navbar.offsetTop;
+
+window.onscroll = () => {
+    if ( window.pageYOffset >= sticky ) {
+        navbar.classList.add('sticky')
+    }
+    else {
+        navbar.classList.remove('sticky')
+    }
+}

app/views/dash_v1/template.pug

@@ -2,28 +2,25 @@ html
 	head
 		title #{(title ? title+' | DevBug' : 'DevBug Dashboard')}
 		link(rel='stylesheet' href='/assets/dash_v1.css')
-		script(src='/assets/dash_v1.js')
 		block head
 	body
-		- var e_project = (user && project && devbug.permission.project.sync_edit(project, user))
+		#pre-header
-		.page-header
+			- var e_project = (user && project && devbug.permission.project.sync_edit(project, user))
-			.devbug-header DevBug | v#{devbug.version} #{(user ? " | User: "+user.username : "")} #{(e_project ? " | Project: "+project.name+" | API: "+project.uuid : "")} #{((_flitter.config('server.environment') === 'development') ? " | Development" : "" )}
+			#pre-header-content DevBug | v#{devbug.version} #{(user ? " | User: "+user.username : "")} #{(e_project ? " | Project: "+project.name+" | API: "+project.uuid : "")} #{((_flitter.config('server.environment') === 'development') ? " | Development" : "" )}
-			if title_small
+		#title-header
-				h3 #{(title ? title : 'Dashboard')}
+			#title-header-content #{title ? title : 'DevBug Dashboard'}
-			else
+		ul#navbar
-				h1 #{(title ? title : 'Dashboard')}
+			li
-			ul.navul
+				a#navbar-home(href='/dash/v1') Home
-				li.navli
+			li
-					a.nava(href='/dash/v1') Home
+				a#navbar-usage(href='/dash/v1/using_devbug/main') Using DevBug
-				li.navli
+			li.navbar-right
-					a.nava(href='/dash/v1/using_devbug/main') Using DevBug
+				a#navbar-logout(href='/auth/logout') Logout
-				li.navli
+			if show_back
-					a.nava(href='/auth/logout') Logout
+				li
-				if show_back
+					a#navbar-back(href='javascript:window.history.back()') Back
-					li.navli
-						a.nava(href='javascript:window.history.back()') Back
-		.spacer
 		.content
 			block content
 			block scripts
+			script(src='/assets/dash_v1.js')
 		//- .spacer