From 590d0fbe7b2aed470c168d1fa83666e7e34f85a4 Mon Sep 17 00:00:00 2001
From: jorge-vitrubio <jorge@vitrubio.net>
Date: Thu, 14 Mar 2024 20:30:26 +0100
Subject: [PATCH] styled menu for small screens

---
 sass/components/navigation/_navigation.scss | 158 +++++++++-----------
 1 file changed, 73 insertions(+), 85 deletions(-)

diff --git a/sass/components/navigation/_navigation.scss b/sass/components/navigation/_navigation.scss
index a538722..19a01b0 100644
--- a/sass/components/navigation/_navigation.scss
+++ b/sass/components/navigation/_navigation.scss
@@ -12,33 +12,20 @@
 		margin: 1rem;
 	}
 	.main-navigation,.secondary-navigation {
-		ul {
+		.main-navigation-content {
 			display: none;
-			list-style: none;
-			margin: 0;
-			padding-left: 0;
-      ul.sub-menu {
-        padding-top: 0.5rem;
-        padding-left: 1rem;
-      }
-		}
-		li {
-			position: relative;
-		}
-		a {
-			display: flex;
-			align-items: center;
-			min-height: 100%;
-			text-decoration: none;
-			font-size: 1rem;
 		}
 	}
 	.main-navigation {
 	  &.toggled {
 	  	ul {
 	  		display: block;
+				position: relative;
 	  	}
-		
+	    .menu-toggle {
+	    	position: relative;
+	    	z-index: 999;
+	    }
 	  	.main-navigation-content {
 	  		display: inline-block;
 	  		position: absolute;
@@ -50,10 +37,14 @@
 	  		background-color: rgba(255,255,255,0.95);
 	  		overflow: auto;
 	  	}
-	    .menu-toggle {
-	    	position: relative;
-	    	z-index: 9999;
-	    }
+			li {
+				display: block;
+			}
+			a {
+				display: block;
+				min-height: 100%;
+				padding: 0.5em 0;
+			}
 	  	.current-menu-ancestor > a::after {
 	  		background-color: transparent;
 	  	}
@@ -70,66 +61,56 @@
 	  }
   }
 	.secondary-navigation {
-		padding: 0 1em 1em 0;
-		ul {
-			display: inline-block;
-			li {
-				padding: 0.5em 0;
-			}
-		}
-		a {
-			text-transform: uppercase;
-		}
 	}
 	.menu-item-has-children {
 	}
 
 	/* begin of menu-hidden */
-	.toggle-secondary-navigation .show-mobile{
-		display:inherit;
-	}
-	.toggle,
-	.toggled-menu {
-		display: none;
-	}
-	.toggle:checked+.toggled-menu{
-		display: block;
-		position: absolute;
-		left:0;
-		top:0;
-		width: 100%;
-		height: 100vh;
-		margin-top: 0;
-		padding: 0 2rem;
-	}
-	.toggle-show {
-		position: relative;
-		display: inline-block;
-		width: 1.8em;
-		height: 1.4em;
-		margin-right: 0.3em;
-		border-top: 0.3em solid $color__black;
-		border-bottom: 0.3em solid $color__black;
-	}
-	.toggle-show::before {
-		content: "";
-		position: absolute;
-		top: 0.3em;
-		left: 0;
-		width: 100%;
-		border-top: 0.3em solid $color__black;
-	}
-	.toggle-hide {
-		display: flex;
-		justify-content: end;
-		margin-right: -0.5em;
-	}
-	.toggle-hide::after{
-		content: "x";
-		padding: 0;
-		font-size: 3rem;
-		font-weight: bold;
-	}
+	//.toggle-secondary-navigation .show-mobile{
+	//	display:inherit;
+	//}
+	//.toggle,
+	//.toggled-menu {
+	//	display: none;
+	//}
+	//.toggle:checked+.toggled-menu{
+	//	display: block;
+	//	position: absolute;
+	//	left:0;
+	//	top:0;
+	//	width: 100%;
+	//	height: 100vh;
+	//	margin-top: 0;
+	//	padding: 0 2rem;
+	//}
+	//.toggle-show {
+	//	position: relative;
+	//	display: inline-block;
+	//	width: 1.8em;
+	//	height: 1.4em;
+	//	margin-right: 0.3em;
+	//	border-top: 0.3em solid $color__black;
+	//	border-bottom: 0.3em solid $color__black;
+	//}
+	//.toggle-show::before {
+	//	content: "";
+	//	position: absolute;
+	//	top: 0.3em;
+	//	left: 0;
+	//	width: 100%;
+	//	border-top: 0.3em solid $color__black;
+	//}
+	//.toggle-hide {
+	//	display: flex;
+	//	justify-content: end;
+	//	margin-right: -0.5em;
+	//}
+	//.toggle-hide::after{
+	//	content: "x";
+	//	padding: 0;
+	//	font-size: 3rem;
+	//	font-weight: bold;
+	//}
 	/* end of menu hidden*/
 
 }
@@ -138,11 +119,9 @@
 	}
 	.main-navigation-content {
 		li {
-			padding: 0.5rem 0; 
 		}
 	}
 	.secondary-navigation-content {
-		padding: 4rem 2rem;
 	}
 }
 @media screen and (min-width: 48em) {
@@ -157,6 +136,9 @@
 	}
 
 	.main-navigation,.secondary-navigation {
+		.main-navigation-content {
+			display: inline-block;
+		}
 		ul {
 			display: flex;
 			flex-flow: row;
@@ -165,14 +147,13 @@
 				box-shadow: -4px 4px 15px #999;
 				border-radius: 0.2em;
 			}
-			.sub-menu {
+			ul.sub-menu {
 				float: left;
 				position: absolute;
 				top: 100%;
 				left: -999em;
 				z-index: 99999;
-        padding-top: 0.5rem;
-        padding-left: 1rem;
+        padding: 0.5rem;
 
 				ul {
 					left: -999em;
@@ -194,6 +175,7 @@
 				}
 			}
       li {
+				position: relative;
 			  padding: 1em;
 			  &:hover > ul,
 			  &.focus > ul {
@@ -202,6 +184,14 @@
         &.lang-item {
         }
 			}
+			a {
+        display: flex;
+        align-items: center;
+        min-height: 100%;
+        text-decoration: none;
+        font-size: 1rem;
+			}
+
 		}
 
 	}
@@ -211,9 +201,7 @@
 			justify-content: end;
       ul.sub-menu {
         flex-direction: column;
-        //padding: 0.5rem;
         li {
-          //padding: 0.5rem;
         }
       }
 		}