Club: fix navigation menu styles (#6385)

* Club: fix mobile menu font size

* Club: lowercase navigation items

* Club: global reduce letter-spacing

* Club: adding submenu arrow icon

* Club: making arrow icon color customizable with theme.json

club/assets/icons/arrow.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="8.5" y1="12.5" x2="8.5" y2="0.5" stroke="#000AFF" stroke-width="3"/>
+<path d="M2 7.5L8.29032 13.5L15 7.5" stroke="#000AFF" stroke-width="3"/>
+</svg>

club/style.css

@@ -223,6 +223,10 @@ a {
 }
 
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
+	font-size: 2.5rem;
+}
+
+.wp-block-navigation-item__content {
 	font-size: var(--wp--preset--font-size--large);
 }
 
@@ -231,6 +235,26 @@ a {
 	gap: 0.5rem;
 }
 
+.wp-block-navigation__submenu-icon::after {
+	content: "";
+	width: 1em;
+	height: 1em;
+	background-color: currentColor;
+    -webkit-mask-image: url(assets/icons/arrow.svg);
+    mask-image: url(assets/icons/arrow.svg);
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	display: block;
+	-webkit-mask-size: 0.5em;
+	mask-size: 0.5em;
+	mask-position: left 30%;
+    -webkit-mask-position: left 30%;
+}
+
+.wp-block-navigation__submenu-icon svg {
+	display: none !important;
+}
+
 /*
  * Block search
  */

club/theme.json

@@ -294,7 +294,8 @@
             "core/navigation": {
                 "typography": {
                     "fontSize": "var(--wp--preset--font-size--large)",
-                    "textDecoration": "none"
+                    "textDecoration": "none",
+                    "textTransform": "lowercase"
                 },
                 "elements": {
                     "link": {
@@ -320,8 +321,7 @@
                 },
                 "typography": {
                     "fontSize": "var(--wp--preset--font-size--large)",
-                    "textTransform": "uppercase",
-                    "letterSpacing": "-0.04em"
+                    "textTransform": "uppercase"
                     
                 },
                 "elements": {
@@ -493,7 +493,6 @@
                 "typography": {
                     "textTransform": "uppercase",
                     "fontSize": "var(--wp--preset--font-size--large)",
-                    "letterSpacing": "-0.04em",
                     "lineHeight": "1em"
                 },
                 "border": {
@@ -544,11 +543,6 @@
 					}
 				}
 			},
-            "heading": {
-                "typography": {
-                    "letterSpacing": "-0.04em"
-                }
-            },
             "h1": {
                 "typography": {
                     "fontSize": "clamp(3.75rem, calc(3.75rem + ((1vw - 0.48rem) * 8.4135)), 8.125rem)",
@@ -612,7 +606,8 @@
         "typography": {
             "fontFamily": "var(--wp--preset--font-family--spacemono)",
             "fontSize": "var(--wp--preset--font-size--medium)",
-            "lineHeight": "1.6"
+            "lineHeight": "1.6",
+            "letterSpacing": "-0.04em"
         }
     },
     "templateParts": [