diff --git a/__tests__/components/common/navbar/Navbar.test.tsx b/__tests__/components/common/navbar/Navbar.test.tsx
new file mode 100644
index 0000000..9696551
--- /dev/null
+++ b/__tests__/components/common/navbar/Navbar.test.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { NavbarLink } from "@/components/common/Navbar/Navbar.types";
+import { NAVBAR_LINKS } from "@/components/common/Navbar/Navbar.constants";
+
+import Navbar from "@/components/common/Navbar/Navbar";
+
+describe("Navbar Component", () => {
+ it("should render the Navbar", () => {
+ render();
+
+ const nav = screen.getByRole("banner");
+
+ expect(nav).toBeInTheDocument();
+
+ // nav links assertions - desktop
+ NAVBAR_LINKS.forEach((link: NavbarLink) => {
+ const navLink = screen.getAllByText(link.name)[0];
+ expect(navLink).toHaveTextContent(link.name);
+ });
+
+ // signin button assertions
+ const signinButton = screen.getByTestId("signin-button");
+ const signInText = screen.getByText("Sign in with Github");
+
+ expect(signInText).toBeInTheDocument();
+ expect(signinButton).toBeInTheDocument();
+ expect(signinButton).toHaveAttribute("href", "login url will come here");
+ });
+
+ it("should render the mobile navbar when hamburger button is clicked", () => {
+ render();
+
+ const mobileNav = screen.queryByTestId("mobile-nav");
+ const hamburgerButton = screen.queryByRole("button");
+
+ // hamburgerButton assertions
+ expect(hamburgerButton).toBeInTheDocument();
+ expect(hamburgerButton).toHaveClass("hamburger");
+
+ // toggle navlinks assertions
+ expect(mobileNav).toHaveClass("hidden");
+
+ fireEvent.click(hamburgerButton!);
+
+ expect(mobileNav).toHaveClass("visible");
+
+ // nav links assertions - mobile
+ NAVBAR_LINKS.forEach((link: NavbarLink) => {
+ const navLink = screen.queryAllByText(link.name)[1];
+ expect(navLink).toHaveTextContent(link.name);
+ });
+ });
+});
diff --git a/src/components/common/Navbar/Navbar.constants.ts b/src/components/common/Navbar/Navbar.constants.ts
new file mode 100644
index 0000000..d7a1394
--- /dev/null
+++ b/src/components/common/Navbar/Navbar.constants.ts
@@ -0,0 +1,24 @@
+import { NavbarLink } from "./Navbar.types";
+
+export const NAVBAR_LINKS: NavbarLink[] = [
+ {
+ id: "welcome-site",
+ name: "Welcome",
+ link: process.env.NEXT_PUBLIC_WELCOME_SITE,
+ },
+ {
+ id: "events-site",
+ name: "Events",
+ link: `${process.env.NEXT_PUBLIC_WWW_SITE}/events`,
+ },
+ {
+ id: "members-site",
+ name: "Members",
+ link: process.env.NEXT_PUBLIC_MEMBERS_SITE,
+ },
+ {
+ id: "status-site",
+ name: "Status",
+ link: process.env.NEXT_PUBLIC_STATUS_SITE,
+ },
+];
diff --git a/src/components/common/Navbar/Navbar.types.ts b/src/components/common/Navbar/Navbar.types.ts
new file mode 100644
index 0000000..2527636
--- /dev/null
+++ b/src/components/common/Navbar/Navbar.types.ts
@@ -0,0 +1,5 @@
+export type NavbarLink = {
+ id: string;
+ name: string;
+ link: string;
+};