added icons to sidebar

anand-harsh · Feb 2, 2024 · 576dced · 576dced
1 parent 4ac7aca
commit 576dced
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 19 deletions.
diff --git a/client/src/components/Layout/Header/Header.jsx b/client/src/components/Layout/Header/Header.jsx
@@ -1,5 +1,15 @@
 import React from 'react';
 import { RiMenu5Fill, RiLogoutBoxLine, RiDashboardFill } from 'react-icons/ri';
+import {
+  FcHome,
+  FcInfo,
+  FcFeedback,
+  FcSupport,
+  FcDoNotInsert,
+  FcDocument,
+  FcReading,
+  FcFolder,
+} from 'react-icons/fc';
 import {
   Drawer,
   VStack,
@@ -78,26 +88,51 @@ const Header = () => {
           <DrawerBody>
             <VStack spacing={'4'} alignItems="flex-start">
               {/* LinkButtons in the sidebar */}
-              <LinkButton url="/" title="Home" closingHandler={onClose} />
-              <LinkButton
-                url="/courses"
-                title="Browse All Courses"
-                closingHandler={onClose}
-              />
-              <LinkButton
-                url="/request"
-                title="Request A Course"
-                closingHandler={onClose}
-              />
-                <LinkButton url="/notes" title="Notes" closingHandler={onClose} />
-
-              <LinkButton
-                url="/contact"
-                title="Contact"
-                closingHandler={onClose}
-              />
-              <LinkButton url="/about" title="About" closingHandler={onClose} />
+              <div className="sidebar-components">
+                <LinkButton url="/" title="Home" closingHandler={onClose} />
+                <FcHome className="icon-sidebar" />
+              </div>
+              <div className="sidebar-components">
+                <LinkButton
+                  url="/courses"
+                  title="Browse All Courses"
+                  closingHandler={onClose}
+                />
+                <FcFolder className="icon-sidebar" />
+              </div>
+              <div className="sidebar-components">
+                <LinkButton
+                  url="/request"
+                  title="Request A Course"
+                  closingHandler={onClose}
+                />
+                <FcReading className="icon-sidebar" />
+              </div>
+              <div className="sidebar-components">
+                <LinkButton
+                  url="/notes"
+                  title="Notes"
+                  closingHandler={onClose}
+                />
+                <FcDocument className="icon-sidebar" />
+              </div>
 
+              <div className="sidebar-components">
+                <LinkButton
+                  url="/contact"
+                  title="Contact"
+                  closingHandler={onClose}
+                />
+                <FcFeedback className="icon-sidebar" />
+              </div>
+              <div className="sidebar-components">
+                <LinkButton
+                  url="/about"
+                  title="About"
+                  closingHandler={onClose}
+                />
+                <FcInfo className="icon-sidebar" />
+              </div>
               {/* Profile, Logout, and Dashboard Button in sidebar */}
               <HStack
                 justifyContent={'space-evenly'}

diff --git a/client/src/components/Layout/Header/header.css b/client/src/components/Layout/Header/header.css
@@ -24,3 +24,17 @@
 .course:hover{
     transform: translateY(1rem);
 }
+
+.sidebar-components{
+    display: flex;
+}
+.icon-sidebar{
+    margin-top: 10px;
+    font-size: 26px;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+}
+
+.icon-sidebar:hover {
+    transform: scale(1.3);
+}