header et menu v0

web/themes/custom/popsu/sass/pages/_header.scss

@@ -1,7 +0,0 @@
-#header-top-right{
-	background: yellow;
-	.views-row{
-		display: inline-block;
-	}
-}
-

web/themes/custom/popsu/sass/pages/partials/_header_footer.scss

@@ -0,0 +1,165 @@
+//header
+#header-top{
+	height: 3rem;
+}
+.header_top_left_container{
+	height: 100%;
+	&>div:first-child{
+		height: 100%;
+	}
+	a[rel~='home']{
+		height: 100%;
+		display: block;
+		color: transparent;
+		background: left / contain no-repeat url(../images/popsu-home-logo.png);
+	}
+}
+
+.header_top_middle_container{
+	height: 100%;
+	// solution to access views container
+	.views-element-container{
+		height: 100%;
+		&>div:first-child{
+			height: 100%;
+			&>div:first-child{
+				height: 100%;
+				display: grid;
+				grid-template-columns: repeat(3, 1fr);
+				align-items: center;
+			}
+			
+		}
+	}
+
+	.views-row{
+		text-align: center;
+		display: inline-block;
+		width: auto;
+        a{
+            text-transform: uppercase;
+            text-decoration: none;
+            font-weight: 600;
+        }
+        .views-field-title{
+            display: inline-block;
+            width: auto;
+            padding: .2rem .5rem;
+        }
+        
+	}
+    .popsu-node-3{
+        .views-field-title{
+            color: $col-eur;
+            &:hover{
+                background: $col-eur;
+                color:white;
+            }
+        }
+    }
+    .popsu-node-5{
+        .views-field-title{
+            color: $col-mond;
+            &:hover{
+                background: $col-mond;
+                color:white;
+            }
+        }
+    }
+    .popsu-node-7{
+        .views-field-title{
+            color: $col-met;
+            &:hover{
+                background: $col-met;
+                color:white;
+            }
+        }
+    }
+}
+.close-block, .open-block{
+	// background: red;
+	cursor:pointer;
+    span{
+		display: block;
+		width: 33px;
+		height: 2px;
+		position: relative;
+		background: black;
+		border-radius: 3px;
+		z-index: 1;
+	}
+}
+.close-block{
+    padding-top: 1rem;
+    span{
+        transform-origin: center;
+    }
+    &>div>span:first-child{
+        
+        transform: translateY(57%)rotate(45deg);
+    }
+    &>div>span:nth-child(2){
+        transform: rotate(-45deg);
+    }
+}
+.open-block{
+    height: 100%;
+    display: grid;
+    align-items: center;
+	span{
+		margin-bottom: 5px;	
+		transform-origin: 4px 0px;
+	}
+}
+
+#header-top-right{
+	.header_top_right_container{
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		background: white;
+		display: none;
+		grid-template-columns: 10% 25% 25% 30% 10%;
+		padding: 1rem 0;
+		z-index: 100;
+		line-height: 2;
+		nav{
+			grid-column-start: 2;
+		}
+		// padding: 1rem .5rem 1rem .5rem;
+		a{
+			text-decoration: none;
+			font-weight: 400;
+			&:hover{
+				text-decoration: underline;
+			}
+		}
+		h2{
+			font-weight: 100;
+			margin-bottom: .3rem;
+		}
+		.is-active{
+			font-weight: 800;
+		}
+		#block-views-block-programmes-block-2{
+			.views-row{
+				width: 100%;
+                
+			}
+            
+		}
+	}
+}
+// nav{
+
+// 	// position: absolute;
+// 	// display: none;
+// }
+//footer
+
+footer{
+	*{
+		word-wrap: break-word;
+	}
+}