feat: navbar goes to top on larger screens also added anchor tags for…

… section scroll + improve colors and styles for diff. screen sizes and themes
thekiranmahajan · Jun 23, 2024 · 39bd201 · 39bd201
1 parent 01959fe
commit 39bd201
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 24 deletions.
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -22,29 +22,35 @@ const Header = () => {
   }, [selectedTheme]);
 
   return (
-    <header className="fixed bottom-0 flex h-12 w-full items-center justify-between bg-light-blue px-5 text-white dark:bg-yellow dark:text-dark-blue">
+    <header className="fixed bottom-0 flex h-12 w-full items-center justify-between bg-light-blue px-5 text-white md:top-0 md:justify-between dark:bg-yellow dark:text-dark-blue">
       <h2 className="cursor-pointer font-rajdhani text-lg font-bold">
         Kiran Mahajan<span className="text-yellow dark:text-violet">.</span>
       </h2>
-      <div className="flex h-full w-16 items-center justify-between">
+
+      <nav className="ml-auto hidden h-full w-3/4 px-5 md:flex">
+        <NavLinks />
+      </nav>
+      <div className="flex h-full w-16 items-center justify-between px-1 md:relative md:w-10 md:justify-center">
         <IoSunnyOutline
           onClick={() => addThemeToLocalStorage("light")}
-          className={`cursor-pointer text-xl transition-transform duration-300 hover:text-dark-blue dark:text-violet ${selectedTheme === "dark" ? "block rotate-180 scale-100 opacity-100" : "pointer-events-none hidden rotate-0 scale-0 opacity-0"}`}
+          className={`cursor-pointer text-xl transition-transform duration-300 hover:text-dark-blue md:absolute dark:text-dark-blue dark:hover:text-violet ${selectedTheme === "dark" ? "block scale-100 opacity-100" : "pointer-events-none hidden scale-0 opacity-0"}`}
         />
         <IoMoonOutline
           onClick={() => addThemeToLocalStorage("dark")}
-          className={`cursor-pointer text-xl transition-transform duration-300 hover:text-dark-blue dark:text-violet ${selectedTheme === "light" ? "block rotate-0 scale-100 opacity-100" : "pointer-events-none rotate-90 scale-0 opacity-0"}`}
+          className={`cursor-pointer text-xl transition-transform duration-300 hover:text-dark-blue md:absolute dark:text-dark-blue dark:hover:text-violet ${selectedTheme === "light" ? "block rotate-0 scale-100 opacity-100" : "pointer-events-none rotate-90 scale-0 opacity-0"}`}
         />
         <IoGridOutline
           onClick={() => setIsMenuOpen(true)}
-          className="cursor-pointer text-xl hover:text-dark-blue dark:text-violet"
+          className={`cursor-pointer text-xl md:hidden dark:text-dark-blue dark:hover:text-violet`}
         />
       </div>
 
       <div
-        className={`absolute bottom-0 left-1/2 right-0 z-10 flex h-56 w-full -translate-x-1/2 transform flex-col rounded-t-3xl bg-light-blue p-1 text-white shadow-2xl transition-transform duration-200 dark:bg-yellow dark:text-dark-blue ${isMenuOpen ? "flex translate-y-0" : "translate-y-full"} `}
+        className={`absolute bottom-0 left-1/2 right-0 z-10 flex h-56 w-full -translate-x-1/2 transform flex-col rounded-t-3xl bg-light-blue p-1 pt-5 text-white shadow-2xl transition-transform duration-200 md:hidden dark:bg-yellow dark:text-dark-blue ${isMenuOpen ? "flex translate-y-0" : "translate-y-full"} `}
       >
-        <NavLinks />
+        <nav className="flex h-full w-full">
+          <NavLinks />
+        </nav>
         <div className="flex h-12 w-full items-center justify-end px-3">
           <HiMiniXMark
             onClick={() => setIsMenuOpen(false)}

diff --git a/src/components/NavItem.jsx b/src/components/NavItem.jsx
@@ -1,8 +1,13 @@
-const NavItem = ({ icon: Icon, label }) => {
+const NavItem = ({ icon: Icon, label, href }) => {
   return (
-    <li className="dark:text-violet hover:text-dark-blue flex cursor-pointer flex-col items-center justify-center gap-1 truncate">
-      <Icon className="text-xl" />
-      {label}
+    <li className="flex items-center justify-center">
+      <a
+        href={href}
+        className="flex cursor-pointer flex-col items-center justify-center gap-1 truncate text-sm font-medium hover:text-dark-blue md:flex-row md:gap-0 dark:text-dark-blue dark:hover:text-violet"
+      >
+        <Icon className="text-xl md:hidden" />
+        {label}
+      </a>
     </li>
   );
 };

diff --git a/src/components/NavLinks.jsx b/src/components/NavLinks.jsx
@@ -3,13 +3,16 @@ import NavItem from "./NavItem";
 
 const NavLinks = () => {
   return (
-    <nav className="flex h-full w-full flex-col items-center justify-around pt-5">
-      <ul className="row-gap-4 grid h-full w-full grid-cols-3 grid-rows-2 gap-x-4 gap-y-8 text-sm font-semibold">
-        {navItems.map((item) => (
-          <NavItem key={item.label} icon={item.icon} label={item.label} />
-        ))}
-      </ul>
-    </nav>
+    <ul className="row-gap-4 grid h-full w-full grid-cols-3 grid-rows-2 gap-x-4 gap-y-8 font-semibold md:flex md:justify-end md:gap-8">
+      {navItems.map((item) => (
+        <NavItem
+          key={item.label}
+          icon={item.icon}
+          label={item.label}
+          href={item.href}
+        />
+      ))}
+    </ul>
   );
 };
 

diff --git a/src/utils/constants.js b/src/utils/constants.js
@@ -8,10 +8,10 @@ import {
 import { SlGraduation } from "react-icons/sl";
 
 export const navItems = [
-  { icon: IoHomeOutline, label: "Home" },
-  { icon: IoPersonOutline, label: "About" },
-  { icon: IoDocumentTextOutline, label: "Skills" },
-  { icon: SlGraduation, label: "Qualificatons" },
-  { icon: IoCodeOutline, label: "Projects" },
-  { icon: BsChatSquareDots, label: "Contact" },
+  { icon: IoHomeOutline, label: "Home", href: "#home" },
+  { icon: IoPersonOutline, label: "About", href: "#about" },
+  { icon: IoDocumentTextOutline, label: "Skills", href: "#skills" },
+  { icon: SlGraduation, label: "Qualificatons", href: "#qualification" },
+  { icon: IoCodeOutline, label: "Projects", href: "#projects" },
+  { icon: BsChatSquareDots, label: "Contact", href: "#contact" },
 ];