Responsive header sizing

[ClementGib]

          Create issue to optimize responsive header sizing

_Originally posted by @ClementGib in https://github.com/ClementGib/WedForm/pull/1#discussion_r1083320627_

[ClementGib]

Rework the responsive behavior for the header (navbar)

[ClementGib]

[Sabevi]

-I suggest a new way of doing your header: using flexbox (and not using row col). Because in normal CSS a good way of creating a responsive CSS is by using flexbox and not grid. -In the mobile version, I have put in place an horizontal scroll

-The only new issue is that I removed this (the small golden line when you select an element): because it used the row col logic and honestly I think that the interface looks lighter, nicer without it (but this is only my opinion)

• This is the new code for the WHOLE header.component.html

<nav class="container-fluid">
  <div class="unselectable-content row justify-content-center">
    <img alt="image du logo" i18n-alt class="col-11 col-sm-10 col-md-8 mt-2 mt-md-4" src="/assets/images/logo.png"/>
  </div>
  <div class="unselectable-content row">
    <div class="text-center col-12 mt-4 mt-sm-4 mt-md-5">
      <h1 class="navbar-title mt-sm-3 mt-md-3">Huyen & Clément</h1>
      <div class="col-sm-10 col-md-10 col-lg-8 d-flex justify-content-end mt-2">
        <p class="navbar-subtitle">{{dDay | date:'longDate'}}</p>
      </div>
    </div>
  </div>
  <div class="container mt-5">
    <div class="d-flex">
      <a class="navbar-link unselectable-content" routerLink="/home"
        routerLinkActive="active-link">
        <span i18n>ACCUEIL</span>
      </a>
      <a class="navbar-link unselectable-content" routerLink="/information"
        routerLinkActive="active-link">
        <span i18n>INFORMATION</span>
      </a>
      <a class="navbar-link unselectable-content" routerLink="/register"
        routerLinkActive="active-link">
        <span i18n>INSCRIPTION</span>
      </a>
      <a class="navbar-link unselectable-content " routerLink="/photo"
        routerLinkActive="active-link">
        <span i18n>ALBUM</span>
      </a>
    </div>
    <div class="mt-3">
      <hr class="navbar-line col-12">
      <hr class="navbar-subline unselectable-content">
      <hr class="navbar-subline unselectable-content">
      <hr class="navbar-subline unselectable-content">
      <hr class="navbar-subline unselectable-content">
    </div>
  </div>
</nav>

• This is the new code for header.component.scss, I simply ADDED this code:

.container .d-flex {
  justify-content: space-around;
}

@media(max-width: 900px){
  .navbar-link span{
    font-size: 25px;
  }
}

@media(max-width: 700px){
  .navbar-link span{
    font-size: 18px;
  }
}

@media(max-width: 450px){
  .container .d-flex {
    overflow: scroll;
    justify-content: start;
  }

  .container .d-flex a {
    padding: 5px;
  }
}

(An extra thing I would do, is to reduce the distance btw the golden line and the menu elements in the mobile version)

Good luck!!!

[ClementGib]

Thanks for this solution, I need to work on it, for now it's not a priority. I'll try to apply your solution but I need to keep the small golden line recommended by my designer friend. I think for small size (smartphone) I need to rework the whole header ... :cry: