From d89d8ac79b6c04158ed570df32c3b1c1ec8a64bc Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 27 Aug 2024 15:01:37 +0200
Subject: [PATCH] expanded-nav - adjust ticketing

---
 assets/css/src/footer.css  | 11 -----------
 assets/css/src/generic.css | 14 ++++++++++++++
 assets/css/src/nav.css     | 23 +++++++++++++++++++++--
 assets/css/src/ticket.css  | 10 ++++++----
 site/snippets/nav.php      | 16 ++++++++++++++++
 site/templates/home.php    |  2 +-
 6 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/assets/css/src/footer.css b/assets/css/src/footer.css
index 918bdbf..a9be888 100644
--- a/assets/css/src/footer.css
+++ b/assets/css/src/footer.css
@@ -11,8 +11,6 @@
 }
 
 .main-footer .social-icons {
-  display: flex;
-  column-gap: 1.15rem;
   margin-bottom: 2rem;
 }
 
@@ -25,12 +23,3 @@
 .main-footer form input::after {
   content: "→";
 }
-
-.main-footer .social-icons a svg {
-  transform: scale(1);
-  transition: transform 0.2s ease-in-out;
-}
-
-.main-footer .social-icons a:hover svg {
-  transform: scale(1.15);
-}
diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css
index f1af8c3..f2d59f5 100644
--- a/assets/css/src/generic.css
+++ b/assets/css/src/generic.css
@@ -46,3 +46,17 @@ body.progress * {
 .logo > *:not(:first-child) {
   margin-left: 2.4ch;
 }
+
+.social-icons {
+  display: flex;
+  column-gap: 1.15rem;
+}
+
+.social-icons a svg {
+  transform: scale(1);
+  transition: transform 0.2s ease-in-out;
+}
+
+.social-icons a:hover svg {
+  transform: scale(1.15);
+}
diff --git a/assets/css/src/nav.css b/assets/css/src/nav.css
index cd0fb5d..abd8dac 100644
--- a/assets/css/src/nav.css
+++ b/assets/css/src/nav.css
@@ -12,13 +12,13 @@
   position: fixed;
   width: 100%;
   box-sizing: border-box;
-  top: -32rem;
+  top: -34rem;
   z-index: 2;
   background-color: var(--color-brown-light);
   display: grid;
   grid-template-columns: 2fr 8fr 1fr;
   transition: top 0.4s var(--curve-quick-slow);
-  padding: 2rem var(--space-m) 2rem 1rem;
+  padding: 3rem var(--space-m) 3rem 1rem;
   border-bottom: var(--border);
 }
 .expanded-nav.open {
@@ -68,6 +68,25 @@
   font-size: var(--font-size-s);
 }
 
+.expanded-nav__ticketing a {
+  display: flex;
+  align-items: center;
+}
+
+.expanded-nav__links {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.expanded-nav__ticketing .ticket {
+  margin-right: 1rem;
+}
+
+.expanded-nav__links .social-icons {
+  margin-top: 1rem;
+}
+
 /* Header */
 
 .main-nav {
diff --git a/assets/css/src/ticket.css b/assets/css/src/ticket.css
index 62e6a32..4129d7c 100644
--- a/assets/css/src/ticket.css
+++ b/assets/css/src/ticket.css
@@ -41,18 +41,20 @@ a:hover .ticket svg,
   animation: vibrate 0.5s forwards;
 }
 
-.ticket:hover svg path:not(.dot) {
+.ticket:hover svg path:not(.dot),
+a:hover .ticket svg path:not(.dot) {
   fill: var(--color-salmon);
   stroke: var(--color-salmon);
 }
-a:hover .ticket svg path:not(.dot) {
+a.to-blank:hover .ticket svg path:not(.dot) {
   fill: #fff;
   stroke: #fff;
 }
 
-.ticket:hover svg path.dot {
+.ticket:hover svg path.dot,
+a:hover .ticket svg path.dot {
   fill: #fff;
 }
-a:hover .ticket svg path.dot {
+a.to-blank:hover .ticket svg path.dot {
   fill: var(--color-salmon);
 }
diff --git a/site/snippets/nav.php b/site/snippets/nav.php
index 09f55a0..8e9024e 100644
--- a/site/snippets/nav.php
+++ b/site/snippets/nav.php
@@ -60,6 +60,22 @@
           </ul>
         </li>
     <?php endforeach ?>
+    <li class="expanded-nav__links">
+      <div class="expanded-nav__ticketing">
+        <a href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
+      </div>
+      <div class="expanded-nav__socials">
+        <strong>Suivez-nous</strong>
+        <ul class="social-icons">
+          <li>
+            <a href="<?= $site->instagram() ?>" class="invert" target="_blank" title="Voir la page Instagram du NTB"><?= svg('assets/images/icons/instagram.svg') ?></a>
+          </li>
+          <li>
+            <a href="<?= $site->facebook() ?>" class="invert" target="_blank" title="Voir la page Facebook du NTB"><?= svg('assets/images/icons/facebook.svg') ?></a>
+          </li>
+        </ul>
+      </div>
+    </li>
   </ul>
   <button class="close-btn" title="Fermer le menu">
     <span class="sr-only">Fermer le menu</span>
diff --git a/site/templates/home.php b/site/templates/home.php
index dea2b8d..32bdb38 100644
--- a/site/templates/home.php
+++ b/site/templates/home.php
@@ -32,7 +32,7 @@
 
 <section class="callout">
   <h4><?= $site->callout() ?></h4>
-  <a href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
+  <a class="to-blank" href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
 </section>
 
 <?php snippet('footer') ?>
\ No newline at end of file