Implement basic navbar

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

Gemfile.lock

@@ -75,6 +75,7 @@ GEM
     concurrent-ruby (1.1.6)
     crass (1.0.6)
     erubi (1.9.0)
+    ffi (1.12.2)
     ffi (1.12.2-x64-mingw32)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
@@ -94,6 +95,7 @@ GEM
     mini_mime (1.0.2)
     mini_portile2 (2.4.0)
     minitest (5.14.0)
+    msgpack (1.3.3)
     msgpack (1.3.3-x64-mingw32)
     nio4r (2.5.2)
     nokogiri (1.10.9)
@@ -137,6 +139,8 @@ GEM
     rubyzip (2.3.0)
     sass-rails (6.0.0)
       sassc-rails (~> 2.1, >= 2.1.1)
+    sassc (2.2.1)
+      ffi (~> 1.9)
     sassc (2.2.1-x64-mingw32)
       ffi (~> 1.9)
     sassc-rails (2.1.2)
@@ -187,6 +191,7 @@ GEM
     zeitwerk (2.3.0)
 
 PLATFORMS
+  ruby
   x64-mingw32
 
 DEPENDENCIES
@@ -194,7 +199,6 @@ DEPENDENCIES
   byebug
   capybara (>= 2.15)
   jbuilder (~> 2.7)
-  nokogiri
   puma (~> 4.1)
   rails (= 6.0.2.1)
   sass-rails (>= 6)

app/assets/images/menu-white-24dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>

app/assets/stylesheets/application.css

@@ -13,3 +13,66 @@
  *= require_tree .
  *= require_self
  */
+
+body {
+    margin: 0;
+}
+
+main {
+    margin: 8px;
+}
+
+/* Add a black background color to the top navigation */
+.topnav {
+    background-color: #333;
+    overflow: hidden;
+    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;
+    color: white;
+}
+
+.topnav a:not(.active) {
+    display: none;
+}
+
+.topnav a.icon {
+    float: right;
+    display: block;
+    padding: 14px 16px;
+}
+
+/* Layout for responsive class; gets added on menu click */
+.topnav.responsive {
+    position: relative;
+}
+.topnav.responsive a.icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+.topnav.responsive a {
+    float: none;
+    display: block;
+    text-align: left;
+}

app/helpers/application_helper.rb

@@ -1,2 +1,22 @@
 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|
+      raw file.read
+    end
+  end
 end

app/javascript/packs/application.js

@@ -8,6 +8,7 @@ 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' %>)

app/javascript/packs/custom.js

@@ -0,0 +1,14 @@
+/* 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

@@ -7,9 +7,25 @@
 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
   </head>
 
   <body>
+  <%= nav_bar do %>
+    <%= nav_link 'Home', root_path %>
+    <%= nav_link 'People', people_index_path %>
+    <%= nav_link 'Courses', courses_index_path %>
+    <%= 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>
+  <% end %>
+
+  <main>
     <%= yield %>
+  </main>
+
   </body>
 </html>

config/environments/production.rb

@@ -109,4 +109,10 @@ Rails.application.configure do
   # config.active_record.database_selector = { delay: 2.seconds }
   # config.active_record.database_resolver = ActiveRecord::Middleware::DatabaseSelector::Resolver
   # config.active_record.database_resolver_context = ActiveRecord::Middleware::DatabaseSelector::Resolver::Session
+
+  # Adds the .svg filetype to the assets
+  config.assets.precompile += %w( '.svg' )
+
+  # Must include to get inline SVGs to work in deploy
+  config.assets.css_compressor = :sass
 end