From 2f3caed771891bcbd3c1e4e4dcdaac511076471f Mon Sep 17 00:00:00 2001
From: jorge-vitrubio <jorge@vitrubio.net>
Date: Tue, 12 Mar 2024 14:20:42 +0100
Subject: [PATCH] edited menu lines and view in small screens

---
 sass/components/navigation/_navigation.scss | 130 +++++++++-----------
 1 file changed, 56 insertions(+), 74 deletions(-)

diff --git a/sass/components/navigation/_navigation.scss b/sass/components/navigation/_navigation.scss
index 9562612..cf13437 100644
--- a/sass/components/navigation/_navigation.scss
+++ b/sass/components/navigation/_navigation.scss
@@ -23,40 +23,56 @@
         padding-left: 1rem;
       }
 		}
-
 		li {
 			position: relative;
 			&:hover > a,
 			&.focus > a {
 			}
 		}
-
 		a {
 			display: flex;
 			align-items: center;
 			min-height: 100%;
-			padding: 0 0.5rem;
 			text-decoration: none;
 			font-size: 1rem;
 		}
-
-		.current_page_item > a,
-		.current-menu-item > a,
-		.current_page_ancestor > a,
-		.current-menu-ancestor > a {
-			text-decoration: underline;
-		}
 	}
 
-	//.main-navigation {
-	//	a[href^="http://localhost"],
-	//	a[href^="http://xarxaprod.cat"],
-	//	a[href^="https://xarxaprod.cat"]
-	//	{
-	//		font-family: $font__bold;
-	//		border-left: 1px solid $color__black;
-	//	}
-	//}
+	.main-navigation {
+	  &.toggled {
+	  	ul {
+	  		display: block;
+	  	}
+	  	.main-navigation-content {
+	  		display: inline-block;
+	  		position: absolute;
+	  		top: 0;
+	  		left: 0;
+	  		width: 100%;
+	  		height: 100vh;
+	  		padding: 4rem;
+	  		background-color: rgba(255,255,255,0.95);
+	  		overflow: auto;
+	  	}
+	    .menu-toggle {
+	    	position: relative;
+	    	z-index: 9999;
+	    }
+	  	.current-menu-ancestor > a::after {
+	  		background-color: transparent;
+	  	}
+	  	.current-menu-item > a::after {
+	  		display: inline-block;
+	  		content: "";
+	  		position: absolute;
+	  		left: 0;
+	  		top: 2em;
+	  		height: 2px;
+	  		width: 100%;
+	  		background-color: $color__black;
+	  	}
+	  }
+  }
 	.secondary-navigation {
 		padding: 0 1em 1em 0;
 		ul {
@@ -69,7 +85,6 @@
 			text-transform: uppercase;
 		}
 	}
-
 	.menu-item-has-children {
 	}
 
@@ -121,25 +136,6 @@
 	}
 	/* end of menu hidden*/
 
-	/* Small menu. */
-	.main-navigation.toggled {
-		ul {
-			display: block;
-		}
-		.main-navigation-content {
-			display: inline-block;
-			position: absolute;
-			top: 5rem;
-			left: 0;
-			width: 100%;
-			height: calc(100vh - 25rem);
-			padding: 0 3rem;
-			background-color: $color__white;
-			overflow: auto;
-		}
-	}
-	.menu-toggle {
-	}
 }
 @media screen and (max-width: 47.99em) {
 	.site-branding {
@@ -167,9 +163,10 @@
 	.main-navigation,.secondary-navigation {
 		ul {
 			display: flex;
-
-			ul {
-				background-color: rgba(255,255,255,0.8);
+      .menu-item-has-children > ul {
+				background-color: rgba(255,255,255,0.95);
+			}
+			.sub-menu {
 				float: left;
 				position: absolute;
 				top: 100%;
@@ -203,16 +200,15 @@
 				a.focus {
 				}
 			}
-
-			li:hover > ul,
-			li.focus > ul {
-				left: auto;
+      li {
+			    padding: 0 1em;
+			    &:hover > ul,
+			    &.focus > ul {
+				  left: auto;
+			  }
 			}
 		}
 
-		a {
-			padding: 0 0.5rem;
-		}
 	}
 	.main-navigation { 
 		padding-bottom: 1em;
@@ -220,31 +216,23 @@
 			justify-content: end;
       ul.sub-menu {
         flex-direction: column;
-        padding: 1rem;
+        padding: 0.5rem;
         li {
           margin: 0.5rem 0;
         }
       }
 		}
-		//a[href^="http://localhost"],
-		//a[href^="http://xarxaprod.cat"],
-		//a[href^="https://xarxaprod.cat"]
-		//{
-		//	font-family: $font__bold;
-		//	border-left:none;
-		//}
-		//a[href^="http://localhost"]::after,
-		//a[href^="http://xarxaprod.cat"]::after,
-		//a[href^="https://xarxaprod.cat"]::after,
-		.current-menu-item a::after {
+		.current-menu-ancestor > a::after,
+		.current-menu-item > a::after {
 			display: inline-block;
 			content: "";
 			position: absolute;
-			left: 5%;
+			left: 1em;
+			bottom: -0.5em;
 			min-height: 2px;
-			height: 100%;
-			width: 90%;
-			margin-top: 2.3em;
+			height: 2px;
+			width: calc(100% - 2em);
+			background-color: $color__black;
 		}
     .menu-item-has-children {
 			ul {
@@ -321,17 +309,11 @@
 			display:none;
 		}
 
-		a {
-			padding: 0 1rem;
-		}
+		//a {
+		//	padding: 0 1rem;
+		//}
 	}
 	.main-navigation {
 		padding-bottom: 0;
-		//a[href^="http://localhost"]::after,
-		//a[href^="http://xarxaprod.cat"]::after,
-		//a[href^="https://xarxaprod.cat"]::after,
-		.current-menu-item a::after {
-			margin-top: 5em;
-		}
 	}
 }