diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 198937b..9f8f6e8 100644
--- a/app/assets/stylesheets/application.css
+++ b/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;
}
\ No newline at end of file
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 3886107..820a003 100644
--- a/app/helpers/application_helper.rb
+++ b/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|
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 720cf07..c47c9b2 100644
--- a/app/javascript/packs/application.js
+++ b/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.
diff --git a/app/javascript/packs/custom.js b/app/javascript/packs/custom.js
deleted file mode 100644
index 87dae8e..0000000
--- a/app/javascript/packs/custom.js
+++ /dev/null
@@ -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);
-});
\ No newline at end of file
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 92ff408..88cb2f6 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -12,16 +12,25 @@
- <%= 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 %>
-
- <% end %>
+
+
<%= yield %>