Merge branch 'feature/425/navbar-chiffre-de-bulle-notification' into 'dev'

modification-navbar-et-css-pour-ajouter-pastille-de-notification

See merge request web-et-numerique/llle_project/ecolyo!22

src/components/ContentComponents/Navbar/Navbar.tsx

@@ -40,14 +40,10 @@ export const Navbar = ({ t }: NavbarProps) => {
               className="c-nav-link"
               activeClassName="is-active"
             >
-              <Icon
-                className="c-nav-icon off"
-                icon={
-                  challengeNotification
-                    ? ChallengeIconOffNotif
-                    : ChallengeIconOff
-                }
-              />
+              {challengeNotification && (
+                <div className="nb-challenge-notif">1</div>
+              )}
+              <Icon className="c-nav-icon off" icon={ChallengeIconOff} />
               <Icon className="c-nav-icon on" icon={ChallengeIconOn} />
               {t('Nav.challenges')}
             </NavLink>

src/styles/components/_nav.scss

@@ -84,3 +84,24 @@
     box-shadow: unset;
   }
 }
+
+.nb-challenge-notif {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 42px;
+  bottom: 22px;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: $dark-light;
+  border-radius: 50%;
+  border: 1px solid $dark-light;
+  z-index: 1;
+  background: $blue-radial-gradient;
+  font-size: 12px;
+  @media #{$tablet} {
+    left: 25px;
+    bottom: unset;
+  }
+}