diff --git a/src/components/NavBar/MobileSheet.tsx b/src/components/NavBar/MobileSheet.tsx new file mode 100644 index 0000000..27f4ea6 --- /dev/null +++ b/src/components/NavBar/MobileSheet.tsx @@ -0,0 +1,63 @@ +"use client"; + +import Link from "next/link"; +import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTrigger } from "@/components/ui/sheet"; +import { Menu, GithubIcon } from "lucide-react"; +import { usePathname } from "next/navigation"; + +import { Button } from "@/components/ui/button"; +import MyAvatar from "@/components/NavBar/MyAvatar"; +import { navItems } from "@/components/NavBar/data"; +import clsx from "clsx"; +import Signature from "@/components/Footer/Signature"; + +function MobileSheet() { + const pathname = usePathname(); + + return ( + + + + + + + + + + +
+ {navItems.map((item) => ( + + +

{item.name}

+ + + ))} +
+ + {/* ========== Mobile Side Bar Footer Start========= */} +
+

Tahsin

+
+ + Software Engineer at{" "} + + CARFAX + + + +
+ +
+ All rights reserved © Tahsin {new Date().getFullYear()} +
+
+ {/* ========== Mobile Side Bar Footer End ========= */} + + + ); +} + +export default MobileSheet; diff --git a/src/components/NavBar/MyAvatar.tsx b/src/components/NavBar/MyAvatar.tsx new file mode 100644 index 0000000..e028f5e --- /dev/null +++ b/src/components/NavBar/MyAvatar.tsx @@ -0,0 +1,12 @@ +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; + +const MyAvatar = () => { + return ( + + + MT + + ); +}; + +export default MyAvatar; diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx new file mode 100644 index 0000000..e74bb3c --- /dev/null +++ b/src/components/NavBar/NavBar.tsx @@ -0,0 +1,58 @@ +"use client"; + +import Link from "next/link"; +import clsx from "clsx"; +import { usePathname } from "next/navigation"; + +import CommandMenu from "@/components/CommandMenu/CommandMenu"; +import MobileSheet from "@/components/NavBar/MobileSheet"; +import MyAvatar from "@/components/NavBar/MyAvatar"; +import ThemeToggle from "@/components/NavBar/ThemeToggle"; +import { navItems } from "@/components/NavBar/data"; + +const GitHubButton = () => ( + +
+ + + + GitHub +
+ +); + +export default function NavBar() { + const pathname = usePathname(); + + return ( +
+
+
+
+ +
+
+ +
+ +
+ {navItems.map((nav) => ( + + {nav.name} + + ))} +
+
+ +
+ + + +
+
+
+ ); +} diff --git a/src/components/NavBar/ThemeToggle.tsx b/src/components/NavBar/ThemeToggle.tsx new file mode 100644 index 0000000..e20072c --- /dev/null +++ b/src/components/NavBar/ThemeToggle.tsx @@ -0,0 +1,27 @@ +"use client"; + +import React from "react"; +import { useTheme } from "next-themes"; + +import { Button } from "@/components/ui/button"; +import { MoonIcon, SunIcon } from "lucide-react"; + +const ThemeToggle = () => { + const { theme, setTheme } = useTheme(); + + const changeTheme = () => { + if (theme === "light") setTheme("dark"); + else setTheme("light"); + }; + + return ( +
+ +
+ ); +}; + +export default ThemeToggle; diff --git a/src/components/NavBar/data.ts b/src/components/NavBar/data.ts new file mode 100644 index 0000000..e3ca0ae --- /dev/null +++ b/src/components/NavBar/data.ts @@ -0,0 +1,9 @@ +export const navItems = [ + { name: "Home", href: "/", isActiveCheck: (pathname: string) => pathname === "/" }, + { name: "Works", href: "/works", isActiveCheck: (pathname: string) => pathname.startsWith("/works") }, + { name: "Blogs", href: "/blogs", isActiveCheck: (pathname: string) => pathname.startsWith("/blogs") }, + { name: "Tools", href: "/tools", isActiveCheck: (pathname: string) => pathname.startsWith("/tools") }, + { name: "Open Source", href: "/open-source", isActiveCheck: (pathname: string) => pathname.startsWith("/open-source") }, + { name: "Photographs", href: "/photographs", isActiveCheck: (pathname: string) => pathname.startsWith("/photographs") }, + // { name: "Test", href: "/testpage", isActiveCheck: (pathname: string) => pathname.startsWith("/testpage") }, +]; diff --git a/tsconfig.json b/tsconfig.json index c97e0e1..7b28589 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,8 +18,7 @@ } ], "paths": { - "@/*": ["./src/*"], - "@/components/*": ["./src/components/*"] + "@/*": ["./src/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],