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

src/components/ContentComponents/Navbar/Navbar.tsx

@@ -39,14 +39,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="icons-notif nb-defis-notif text-14-bold">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

@@ -76,3 +76,14 @@
     box-shadow: unset;
   }
 }
+
+.nb-defis-notif {
+  position: absolute;
+  left: 25px;
+  padding: 4px;
+  border-radius: 50%;
+  width: 0.65rem;
+  height: 0.65rem;
+  z-index: 1;
+  background: $blue-radial-gradient;
+}