Add basic links

gabau.github.io/src/components/NavBar.tsx

@@ -1,9 +1,29 @@
 import { Link } from "react-router-dom";
 import MoonSunToggle from "./MoonSunToggle";
-import { useRef, useState } from "react";
+import { useContext, useRef, useState } from "react";
 import { CiMenuBurger } from "react-icons/ci";
 import { useGSAP } from "@gsap/react";
 import { gsap } from "gsap/gsap-core";
+import GithubIcon from "/github-mark.svg"
+import LighGithubIcon from "/github-mark-white.svg"
+import ThemeContext from "../context/ThemeContext";
+import { FaLinkedin, FaLinkedinIn } from "react-icons/fa";
+
+const RightItems = () => {
+  const {theme} = useContext(ThemeContext);
+
+  return (<div className="flex flex-row space-x-6">
+      <Link to="https://www.linkedin.com/in/gabriel-au-chen-xi-9a764b21b/" className="flex xl:h-10 sm:h-8">
+        {theme === "light" && <FaLinkedin className="w-full h-full"/>}
+        {theme === "dark" && <FaLinkedinIn className="w-full h-full" />}
+      </Link>
+      <Link to="https://github.com/Gabau" className="flex xl:h-10 sm:h-8 ">
+        {theme === "light" && <img src={GithubIcon} className="object-contain w-auto h-auto" />}
+        {theme === "dark" && <img src={LighGithubIcon} className="object-contain w-auto h-auto" />}
+      </Link>
+      <MoonSunToggle />
+    </div>);
+}
 
 const NavDrawer = ({
   openDrawer,
@@ -78,7 +98,7 @@ const Navbar = () => {
               <CiMenuBurger />
             </button>
           </ul>
-          <MoonSunToggle />
+          <RightItems />
         </nav>
       </div>
     );
@@ -103,7 +123,7 @@ const Navbar = () => {
           <Link to="/playground">Playground</Link>
         </li>
       </ul>
-      <MoonSunToggle />
+      <RightItems />
     </nav>
   );
 };