fix padding and margins

DFE-Digital · Apr 24, 2024 · 4090194 · 4090194
1 parent 16d261e
commit 4090194
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/app/components/header/navigation_component.rb b/app/components/header/navigation_component.rb
@@ -24,7 +24,7 @@ def sync_mode(mode)
       mode == :mobile ? :desktop : :mobile
     end
 
-    def nav_link(resource, mode)
+    def nav_link(resource, mode, level: 1)
       title = resource.title
       path = resource.path
       li_id = "#{path.parameterize}-#{mode}"
@@ -33,8 +33,8 @@ def nav_link(resource, mode)
       child_menu_sync_id = category_list_id(resource, sync_mode(mode))
       child_menu_ids = [child_menu_id, child_menu_sync_id].join(" ")
       li_css = ("active" if uri_is_root?(path) || first_uri_segment_matches_link?(path)).to_s
-      link_css = "grow link--black link--no-underline"
       show_dropdown = resource.children?
+      link_css = show_dropdown || level > 1 ? "grow link--black link--no-underline" : "grow link--black"
       aria_attributes = show_dropdown ? { expanded: false, controls: child_menu_ids } : {}
       tag.li id: li_id, class: li_css, data: { "sync-id": li_sync_id, "child-menu-id": child_menu_id, "child-menu-sync-id": child_menu_sync_id, "direct-link": !show_dropdown, "toggle-secondary-navigation": show_dropdown } do
         safe_join([
@@ -100,7 +100,7 @@ def page_list(resource:, subcategory:, css_class:, mode:)
         safe_join(
           [
             resource.children_in_subcategory(subcategory).map do |child_resource|
-              nav_link(child_resource, mode)
+              nav_link(child_resource, mode, level: 3)
             end,
           ],
         )

diff --git a/app/webpacker/styles/header/navigation.scss b/app/webpacker/styles/header/navigation.scss
@@ -92,14 +92,14 @@ body > header nav {
   ol.primary {
     list-style: none;
     display: flex;
-    //border: dotted green 1px;
+    // border: dotted green 1px;
 
     li {
       @include list-item-nav;
       @include reset;
       line-height: 1.2;
       margin-bottom: 0;
-      //border: dotted red 1px;
+      // border: dotted red 1px;
 
       display: flex;
       justify-content: space-between;
@@ -120,7 +120,6 @@ body > header nav {
       flex-wrap: wrap;
       margin: 0;
       padding: 0 1em;
-      //padding: 0;
 
       li {
         // NB: this is for all <li> elements in the mobile menu
@@ -244,7 +243,7 @@ body > header nav {
         }
 
         a, button.btn-as-link {
-          //border: dotted orange 1px;
+          // border: dotted orange 1px;
 
           &:hover,
           &:focus {
@@ -293,9 +292,9 @@ body > header nav {
     display: block;
     width: 21px;
     height: 21px;
-    margin-left: 0.5em;
-    margin-right: 1em;
-    //border: dotted blue 1px;
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+    // border: dotted blue 1px;
   }
 }