From ef1b38417322cec370fa58c02ab918283faf31ff Mon Sep 17 00:00:00 2001 From: momo-shogun Date: Sun, 19 Jan 2025 19:06:53 +0530 Subject: [PATCH] navbar modification --- components/navbar.tsx | 190 +++++++++++++++----------- components/ui/background-gradient.tsx | 72 ++++++++++ components/ui/navbar-menu.tsx | 121 ++++++++++++++++ 3 files changed, 300 insertions(+), 83 deletions(-) create mode 100644 components/ui/background-gradient.tsx create mode 100644 components/ui/navbar-menu.tsx diff --git a/components/navbar.tsx b/components/navbar.tsx index ffb1112..1802bbc 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -5,105 +5,129 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; import { Button } from "@/components/ui/button"; import { ThemeToggle } from "@/components/theme-toggle"; -import { BookOpen, Menu, X } from "lucide-react"; +import { BookOpen, Menu as MenuIcon, X } from "lucide-react"; +import { HoveredLink, Menu, MenuItem } from "@/components/ui/navbar-menu"; const navItems = [ - { href: "/", label: "Home" }, - // { href: "features", label: "Features" }, - { href: "/learn-more", label: "How it Works" }, - { href: "/FAQ", label: "FAQs" }, - // { href: "/blog", label: "Blog" }, - { href: "/blogs", label: "Blogs" }, + { href: "/web-dev", label: "Web Development" }, + { href: "/interface-design", label: "Interface Design" }, + { href: "/seo", label: "Search Engine Optimization" }, + { href: "/branding", label: "Branding" }, + { href: "/hobby", label: "Hobby" }, + { href: "/individual", label: "Individual" }, + { href: "/team", label: "Team" }, + { href: "/enterprise", label: "Enterprise" }, ]; -const Navbar1 = () => { - const [isMenuOpen, setIsMenuOpen] = useState(false); - const pathname = usePathname(); +// Logo Component +const Logo = () => ( +
+ + LeetCodeJournal +
+); - const toggleMenu = () => setIsMenuOpen(!isMenuOpen); +// Menu Toggle Button +const MenuToggle = ({ isMenuOpen, toggleMenu }: { isMenuOpen: boolean; toggleMenu: () => void }) => ( +
+
+ + {isMenuOpen ? : } +
+
+); +// Mobile Menu +const MobileMenu = ({ isMenuOpen, toggleMenu, pathname }: { isMenuOpen: boolean; toggleMenu: () => void; pathname: string }) => { + if (!isMenuOpen) return null; return ( -
- + + ); +}; - {isMenuOpen && ( -
- {/* ADDED X-PADDING TO MAKE IT FIT PROPERLY ON MOBILE SCREENS */} - -
- )} +const Navbar1 = () => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + const pathname = usePathname(); + const [active, setActive] = useState(null); + + const toggleMenu = () => setIsMenuOpen(!isMenuOpen); + + return ( +
+
+ {/* Gradient Border */} +
+ + {/* Navbar */} + +
+
+ ); }; diff --git a/components/ui/background-gradient.tsx b/components/ui/background-gradient.tsx new file mode 100644 index 0000000..e18488c --- /dev/null +++ b/components/ui/background-gradient.tsx @@ -0,0 +1,72 @@ +import { cn } from "@/lib/utils"; +import React from "react"; +import { motion } from "framer-motion"; + +export const BackgroundGradient = ({ + children, + className, + containerClassName, + animate = true, +}: { + children?: React.ReactNode; + className?: string; + containerClassName?: string; + animate?: boolean; +}) => { + const variants = { + initial: { + backgroundPosition: "0 50%", + }, + animate: { + backgroundPosition: ["0, 50%", "100% 50%", "0 50%"], + }, + }; + return ( +
+ + + +
{children}
+
+ ); +}; diff --git a/components/ui/navbar-menu.tsx b/components/ui/navbar-menu.tsx new file mode 100644 index 0000000..53c4ee9 --- /dev/null +++ b/components/ui/navbar-menu.tsx @@ -0,0 +1,121 @@ +"use client"; +import React from "react"; +import { motion } from "framer-motion"; +import Link from "next/link"; +import Image from "next/image"; + +const transition = { + type: "spring", + mass: 0.5, + damping: 11.5, + stiffness: 100, + restDelta: 0.001, + restSpeed: 0.001, +}; + +export const MenuItem = ({ + setActive, + active, + item, + children, +}: { + setActive: (item: string) => void; + active: string | null; + item: string; + children?: React.ReactNode; +}) => { + return ( +
setActive(item)} className="relative px-8 py-3 rounded-xl hover:bg-black hover:dark:bg-white hover:text-black transition-all duration-300 text-foreground shadow-sm border border-transparent hover:border-white hover:shadow-[0px_0px_20px_5px_rgba(255,255,255,0.4)]"> + + {item} + + {active !== null && ( + + {active === item && ( +
+ + + {children} + + +
+ )} + + )} +
+ ); +}; + +export const Menu = ({ + setActive, + children, +}: { + setActive: (item: string | null) => void; + children: React.ReactNode; +}) => { + return ( + + ); +}; + +export const ProductItem = ({ + title, + description, + href, + src, +}: { + title: string; + description: string; + href: string; + src: string; +}) => { + return ( + + {title} +
+

+ {title} +

+

+ {description} +

+
+ + ); +}; + +export const HoveredLink = ({ children, ...rest }: any) => { + return ( + + {children} + + ); +};