Merge pull request #20 from demesameneshoa/feature/navbar

Issue #11 🎫: Navigation bar
demesameneshoa · Dec 20, 2023 · 67e7fb1 · 67e7fb1
2 parents 563637c + 25e1ab3
commit 67e7fb1
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 14 deletions.
diff --git a/app/assets/images/recipes-app-logo-png-favicon.png b/app/assets/images/recipes-app-logo-png-favicon.png
diff --git a/app/assets/images/recipes-app-logo-png-large.png b/app/assets/images/recipes-app-logo-png-large.png
diff --git a/app/assets/images/recipes-app-logo-png-small.png b/app/assets/images/recipes-app-logo-png-small.png
diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb
@@ -0,0 +1,43 @@
+<nav class="navbar navbar-light bg-light">
+    <div class="container">
+        <%= link_to root_path, class: "navbar-brand" do %>
+            <img src="<%= asset_path("recipes-app-logo-png-small.png") %>" width="auto" height="50" alt="recipe app logo">
+        <% end %>
+
+
+        <div class="p-1 text-center d-flex align-items-center flex-wrap">
+            <ul class="nav" style="font-size: 0.9rem;">
+                <li class="nav-item">
+                    <%= link_to "Public-recipes", root_path, class: "nav-link pl-0" %>
+                </li>
+
+                <% if user_signed_in? %>
+
+                <% # ! UPDATE THE LINKS BELOW TO POINT TO THE CORRECT PATHS %>
+
+                    <li class="nav-item">
+                        <%= link_to "My-recipes", root_path, class: "nav-link" %>
+                    </li>
+                    <li class="nav-item">
+                        <%= link_to "Food-List", root_path, class: "nav-link" %>
+                    </li>
+                    <li class="nav-item">
+                        <%= link_to "Shopping-list", root_path, class: "nav-link" %>
+                    </li>
+                <% end %>
+            </ul>
+
+            <% if user_signed_in? %>
+                <%= button_to("Sign Out", destroy_user_session_path,
+                              method: :delete,
+                              class: "btn btn-outline-success ml-2 px-2 py-1",
+                              style: "font-size: 0.9rem;") %>
+                <% else %>
+                <%= button_to("Sign in", new_user_session_path,
+                              method: :get,
+                              class: "btn btn-outline-success ml-2 px-2 py-1",
+                              style: "font-size: 0.9rem;") %>
+            <% end %>
+        </div>
+    </div>
+</nav>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -10,6 +10,8 @@
       integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
       crossorigin="anonymous"
     />
+    <%= favicon_link_tag asset_path("recipes-app-logo-png-favicon.png") %>
+
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
@@ -18,20 +20,7 @@
   </head>
 
   <body>
-
-    <div class="p-1 text-center">
-      <% if user_signed_in? %>
-        <%= button_to("Sign Out", destroy_user_session_path,
-                      method: :delete,
-                      class: "btn btn-outline-success px-2 py-1",
-                      style: "font-size: 0.9rem;") %>
-      <% else %>
-        <%= button_to("Sign in", new_user_session_path,
-                      method: :get,
-                      class: "btn btn-outline-success px-2 py-1",
-                      style: "font-size: 0.9rem;") %>
-      <% end %>
-    </div>
+    <%= render "layouts/navbar" %>
 
     <div class="container mt-1 text-center">
       <% flash.each do |key, message| %>