From c8bc0ca1cd608f6c8828a8448ff3a5cbd50f53b2 Mon Sep 17 00:00:00 2001 From: Tobias Eidelpes Date: Tue, 7 Apr 2020 13:51:05 +0200 Subject: [PATCH] Implement basic navbar Signed-off-by: Tobias Eidelpes --- Gemfile.lock | 6 ++- app/assets/images/menu-white-24dp.svg | 1 + app/assets/stylesheets/application.css | 63 ++++++++++++++++++++++++++ app/helpers/application_helper.rb | 20 ++++++++ app/javascript/packs/application.js | 1 + app/javascript/packs/custom.js | 14 ++++++ app/views/layouts/application.html.erb | 16 +++++++ config/environments/production.rb | 6 +++ 8 files changed, 126 insertions(+), 1 deletion(-) create mode 100644 app/assets/images/menu-white-24dp.svg create mode 100644 app/javascript/packs/custom.js diff --git a/Gemfile.lock b/Gemfile.lock index b5aaec0..66b5000 100644 --- a/Gemfile.lock +++ b/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) diff --git a/app/assets/images/menu-white-24dp.svg b/app/assets/images/menu-white-24dp.svg new file mode 100644 index 0000000..2c1d636 --- /dev/null +++ b/app/assets/images/menu-white-24dp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index d05ea0f..198937b 100644 --- a/app/assets/stylesheets/application.css +++ b/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; +} \ No newline at end of file diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index de6be79..3886107 100644 --- a/app/helpers/application_helper.rb +++ b/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 diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 9cd55d4..720cf07 100644 --- a/app/javascript/packs/application.js +++ b/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' %>) diff --git a/app/javascript/packs/custom.js b/app/javascript/packs/custom.js new file mode 100644 index 0000000..87dae8e --- /dev/null +++ b/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); +}); \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index dc06dd5..92ff408 100644 --- a/app/views/layouts/application.html.erb +++ b/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' %> + + + <%= 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 %> + + <%= show_svg('menu-white-24dp.svg') %> + + <% end %> + +
<%= yield %> +
+ diff --git a/config/environments/production.rb b/config/environments/production.rb index 36f281e..4910c1a 100644 --- a/config/environments/production.rb +++ b/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