make the navbar awesomer

loftwah · Sep 17, 2023 · 2e51e04 · 2e51e04
1 parent fd01ff2
commit 2e51e04
Showing 1 changed file with 16 additions and 9 deletions.
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -12,6 +12,14 @@
     input.form-control.dark-placeholder::placeholder {
       color: #ffffff;
     }
+    /* Add hover effect for the username */
+    .nav-username:hover {
+      text-decoration: underline;
+    }
+    /* Add hover effect for the nav items */
+    .navbar-nav .nav-link:hover {
+      color: #FFF;
+    }
   </style>
 </head>
 <body 
@@ -28,10 +36,10 @@
       <% end %>
       <a class="navbar-brand" href="/">Linkarooie</a>
       <% if user_signed_in? %>
-          <li class="nav-item px-2">
+          <li class="nav-item px-2 nav-username">
             <span class="badge badge-secondary">@<%= current_user.username %></span>
           </li>
-        <% end %>
+      <% end %>
     </div>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -44,30 +52,29 @@
       </ul>
       <ul class="navbar-nav ml-auto">
         <% if user_signed_in? %>
-          <!-- GitHub Icon Link -->
           <li class="nav-item px-2">
-            <%= link_to '<i class="fab fa-github"></i>'.html_safe, 'https://github.com/loftwah/linkarooie', class: 'nav-link', target: '_blank' %>
+            <%= link_to '<i class="fab fa-github"></i>'.html_safe, 'https://github.com/loftwah/linkarooie', title: 'View on GitHub', class: 'nav-link', target: '_blank' %>
           </li>
           <li class="nav-item px-2">
             <hr class="dropdown-divider">
           </li>
           <li class="nav-item px-2">
-            <%= link_to 'Kanban', kanban_path(1), class: 'nav-link' %>
+            <%= link_to '<i class="fas fa-tasks"></i> Kanban'.html_safe, kanban_path(1), class: 'nav-link' %>
           </li>
           <li class="nav-item px-2">
-            <%= link_to 'Links', links_path, class: 'nav-link' %>
+            <%= link_to '<i class="fas fa-link"></i> Links'.html_safe, links_path, class: 'nav-link' %>
           </li>
           <li class="nav-item px-2">
-            <%= link_to 'Profile', user_public_links_path(current_user.username), class: 'nav-link' %>
+            <%= link_to '<i class="fas fa-user"></i> Profile'.html_safe, user_public_links_path(current_user.username), class: 'nav-link' %>
           </li>
           <li class="nav-item px-2">
-            <%= link_to 'Settings', edit_settings_path, class: 'nav-link' %>
+            <%= link_to '<i class="fas fa-cog"></i> Settings'.html_safe, edit_settings_path, class: 'nav-link' %>
           </li>
           <li class="nav-item px-2">
             <hr class="dropdown-divider">
           </li>
           <li class="nav-item px-2">
-            <%= link_to destroy_user_session_path, method: :delete, class: 'nav-link' do %>
+            <%= link_to destroy_user_session_path, method: :delete, title: 'Sign out', class: 'nav-link' do %>
               <i class="fas fa-sign-out-alt"></i> Sign out
             <% end %>
           </li>