Update src/components/shared/Header.tsx

src/components/shared/Header.tsx

@@ -1,8 +1,8 @@
 import { useLocation } from "react-router-dom";
 import {
-  LayoutDashboard,
-  BookOpen,
-  CalendarDays,
+  // LayoutDashboard,
+  // BookOpen,
+  // CalendarDays,
   Plus,
   User,
   Settings,
@@ -20,6 +20,63 @@ import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import Logo from "./Logo";
 
+const LayoutDashboard = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M15.2127 14.5406C15.3937 14.5406 15.5619 14.4433 15.6439 14.2819C16.1591 13.2693 16.4495 12.123 16.4495 10.909C16.4495 6.79475 13.1142 3.45941 8.99987 3.45941C4.88559 3.45941 1.55029 6.79475 1.55029 10.909C1.55029 12.123 1.8407 13.2693 2.35581 14.2819C2.4379 14.4433 2.60602 14.5406 2.78708 14.5406H15.2127Z" stroke="#2B2D3B" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M9.76179 12.1088C9.31188 12.5587 8.58242 12.5587 8.13251 12.1088C7.6826 11.6589 7.6826 10.9294 8.13251 10.4795C8.43502 10.177 10.7947 8.55389 12.3084 7.52282C12.5809 7.33724 12.904 7.66043 12.7185 7.93288C11.6874 9.44659 10.0643 11.8063 9.76179 12.1088Z" fill="#2B2D3B" />
+    </svg>
+  )
+}
+
+const LayoutDashboardLight = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M15.2132 14.5406C15.3942 14.5406 15.5623 14.4433 15.6444 14.2819C16.1595 13.2693 16.4499 12.123 16.4499 10.909C16.4499 6.79475 13.1146 3.45941 9.00036 3.45941C4.88608 3.45941 1.55078 6.79475 1.55078 10.909C1.55078 12.123 1.84118 13.2693 2.3563 14.2819C2.43839 14.4433 2.60651 14.5406 2.78757 14.5406H15.2132Z" stroke="#4C60E5" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M9.76228 12.1088C9.31237 12.5587 8.58291 12.5587 8.133 12.1088C7.68309 11.6589 7.68308 10.9294 8.133 10.4795C8.43551 10.177 10.7952 8.55389 12.3089 7.52282C12.5813 7.33724 12.9045 7.66043 12.7189 7.93288C11.6879 9.44659 10.0648 11.8063 9.76228 12.1088Z" fill="#4C60E5" />
+    </svg>
+
+  )
+}
+
+const BookOpen = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M8.89431 5.36141C8.89431 4.58941 8.58763 3.84902 8.04174 3.30313C7.49585 2.75724 6.75547 2.45056 5.98346 2.45056H1.61719V13.3662H6.71117C7.29018 13.3662 7.84547 13.5963 8.25489 14.0057C8.6643 14.4151 8.89431 14.9704 8.89431 15.5494M8.89431 5.36141V15.5494M8.89431 5.36141C8.89431 4.58941 9.20023 3.84902 9.74612 3.30313C10.292 2.75724 11.0324 2.45056 11.8044 2.45056H16.1707V13.3662H11.0767C10.4977 13.3662 9.9424 13.5963 9.53298 14.0057C9.12356 14.4151 8.89431 14.9704 8.89431 15.5494" stroke="#2B2D3B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  )
+}
+const BookOpenLight = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.89431 5.36141C8.89431 4.58941 8.58763 3.84902 8.04174 3.30313C7.49585 2.75724 6.75547 2.45056 5.98346 2.45056H1.61719V13.3662H6.71117C7.29018 13.3662 7.84547 13.5963 8.25489 14.0057C8.6643 14.4151 8.89431 14.9704 8.89431 15.5494M8.89431 5.36141V15.5494M8.89431 5.36141C8.89431 4.58941 9.20023 3.84902 9.74612 3.30313C10.292 2.75724 11.0324 2.45056 11.8044 2.45056H16.1707V13.3662H11.0767C10.4977 13.3662 9.9424 13.5963 9.53298 14.0057C9.12356 14.4151 8.89431 14.9704 8.89431 15.5494" stroke="#4C60E5" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    
+
+  )
+}
+
+const CalendarDays = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M16.7524 8.99998C16.7524 10.018 16.5519 11.0261 16.1623 11.9666C15.7727 12.9071 15.2017 13.7617 14.4818 14.4816C13.762 15.2014 12.9074 15.7725 11.9668 16.162C11.0263 16.5516 10.0182 16.7521 9.00022 16.7521C7.98219 16.7521 6.97413 16.5516 6.03359 16.162C5.09305 15.7725 4.23846 15.2014 3.51861 14.4816C2.79875 13.7617 2.22773 12.9071 1.83815 11.9666C1.44856 11.0261 1.24805 10.018 1.24805 8.99998C1.24805 6.94397 2.06479 4.97218 3.51861 3.51836C4.97242 2.06455 6.94422 1.2478 9.00022 1.2478C11.0562 1.2478 13.028 2.06455 14.4818 3.51836C15.9356 4.97218 16.7524 6.94397 16.7524 8.99998Z" stroke="#1D1D25" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M7.03701 12.1269C6.23143 12.4315 5.82864 12.5838 5.62311 12.3778C5.41758 12.1717 5.57096 11.7693 5.87773 10.9645L6.70482 8.79481C6.98729 8.05378 7.12853 7.68327 7.40012 7.41139C7.6717 7.13951 8.04207 6.99788 8.78279 6.7146L10.9673 5.87919C11.7709 5.57189 12.1726 5.41825 12.3789 5.62335C12.5852 5.82846 12.4339 6.23111 12.1313 7.03642L11.3181 9.20007C11.0361 9.95064 10.895 10.3259 10.6208 10.6008C10.3465 10.8756 9.97148 11.0174 9.22149 11.301L7.03701 12.1269Z" stroke="#1D1D25" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+      <ellipse cx="9.00012" cy="9" rx="0.746218" ry="0.746218" fill="black" />
+    </svg>
+
+  )
+}
+const CalendarDaysLight = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M16.7524 8.99998C16.7524 10.018 16.5519 11.0261 16.1623 11.9666C15.7727 12.9071 15.2017 13.7617 14.4818 14.4816C13.762 15.2014 12.9074 15.7725 11.9668 16.162C11.0263 16.5516 10.0182 16.7521 9.00022 16.7521C7.98219 16.7521 6.97413 16.5516 6.03359 16.162C5.09305 15.7725 4.23846 15.2014 3.51861 14.4816C2.79875 13.7617 2.22773 12.9071 1.83815 11.9666C1.44856 11.0261 1.24805 10.018 1.24805 8.99998C1.24805 6.94397 2.06479 4.97218 3.51861 3.51836C4.97242 2.06455 6.94422 1.2478 9.00022 1.2478C11.0562 1.2478 13.028 2.06455 14.4818 3.51836C15.9356 4.97218 16.7524 6.94397 16.7524 8.99998Z" stroke="#4C60E5" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M7.03701 12.1269C6.23143 12.4315 5.82864 12.5838 5.62311 12.3778C5.41758 12.1717 5.57096 11.7693 5.87773 10.9645L6.70482 8.79481C6.98729 8.05378 7.12853 7.68327 7.40012 7.41139C7.6717 7.13951 8.04207 6.99788 8.78279 6.7146L10.9673 5.87919C11.7709 5.57189 12.1726 5.41825 12.3789 5.62335C12.5852 5.82846 12.4339 6.23111 12.1313 7.03642L11.3181 9.20007C11.0361 9.95064 10.895 10.3259 10.6208 10.6008C10.3465 10.8756 9.97148 11.0174 9.22149 11.301L7.03701 12.1269Z" stroke="#4C60E5" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+      <ellipse cx="9.00012" cy="9" rx="0.746218" ry="0.746218" fill="#4C60E5" />
+    </svg>
+  )
+}
+
+
 const Header = () => {
   const location = useLocation();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -29,9 +86,9 @@ const Header = () => {
   const toggleMobileNav = () => setIsMobileNavOpen(!isMobileNavOpen);
 
   const navLinks = [
-    { name: 'Dashboard', to: '/', icon: LayoutDashboard },
-    { name: 'Portfolio', to: '/portfolio', icon: BookOpen },
-    { name: 'Strategy', to: '/strategy', icon: CalendarDays },
+    { name: 'Dashboard', to: '/', icon: LayoutDashboard, iconLight: LayoutDashboardLight },
+    { name: 'Portfolio', to: '/portfolio', icon: BookOpen, iconLight: BookOpenLight },
+    { name: 'Strategy', to: '/strategy', icon: CalendarDays, iconLight: CalendarDaysLight },
   ];
 
   const menuItems = [
@@ -77,13 +134,17 @@ const Header = () => {
                 <Link
                   key={index}
                   to={link.to}
-                  className={`px-4 py-2 flex items-center space-x-2 rounded-full font-medium transition-colors duration-200 ${
-                    location.pathname === link.to
-                      ? 'bg-blue-500/80 text-white shadow-md'
-                      : 'text-black/80 hover:bg-blue-200/50'
-                  }`}
+                  className={`px-4 py-2 flex items-center space-x-2 rounded-full font-medium transition-colors duration-200 ${location.pathname === link.to
+                    ? 'bg-white blue-500/80 text-[#4C60E5] shadow-md'
+                    : 'text-black/80 hover:bg-blue-200/50'
+                    }`}
                 >
-                  <link.icon size={18} />
+                  {
+                    location.pathname === link.to ?
+                      <link.iconLight />
+                      :
+                      <link.icon />
+                  }
                   <span>{link.name}</span>
                 </Link>
               ))}
@@ -111,9 +172,8 @@ const Header = () => {
                 />
                 <ChevronDown
                   size={16}
-                  className={`text-gray-500 transition-transform duration-200 ${
-                    isMenuOpen ? 'rotate-180' : 'rotate-0'
-                  }`}
+                  className={`text-gray-500 transition-transform duration-200 ${isMenuOpen ? 'rotate-180' : 'rotate-0'
+                    }`}
                 />
               </button>
 
@@ -164,11 +224,10 @@ const Header = () => {
                 <Link
                   key={index}
                   to={link.to}
-                  className={`flex items-center px-3 py-2 rounded-lg transition-colors duration-200 ${
-                    location.pathname === link.to
-                      ? 'bg-blue-500/80 text-white shadow-md'
-                      : 'text-black/80 hover:bg-blue-200/50'
-                  }`}
+                  className={`flex items-center px-3 py-2 rounded-lg transition-colors duration-200 ${location.pathname === link.to
+                    ? 'bg-blue-500/80 text-white shadow-md'
+                    : 'text-black/80 hover:bg-blue-200/50'
+                    }`}
                 >
                   <link.icon size={18} className="mr-2" />
                   <span>{link.name}</span>