header et menu v0

web/themes/custom/popsu/css/styles.css

@@ -1162,34 +1162,98 @@ main h2 {
 a {
   color: inherit; }
 
-.close-block, .open-block {
+iframe {
-  background: red;
+  display: none; }
-  cursor: pointer; }
+
+/*pages*/
+#header-top {
+  height: 3rem; }
 
 .header_top_left_container {
-  height: 3rem; }
-  .header_top_left_container #block-identitedusite {
   height: 100%; }
-    .header_top_left_container #block-identitedusite a[rel~='home'] {
+  .header_top_left_container > div:first-child {
+    height: 100%; }
+  .header_top_left_container a[rel~='home'] {
     height: 100%;
     display: block;
     color: transparent;
     background: left/contain no-repeat url(../images/popsu-home-logo.png); }
 
 .header_top_middle_container {
-  background: red; }
+  height: 100%; }
+  .header_top_middle_container .views-element-container {
+    height: 100%; }
+    .header_top_middle_container .views-element-container > div:first-child {
+      height: 100%; }
+      .header_top_middle_container .views-element-container > div:first-child > div:first-child {
+        height: 100%;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        align-items: center; }
   .header_top_middle_container .views-row {
+    text-align: center;
     display: inline-block;
     width: auto; }
+    .header_top_middle_container .views-row a {
+      text-transform: uppercase;
+      text-decoration: none;
+      font-weight: 600; }
+    .header_top_middle_container .views-row .views-field-title {
+      display: inline-block;
+      width: auto;
+      padding: .2rem .5rem; }
+  .header_top_middle_container .popsu-node-3 .views-field-title {
+    color: blue; }
+    .header_top_middle_container .popsu-node-3 .views-field-title:hover {
+      background: blue;
+      color: white; }
+  .header_top_middle_container .popsu-node-5 .views-field-title {
+    color: wheat; }
+    .header_top_middle_container .popsu-node-5 .views-field-title:hover {
+      background: wheat;
+      color: white; }
+  .header_top_middle_container .popsu-node-7 .views-field-title {
+    color: red; }
+    .header_top_middle_container .popsu-node-7 .views-field-title:hover {
+      background: red;
+      color: white; }
+
+.close-block, .open-block {
+  cursor: pointer; }
+  .close-block span, .open-block span {
+    display: block;
+    width: 33px;
+    height: 2px;
+    position: relative;
+    background: black;
+    border-radius: 3px;
+    z-index: 1; }
+
+.close-block {
+  padding-top: 1rem; }
+  .close-block span {
+    transform-origin: center; }
+  .close-block > div > span:first-child {
+    transform: translateY(57%) rotate(45deg); }
+  .close-block > div > span:nth-child(2) {
+    transform: rotate(-45deg); }
+
+.open-block {
+  height: 100%;
+  display: grid;
+  align-items: center; }
+  .open-block span {
+    margin-bottom: 5px;
+    transform-origin: 4px 0px; }
 
 #header-top-right .header_top_right_container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  background: #a1a1a1;
+  background: white;
   display: none;
-  grid-template-columns: 5% 30% 30% 30% 5%;
+  grid-template-columns: 10% 25% 25% 30% 10%;
   padding: 1rem 0;
   z-index: 100;
   line-height: 2; }
@@ -1205,21 +1269,12 @@ a {
     margin-bottom: .3rem; }
   #header-top-right .header_top_right_container .is-active {
     font-weight: 800; }
-  #header-top-right .header_top_right_container #block-views-block-programmes-block-2-2 .views-row {
+  #header-top-right .header_top_right_container #block-views-block-programmes-block-2 .views-row {
     width: 100%; }
 
 footer * {
   word-wrap: break-word; }
 
-iframe {
-  display: none; }
-
-/*pages*/
-#header-top-right {
-  background: yellow; }
-  #header-top-right .views-row {
-    display: inline-block; }
-
 .about {
   background: lightblue;
   text-align: center; }

web/themes/custom/popsu/gulpfile.js

@@ -77,7 +77,7 @@ gulp.task('packing', function () {
 gulp.task('watch', function(){
     livereload.listen();
 
-    gulp.watch('./sass/**/*.scss', ['sass']);
+    gulp.watch('./sass/**/**/*.scss', ['sass']);
     gulp.watch('./lib/*.js', ['packing']);
     gulp.watch(['./css/style.css', './**/*.twig', './js/*.js'], function (files){
         livereload.changed(files)

web/themes/custom/popsu/popsu.theme

@@ -53,49 +53,58 @@ function popsu_preprocess_region(&$variables) {
 }
 
 
+
+// function popsu_theme_suggestions_views_view_alter(array &$suggestions, array $variables) {
+//   $v = $variables;
+//   $suggestions[] = 'views_view__headerView';
+// }
+
 /**
  * Implements hook_preprocess_block().
  */
+// function popsu_preprocess_block(&$variables) {
+//   $t="t";
+// }
 
- function popsu_preprocess_views_view_field(&$variables){
+// function popsu_preprocess_views_view_field(&$variables){
-  // check if link to entoty option is true
+//   // check if link to entoty option is true
-  $settings = $variables['field']->options['settings']; 
+//   $settings = $variables['field']->options['settings']; 
-  if ($settings['link_to_entity']) {
+//   if ($settings['link_to_entity']) {
-    // get the entity and build the classes
+//     // get the entity and build the classes
-    $entity = $variables['row']->_entity;
+//     $entity = $variables['row']->_entity;
-    // build new classes
+//     // build new classes
-    $new_classes = array(
+//     $new_classes = array(
-      $entity->getEntityTypeId(),
+//       $entity->getEntityTypeId(),
-      $entity->getEntityTypeId().'-'.$entity->bundle(),
+//       $entity->getEntityTypeId().'-'.$entity->bundle(),
-      $entity->getEntityTypeId().'-'.$entity->bundle().'-'.$entity->id()
+//       $entity->getEntityTypeId().'-'.$entity->bundle().'-'.$entity->id()
-    );
+//     );
     
-    // get the entity link and url
+//     // get the entity link and url
-    $link = $entity->toLink(); 
+//     $link = $entity->toLink(); 
-    $url = $entity->toLink()->getUrl();
+//     $url = $entity->toLink()->getUrl();
 
-    // set the active_class option to the url
+//     // set the active_class option to the url
-    $url->setOption('set_active_class', true);
+//     $url->setOption('set_active_class', true);
 
-    // add new classes to the url (without overwriting existing once)
+//     // add new classes to the url (without overwriting existing once)
-    $options = $url->getOptions();
+//     $options = $url->getOptions();
-    if(isset($options['attributes']) && $attributes = $options['attributes']){
+//     if(isset($options['attributes']) && $attributes = $options['attributes']){
-      if(isset($attributes['class']) && $classes = $attributes['class']){
+//       if(isset($attributes['class']) && $classes = $attributes['class']){
-        $attributes['class'] +=  $new_classes;
+//         $attributes['class'] +=  $new_classes;
-      }else{
+//       }else{
-        $attributes['class'] = $new_classes;
+//         $attributes['class'] = $new_classes;
-      }
+//       }
-    }else{
+//     }else{
-      $attributes = array(
+//       $attributes = array(
-        "class" => $new_classes
+//         "class" => $new_classes
-      );
+//       );
-    }
+//     }
-    $url->setOption('attributes', $attributes);
+//     $url->setOption('attributes', $attributes);
 
-    // update the url of the link
+//     // update the url of the link
-    $link->setUrl($url);
+//     $link->setUrl($url);
 
-    // overwrite the output
+//     // overwrite the output
-    $variables['output'] = $link->toRenderable();
+//     $variables['output'] = $link->toRenderable();
-  } 
+//   } 
-}
+// }

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;
+	}
+}

web/themes/custom/popsu/sass/setup/_globals.scss

@@ -14,96 +14,6 @@ main{
 a{
 	color:inherit;
 }
-.close-block, .open-block{
-	background: red;
-	cursor:pointer;
-}
-
-//header
-
-.header_top_left_container{
-	height: 3rem;
-	#block-identitedusite{
-		height: 100%;
-		// max-height: 5rem;
-		a[rel~='home']{
-			height: 100%;
-			display: block;
-			color: transparent;
-			background: left / contain no-repeat url(../images/popsu-home-logo.png);
-		}
-		
-	}
-}
-
-.header_top_middle_container{
-	background: red;
-
-
-	// div{
-	// 	div{
-	// 		div:first-child{
-	// 			display: grid;
-	// 			grid-template-columns: repeat(3, 1fr);
-	// 		}
-	// 	}
-	// }
-	//how to access the view js id
-	.views-row{
-		display: inline-block;
-		width: auto;
-	}
-}
-
-#header-top-right{
-	.header_top_right_container{
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		background: rgb(161, 161, 161);
-		display: none;
-		grid-template-columns: 5% 30% 30% 30% 5%;
-		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-2{
-			.views-row{
-				width: 100%;
-			}
-		}
-	}
-}
-nav{
-
-	// position: absolute;
-	// display: none;
-}
-//footer
-
-footer{
-	*{
-		word-wrap: break-word;
-	}
-}
 
 //TEMP
 iframe{

web/themes/custom/popsu/sass/setup/_variables.scss

@@ -5,7 +5,7 @@ $font-normal: .6rem;
 
 $col-met: red; 
 $col-eur: blue;
-$col-reg: green; 
+$col-mond: wheat; 
 @media (min-width: 48rem) {
 	:root {
 	  font-size: calc(1rem + ((1vw - .48rem) * 1.389));

web/themes/custom/popsu/sass/styles.scss

@@ -24,6 +24,6 @@
 @import "setup/globals";
 
 /*pages*/
-@import "pages/header";
+@import "pages/partials/header_footer";
 @import "pages/home";
 @import "pages/default";

web/themes/custom/popsu/templates/regions/region--header-top-right.html.twig

@@ -18,11 +18,18 @@
   <div{{ attributes }}>
     {{ content }}
     <div class="close-block" >
-      close
+      <div>
+        <span></span>
+        <span></span>
+      </div>
     </div>
   </div>
   <div class="open-block" >
-      open
+    <div>
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
   </div>
     
 {% endif %}