Remove JavaScript in navbar and include logout

Signed-off-by: Tobias Eidelpes <tobias@eidelpes.info>

app/assets/stylesheets/application.css

@@ -14,6 +14,15 @@
  *= require_self
  */
 
+.dark-primary-color    { background: #303F9F; }
+.default-primary-color { background: #3F51B5; }
+.light-primary-color   { background: #C5CAE9; }
+.text-primary-color    { color: #FFFFFF; }
+.accent-color          { background: #009688; }
+.primary-text-color    { color: #212121; }
+.secondary-text-color  { color: #757575; }
+.divider-color         { border-color: #BDBDBD; }
+
 body {
     margin: 0;
 }
@@ -22,57 +31,72 @@ main {
     margin: 8px;
 }
 
-/* Add a black background color to the top navigation */
-.topnav {
-    background-color: #333;
-    overflow: hidden;
+nav {
+    background-color: #3F51B5;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
     box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.20);
 }
 
-/* Style the links inside the navigation bar */
-.topnav a {
-    float: left;
-    display: block;
-    color: #f2f2f2;
-    text-align: center;
-    padding: 18px 20px;
-    text-decoration: none;
-    font-size: 17px;
-}
-
-/* Change the color of links on hover */
-.topnav a:hover {
-    background-color: #ddd;
-    color: black;
-}
-
-/* Add an active class to highlight the current page */
-.topnav a.active {
-    background-color: #4CAF50;
+nav a {
     color: white;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-family: Helvetica, sans-serif;
+    font-size: 18px;
+    transition: .3s all ease-in-out;
 }
 
-.topnav a:not(.active) {
+nav a:hover {
+    background-color: #009688;
+}
+
+#nav-toggle {
     display: none;
 }
 
-.topnav a.icon {
-    float: right;
-    display: block;
-    padding: 14px 16px;
+#nav-toggle:checked ~ .left-menu {
+    display: grid;
+    grid-row: 2;
+    grid-column: 1/-1;
 }
 
-/* Layout for responsive class; gets added on menu click */
-.topnav.responsive {
-    position: relative;
+.burger-menu {
+    display: inline-block;
+    grid-column: 1;
+    align-self: center;
+    margin-left: 1rem;
 }
-.topnav.responsive a.icon {
-    position: absolute;
-    right: 0;
-    top: 0;
+
+.left-menu {
+    display: none;
+    grid-column: 1;
+    align-self: center;
 }
-.topnav.responsive a {
-    float: none;
-    display: block;
-    text-align: left;
+
+.left-menu a {
+    padding: 15px 0 10px 1rem;
+    font-size: 18px;
+    font-weight: 500;
+    letter-spacing: .5px;
+}
+
+.right-menu {
+    grid-column: 3;
+    text-align: right;
+    align-self: center;
+}
+
+.right-menu a {
+    padding: 18px 1rem 17px 1rem;
+}
+
+.logo {
+    grid-column: 2;
+    padding: 1rem;
+    font-family: Helvetica, sans-serif;
+    font-size: 18px;
+    font-weight: 800;
+    letter-spacing: 0.5px;
 }