Merge pull request #35 from Code-the-Dream-School/AlarmIconOnMainNav

Moved Alarm Button no functionality added
Code-the-Dream-School · Dec 12, 2024 · 3c635f5 · 3c635f5
2 parents 4899e10 + 1d4288f
commit 3c635f5
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -3,6 +3,7 @@ import Logo from './Logo';
 import { FaAlignLeft } from 'react-icons/fa';
 import { useDashboardContext } from '../pages/Dashboard';
 import { LogoutContainer } from '.';
+import { TbBellFilled } from 'react-icons/tb';
 
 const Navbar = () => {
     const { toggleSidebar } = useDashboardContext();
@@ -17,6 +18,9 @@ const Navbar = () => {
                     <h4 className="logo-text">MediStock</h4>
                 </div>
                 <div className="btn-container">
+                    <button className="bell-button">
+                        <TbBellFilled className="bell-icon" />
+                    </button>
                     <LogoutContainer />
                 </div>
             </div>
@@ -73,5 +77,15 @@ const Wrapper = styled.nav`
             display: block;
             color: var(--color-blue-dark);
         }
+        .bell-button {
+            border: 15px solid var(--color-alert);
+            border-radius: 50%;
+            margin-right: 1rem;
+        }
+        .bell-icon {
+            font-size: 1.5rem;
+            background-color: var(--color-alert);
+            color: white;
+        }
     }
 `;