feat: Navbar

client/src/app/chat/page.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

client/src/app/layout.tsx

@@ -4,6 +4,7 @@ import localFont from "next/font/local";
 
 import AuthProvider from "@/providers/auth-provider";
 import ThemeProvider from "@/providers/theme-provider";
+import Navbar from "@/components/NavLink";
 import { Toaster } from "@/components/ui/toaster";
 
 const geistSans = localFont({
@@ -39,6 +40,7 @@ export default function RootLayout({
             enableSystem
             disableTransitionOnChange
           >
+            <Navbar />
             <main className="flex flex-col justify-center items-center min-h-screen">
               {children}
             </main>

client/src/app/profile/page.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

client/src/app/setting/page.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

client/src/components/Button/signout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { signOut } from "next-auth/react";
+import { Button } from "@/components/ui/button";
+
+export default function SignOutButton() {
+  const signout = () => {
+    signOut({
+      redirect: true,
+      callbackUrl: `${window.location.origin}/signin`,
+    });
+  };
+
+  return (
+    <Button onClick={signout} variant="destructive">
+      Sign Out
+    </Button>
+  );
+}

client/src/components/ModeToggle/index.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+import { Moon, Sun } from "lucide-react";
+
+export default function ModeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  const toggleTheme = () => {
+    if (theme === "dark") {
+      setTheme("light");
+    } else {
+      setTheme("dark");
+    }
+  };
+
+  return (
+    <Button variant="outline" size="icon" onClick={toggleTheme}>
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}

client/src/components/NavLink/index.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+import MainNav from "@/components/NavLink/main-nav";
+import UserNav from "@/components/NavLink/user-nav";
+import ModeToggle from "@/components/ModeToggle";
+import { Code } from "lucide-react";
+
+export default function Navbar() {
+  return (
+    <header className="w-full fixed z-10 top-0 bg-gray-100 dark:bg-gray-900 border-b border-gray-200">
+      <nav className="h-16 px-4 flex items-center">
+        <Link href="/">
+          <Code />
+        </Link>
+        <MainNav />
+        <div className="ml-auto flex items-center space-x-4">
+          <ModeToggle />
+          <UserNav />
+        </div>
+      </nav>
+    </header>
+  );
+}

client/src/components/NavLink/main-nav.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useState } from "react";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { Menu } from "lucide-react";
+import { mainNavLinks } from "@/constants";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export default function MainNav() {
+  const [menuOpen, setMenuOpen] = useState<boolean>(false);
+  const pathName = usePathname();
+
+  return (
+    <div className="flex items-center lg:space-x-6 mx-4">
+      <Button className="lg:hidden" onClick={() => setMenuOpen(!menuOpen)}>
+        <Menu />
+      </Button>
+      <div
+        className={cn(
+          "absolute top-full left-0 w-full border bg-gray-100 dark:bg-gray-800",
+          "lg:border-none lg:static lg:flex lg:space-x-6",
+          menuOpen ? "block" : "hidden"
+        )}
+      >
+        {mainNavLinks.map((link) => (
+          <Link
+            className={cn(
+              "block py-2 px-4 text-sm transition-colors",
+              pathName === link.url
+                ? "text-black dark:text-white"
+                : "text-muted-foreground"
+            )}
+            key={link.title}
+            href={link.url}
+          >
+            {link.title}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

client/src/components/NavLink/user-avatar.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { UserCircle2 } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+export default function UserAvatar() {
+  const { data: session } = useSession();
+
+  return (
+    <div>
+      {session?.user?.image ? (
+        <Avatar className="mx-auto w-8 h-8">
+          <AvatarImage
+            className="object-cover w-full h-full rounded-full"
+            src={session?.user?.image}
+            alt="user avatar"
+          />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+      ) : (
+        <UserCircle2 className="mx-auto w-8 h-8" />
+      )}
+      <p className="w-full text-center text-xs">{session?.user?.name}</p>
+    </div>
+  );
+}

client/src/components/NavLink/user-nav.tsx

@@ -0,0 +1,44 @@
+import Link from "next/link";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { buttonVariants } from "@/components/ui/button";
+import SignOutButton from "@/components/Button/signout";
+import UserAvatar from "@/components/NavLink/user-avatar";
+import { getUserSession } from "@/lib/authAction";
+
+export default async function UserNav() {
+  const { session } = await getUserSession();
+
+  return (
+    <div>
+      {session ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger>
+            <UserAvatar />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <Link href="/profile">Profile</Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <SignOutButton />
+              </DropdownMenuItem>
+            </DropdownMenuLabel>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : (
+        <Link className={buttonVariants()} href="/signin">
+          Sign In
+        </Link>
+      )}
+    </div>
+  );
+}

client/src/constants/index.ts

@@ -0,0 +1,9 @@
+export const mainNavLinks = [
+  { title: "Home", url: "/" },
+  { title: "My Documents", url: "/document" },
+  { title: "Create Document", url: "/document/new" },
+  { title: "Real-time Collaboration", url: "/document/realtime" },
+  { title: "Profile", url: "/profile" },
+  { title: "settings", url: "/setting" },
+  { title: "Chat", url: "/chat" },
+];

client/src/lib/authAction.ts

@@ -1,8 +1,10 @@
 "use server";
 
+import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import bcrypt from "bcryptjs";
 import connectDB from "@/lib/mongoDBConnect";
+import { nextAuthOptions } from "@/lib/nextAuthOptions";
 import User from "@/models/user.model";
 
 interface SignUpWithCredentialsParams {
@@ -19,6 +21,11 @@ interface GetUserByEmailParams {
   email: string;
 }
 
+export async function getUserSession() {
+  const session = await getServerSession(nextAuthOptions);
+  return { session };
+}
+
 export async function signUpWithCredentials({
   name,
   email,

client/src/middleware.ts

@@ -17,4 +17,6 @@ export default withAuth(
   }
 );
 
-export const config = { matcher: ["/document/:path*"] };
+export const config = {
+  matcher: ["/document/:path*", "/profile", "/setting", "/chat"],
+};