Put Together New Nav. Logic and Nested Button Styling

Author: GeorgeBerdovskiy

app/assets/stylesheets/application.css

@@ -57,16 +57,14 @@ a {
 	padding: var(--space);
 }
 
-
-.nested-page{
+.nested-page-button {
 	font-size: 0.9rem !important; 
 	border-radius: 0px !important;
 	border-left: 4px solid #dfe6e9 !important;
 	margin-left: 20px !important;
 	--space: 24px;
 }
 
-
 /* MARKDOWN */
 h2 {
 	font-family: 'Inter', sans-serif;
@@ -201,7 +199,7 @@ a.social img {
 	outline: none;
 
 	padding: calc(0.25 * var(--space));
-	border-radius: 4px 0px 0px 4px;
+	border-radius: 4px;
 
 	transition: 0.25s all ease;
 	cursor: pointer;
@@ -212,6 +210,7 @@ a.social img {
 
 .sidebar button:hover, .mobile-sidebar button:hover {
 	background-color: rgba(var(--color-light-gray), 0.5);
+	border-radius: 4px !important;
 }
 
 .sidebar button.active, .mobile-sidebar button.active {
@@ -220,6 +219,7 @@ a.social img {
 	background-color: rgb(var(--color-light-gray));
 
 	padding: calc(0.5 * var(--space));
+	border-radius: 4px !important;
 }
 
 .sidebar button.first, .mobile-sidebar button.first {

app/views/articles/index.html.erb

@@ -11,11 +11,11 @@
 
             <div class='links padding-top'>
                 <% @nav_tree.each do |key, value| %>
-                    <%= button_tag key, id: value["Index"], class: "nav-button #{value}", data: { action: "click->articles--page#navigate" } %>
+                    <%= button_tag key, id: value["Index"], class: "nav-button #{value['Index']}", data: { action: "click->articles--page#navigate" } %>
 
                     <% value.each do |skey, svalue| %>
                         <% if skey != "Index" %>
-                            <%= button_tag skey, id: svalue["Index"], class: "nav-button #{svalue}", data: { action: "click->articles--page#navigate" } %>
+                            <%= button_tag skey, id: svalue["Index"], class: "nav-button #{svalue['Index']} nested-page-button", data: { action: "click->articles--page#navigate" } %>
                         <% end %>
                     <% end %>
                 <% end %>