program page - start filter system

assets/css/src/generic.css

@@ -149,3 +149,7 @@
 .session__info > p:not(:last-child) {
   margin-bottom: 1rem;
 }
+
+.strong {
+  font-weight: bolder;
+}

site/templates/program.php

@@ -17,7 +17,8 @@
 >
   <div class="program-data"
     x-data="{
-      tab: setInitialTab()
+      tab: setInitialTab(),
+      filter: null
     }"
   >
   
@@ -25,26 +26,46 @@
       <button 
         x-data="{title: 'Calendrier'}"
         x-text="title"
+        :class="tab === title ? 'strong' : ''"
         @click="tab = title"
       ></button>
       <button
-        x-data="{title: 'Spectacles'}"
+        x-data="{
+          title: 'Spectacles',
+          get filterTitle() {
+            return 'Calendrier — ' + this.title
+          }
+        }"
         x-text="title"
-        @click="tab = title"
+        :class="tab === filterTitle ? 'strong' : ''"
+        @click="tab = filterTitle; filter = title"
       ></button>
       <button
-        x-data="{title: 'Autres événements'}"
+        x-data="{
+          title: 'Autres événements',
+          get filterTitle() {
+            return 'Calendrier — ' + this.title
+          }
+        }"
         x-text="title"
-        @click="tab = title"
+        :class="tab === filterTitle ? 'strong' : ''"
+        @click="tab = filterTitle; filter = title"
       ></button>
       <button
-        x-data="{title: 'Ici & Là'}"
+        x-data="{
+          title: 'Ici & Là',
+          get filterTitle() {
+            return 'Calendrier — ' + this.title
+          }
+        }"
         x-text="title"
-        @click="tab = title"
+        :class="tab === filterTitle ? 'strong' : ''"
+        @click="tab = filterTitle; filter = title"
       ></button>
       <button
         x-data="{title: 'Saisons précédentes'}"
         x-text="title"
+        :class="tab === title ? 'strong' : ''"
         @click="tab = title"
       ></button>
     </section>
@@ -67,7 +88,7 @@
     </template>
 
     <!-- Calendrier -->
-    <template x-if="tab === 'Calendrier'">
+    <template x-if="tab.includes('Calendrier')">
       <div class="program-content__events">
         <section class="collapsable-sections">
           <?php foreach($currentSeasonSessions as $month => $sessions): ?>