Final navbar setup

app/components/sidenav_component/sidenav_component.html.erb

@@ -73,35 +73,35 @@
       </div>
     </div>
   <% elsif opts[:is_nav_bar].present? %>
-    <nav class="navbar navbar-expand-lg navbar-light bg-light">
-      <div class="container-fluid d-flex justify-content-end">
+    <nav class="navbar navbar-expand-lg navbar-light bg-light p-0">
+      <div class="container-fluid">
+        <div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
           <div>
             <a class="navbar-brand" href="#"><%= image_pack_tag 'application/cdasiaonline_logo.png', class:"nav-bar-app-logo" %></a>
           </div>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <div> </div>
           <form class="d-flex">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-              <li class="nav-item">
-                <a class="nav-link active" aria-current="page" href="#">Home</a>
+              <li class="nav-item p-2">
+                <%= link_to ' <i class="fas fa-home me-2"></i>Home'.html_safe, root_path, class: "nav-link" %>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">Search</a>
+              <li class="nav-item p-2">
+                <%= link_to '<i class="fas fa-search me-2"></i>Search'.html_safe, documents_path, class: "nav-link"  %>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">Subjects</a>
+              <li class="nav-item p-2">
+                <%= link_to '<i class="fas fa-indent me-2"></i> Subjects'.html_safe, "#", class: "nav-link" %>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">Doctrines</a>
+              <li class="nav-item p-2">
+                <%= link_to ' <i class="fas fa-book me-2"></i> Doctrines'.html_safe, "#", class: "nav-link"%>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">Decisions</a>
+              <li class="nav-item p-2">
+                <%= link_to '<i class="fas fa-map-signs me-2"></i> Desicions'.html_safe, decisions_path, class: "nav-link" %>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">Settings</a>
+              <li class="nav-item p-2">
+                <%= link_to '<i class="fas fa-cog me-2"></i>Settings'.html_safe, "#", class: "nav-link" %>
               </li>
-              <li class="nav-item">
-                <a class="nav-link text-danger" href="#">Sign Out</a>
+              <li class="nav-item p-2 active-red">
+               <%= link_to '<i class="fas fa-sign-out-alt"></i> Sign Out'.html_safe, destroy_user_session_path, class:" text-white nav-link" %>
+ 
               </li>
             </ul>
           </form>

app/javascript/src/application/nav-bar.scss

@@ -1,3 +1,11 @@
 img.nav-bar-app-logo {
     width: 220px;
 }
+
+.active-red {
+    background: #f75353;
+}
+
+.active-red a:hover {
+    background: transparent;
+}