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 */
+nav {
-.topnav {
+    background-color: #3F51B5;
-    background-color: #333;
+    width: 100%;
-    overflow: hidden;
+    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 */
+nav a {
-.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;
     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 {
+#nav-toggle:checked ~ .left-menu {
-    float: right;
+    display: grid;
-    display: block;
+    grid-row: 2;
-    padding: 14px 16px;
+    grid-column: 1/-1;
 }
 
-/* Layout for responsive class; gets added on menu click */
+.burger-menu {
-.topnav.responsive {
+    display: inline-block;
-    position: relative;
+    grid-column: 1;
+    align-self: center;
+    margin-left: 1rem;
 }
-.topnav.responsive a.icon {
+
-    position: absolute;
+.left-menu {
-    right: 0;
+    display: none;
-    top: 0;
+    grid-column: 1;
+    align-self: center;
 }
-.topnav.responsive a {
+
-    float: none;
+.left-menu a {
-    display: block;
+    padding: 15px 0 10px 1rem;
-    text-align: left;
+    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;
 }

app/helpers/application_helper.rb

@@ -1,18 +1,4 @@
 module ApplicationHelper
-  # Contains the complete navbar
-  def nav_bar
-    content_tag(:div, class: 'topnav', id: 'topnav') do
-      yield
-    end
-  end
-
-  # Defines individual links in the navbar. To be used inside nav_bar
-  def nav_link(text, path)
-    # Sets active class on the link corresponding to the page being viewed
-    options = current_page?(path) ? { class: 'active' } : {}
-    link_to text, path, options
-  end
-
   # Used to render svg image files
   def show_svg(path)
     File.open("app/assets/images/#{path}", 'rb') do |file|

app/javascript/packs/application.js

@@ -8,8 +8,6 @@ require("turbolinks").start()
 require("@rails/activestorage").start()
 require("channels")
 
-require("packs/custom");
-
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
 // or the `imagePath` JavaScript helper below.

app/javascript/packs/custom.js

@@ -1,14 +0,0 @@
-/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
-function toggleMenu() {
-    var x = document.getElementById("topnav");
-    if (x.className === "topnav") {
-        x.className += " responsive";
-    } else {
-        x.className = "topnav";
-    }
-}
-
-/* First load all other scripts and then listen for click on menu */
-document.addEventListener('turbolinks:load', () => {
-    document.getElementById("toggleMenu").addEventListener("click", toggleMenu);
-});

app/views/layouts/application.html.erb

@@ -12,16 +12,25 @@
   </head>
 
   <body>
-  <%= nav_bar do %>
+
-    <%= nav_link 'Home', root_path %>
+    <nav>
-    <%= nav_link 'People', people_index_path %>
+      <input type="checkbox" id="nav-toggle">
-    <%= nav_link 'Courses', courses_index_path %>
+      <label for="nav-toggle" class="burger-menu">
-    <%= nav_link 'Projects', projects_index_path %>
-    <%= nav_link 'Theses', theses_index_path %>
-    <a href="javascript:void(0);" class="icon" id="toggleMenu">
         <%= show_svg('menu-white-24dp.svg') %>
-    </a>
+      </label>
-  <% end %>
+      <div class="left-menu">
+        <%= link_to 'Home', root_path %>
+        <%= link_to 'People', people_index_path %>
+        <%= link_to 'Courses', courses_index_path %>
+        <%= link_to 'Projects', projects_index_path %>
+        <%= link_to 'Theses', theses_index_path %>
+      </div>
+      <a href="#" class="logo">tiss2go</a>
+      <div class="right-menu">
+        <!-- TODO: Change root_path to login/register page -->
+        <%= link_to 'Logout', root_path %>
+      </div>
+    </nav>
 
   <main>
     <%= yield %>