From da931f6f3847c7fa1fbc095c695e0ee4db8432d7 Mon Sep 17 00:00:00 2001
From: Gauthier <ext.sopra.glefevre@grandlyon.com>
Date: Wed, 3 Jun 2020 14:33:37 +0200
Subject: [PATCH]
modification-navbar-et-css-pour-ajouter-pastille-de-notification
---
src/components/ContentComponents/Navbar/Navbar.tsx | 12 ++++--------
src/styles/components/_nav.scss | 11 +++++++++++
2 files changed, 15 insertions(+), 8 deletions(-)
diff --git a/src/components/ContentComponents/Navbar/Navbar.tsx b/src/components/ContentComponents/Navbar/Navbar.tsx
index 3b20f0257..1d85441cb 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 ec1db7f55..a476bb206 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;
+}
--
GitLab