diff --git a/src/components/ContentComponents/Navbar/Navbar.tsx b/src/components/ContentComponents/Navbar/Navbar.tsx index 3b20f0257caa7a2e1603d396dd92f1dcc296f0e0..1d85441cb5bb5c823d9c54194a6310c8f249a4ee 100644 --- a/src/components/ContentComponents/Navbar/Navbar.tsx +++ b/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> diff --git a/src/styles/components/_nav.scss b/src/styles/components/_nav.scss index ec1db7f555bc615166b4b8f493e8de82ff453579..a476bb206d4c8703b83c17babefac8e8f7b1d7c5 100644 --- a/src/styles/components/_nav.scss +++ b/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; +}