header

web/sites/development.services.yml

@@ -4,6 +4,9 @@
 # 'example.settings.local.php' file, which sits next to this file.
 parameters:
   http.response.debug_cacheability_headers: true
+  twig.config:
+    debug: true
+    cache: false
 services:
   cache.backend.null:
     class: Drupal\Core\Cache\NullBackendFactory

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

@@ -1162,30 +1162,50 @@ main h2 {
 a {
   color: inherit; }
 
-#header-top-right .header_top_rigth_container {
+.close-block, .open-block {
+  background: red;
+  cursor: pointer; }
+
+.header_top_left_container {
+  height: 3rem; }
+  .header_top_left_container #block-identitedusite {
+    height: 100%; }
+    .header_top_left_container #block-identitedusite 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; }
+  .header_top_middle_container .views-row {
+    display: inline-block;
+    width: auto; }
+
+#header-top-right .header_top_right_container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   background: #a1a1a1;
-  display: grid;
+  display: none;
   grid-template-columns: 5% 30% 30% 30% 5%;
   padding: 1rem 0;
   z-index: 100;
   line-height: 2; }
-  #header-top-right .header_top_rigth_container nav {
+  #header-top-right .header_top_right_container nav {
     grid-column-start: 2; }
-  #header-top-right .header_top_rigth_container a {
+  #header-top-right .header_top_right_container a {
     text-decoration: none;
     font-weight: 400; }
-    #header-top-right .header_top_rigth_container a:hover {
+    #header-top-right .header_top_right_container a:hover {
       text-decoration: underline; }
-  #header-top-right .header_top_rigth_container h2 {
+  #header-top-right .header_top_right_container h2 {
     font-weight: 100;
     margin-bottom: .3rem; }
-  #header-top-right .header_top_rigth_container .is-active {
+  #header-top-right .header_top_right_container .is-active {
     font-weight: 800; }
-  #header-top-right .header_top_rigth_container #block-views-block-programmes-block-2 .views-row {
+  #header-top-right .header_top_right_container #block-views-block-programmes-block-2-2 .views-row {
     width: 100%; }
 
 footer * {

web/themes/custom/popsu/lib/script.js

@@ -4,5 +4,14 @@ $(function(){
 	console.log("$ ready !!");
 	$('.last-news').slick();
 	$('.last-ressources').slick();
+
+	$('.close-block').click(function(){
+		$(this).parent().fadeOut();
+	});
+	$('.open-block').click(function(){
+		$(this).prev().fadeIn();
+	});
+
 	
-});
+});
+

web/themes/custom/popsu/partials/header.html.twig

@@ -1,5 +1,5 @@
 <header role="banner" class="columns small-12">
-    <section id="header-top" class="row">
+    <section id="header-top" class="row align-middle">
       <div id="header-top-left" class="columns small-2">
         {{ page.header_top_left }}
       </div>
@@ -7,9 +7,7 @@
         {{ page.header_top_middle }}
       </div>
       <div id="header-top-right" class="columns small-1">
-        <div class="button_burger">
-        </div>
-        {{ page.header_top_rigth }}
+        {{ page.header_top_right }}
       </div>
     </section>
     <section id="header-bottom">

web/themes/custom/popsu/popsu.info.yml

@@ -13,7 +13,7 @@ libraries:
 regions:
   header_top_left: 'Header top left'
   header_top_middle: 'Header top middle'
-  header_top_rigth: 'Header top right'
+  header_top_right: 'Header top right'
   header_bottom: 'Header Bottom'
   help: Help
   page_top: 'Page top'

web/themes/custom/popsu/popsu.theme

@@ -6,6 +6,13 @@
 
 use Drupal\Core\Template\Attribute;
 
+/* implements template_preprocess_views_view() */
+
+// function popsu_preprocess_views_view(&$vars) {
+//   $view = $vars['view'];
+//   kint($view);die();
+// }
+
 
 /* implements template_preprocess_views_view_unformatted() */
 
@@ -43,4 +50,13 @@ function popsu_preprocess_region(&$variables) {
     $variables['attributes']['class'][] = $variables['region'].'_container';
     
   }
-}
+}
+
+
+// function popsu_theme_suggestions_views_view_alter(array &$suggestions, array $variables) {
+//   $elem = $variables;
+//   //$suggestions[] = 'views_view__headerView';
+//     /*if($variables['elements']['#id'] == 'customsearchform'){
+//         $suggestions[] = 'block__custom_search_form';
+//     }*/
+// }

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

@@ -14,15 +14,55 @@ 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_rigth_container{
+	.header_top_right_container{
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: 100%;
 		background: rgb(161, 161, 161);
-		display: grid;
+		display: none;
 		grid-template-columns: 5% 30% 30% 30% 5%;
 		padding: 1rem 0;
 		z-index: 100;
@@ -45,7 +85,7 @@ a{
 		.is-active{
 			font-weight: 800;
 		}
-		#block-views-block-programmes-block-2{
+		#block-views-block-programmes-block-2-2{
 			.views-row{
 				width: 100%;
 			}

web/themes/custom/popsu/templates/blocks/block--menu-block.html.twig

@@ -48,4 +48,4 @@
   {% block content %}
     {{ content }}
   {% endblock %}
-</nav>
+</nav>

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

@@ -17,5 +17,12 @@
 {% if content %}
   <div{{ attributes }}>
     {{ content }}
+    <div class="close-block" >
+      close
+    </div>
   </div>
+  <div class="open-block" >
+      open
+  </div>
+    
 {% endif %}