From 4cc2a15231feca868fe534719a1df237a652924c Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian_thierry@ext.connect-tech.sncf>
Date: Wed, 12 Jun 2024 13:36:16 +0200
Subject: [PATCH] Responsive styling of header.

---
 .../components/header/header.component.scss   | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/header/header.component.scss b/frontend/src/app/components/header/header.component.scss
index 0433994..db52770 100644
--- a/frontend/src/app/components/header/header.component.scss
+++ b/frontend/src/app/components/header/header.component.scss
@@ -51,7 +51,7 @@ $headerHeight: 3.5em;
                 color: white;
                 text-decoration: none;
                 gap: .5em;
-
+                
                 img {
                     $imageSize: 2em;
                     width: $imageSize;
@@ -60,6 +60,12 @@ $headerHeight: 3.5em;
     
                 .title {
                     font-size: 1.5em;
+                    opacity: 0;
+                    transition: opacity .2s ease-in-out;
+
+                    @media screen and (min-width: 600px) {
+                        opacity: 1;
+                    }
                 }
             }
         }
@@ -69,9 +75,38 @@ $headerHeight: 3.5em;
             
             .search-bar {
                 flex: 1;
-                max-width: 50em;
                 $borderRadiusValue: 10em;
                 position: relative;
+                max-width: 12em;
+                transition: max-width .2s ease-in-out;
+                
+                @media screen and (min-width: 435px) {
+                    max-width: 16em;
+                }
+
+                @media screen and (min-width: 500px) {
+                    max-width: 20em;
+                }
+
+                @media screen and (min-width: 700px) {
+                    max-width: 24em;
+                }
+
+                @media screen and (min-width: 800px) {
+                    max-width: 32em;
+                }
+
+                @media screen and (min-width: 900px) {
+                    max-width: 38em;
+                }
+
+                @media screen and (min-width: 1000px) {
+                    max-width: 45em;
+                }
+
+                @media screen and (min-width: 1100px) {
+                    max-width: 50em;
+                }
 
                 input {
                     flex: 1;