Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add navbar component #44

Merged
merged 13 commits into from
Mar 2, 2024
Merged

feat: add navbar component #44

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
d57788c
tests: add unit tests for navbar component
satyam73 Feb 25, 2024
bae87cd
feat: add navbar component
satyam73 Feb 25, 2024
e2a60db
Merge branch 'develop' into tests/navbar
sahsisunny Feb 27, 2024
09d7edc
feat: add github authentication url for login
satyam73 Feb 27, 2024
61edbfc
chore: next development port number
satyam73 Feb 28, 2024
afecf9a
refactor: change id of navbar links
satyam73 Feb 28, 2024
3f70dc0
Merge branch 'feat/navbar' into tests/navbar
satyam73 Feb 28, 2024
64a8a50
fix: constant url typo
satyam73 Feb 28, 2024
e9a5dde
Merge branch 'feat/navbar' into tests/navbar
satyam73 Feb 28, 2024
5abec12
Merge pull request #43 from Real-Dev-Squad/tests/navbar
satyam73 Feb 29, 2024
532d6fc
fix: pre commit hook error
satyam73 Feb 29, 2024
e67b939
chore: delete unnecessary files
satyam73 Feb 29, 2024
15e032f
chore: remove unnecessary types file
satyam73 Feb 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions process-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
declare namespace NodeJS {
interface ProcessEnv {
NEXT_PUBLIC_BACKEND_BASE_URL: string;
NEXT_PUBLIC_STATUS_SITE: string;
NEXT_PUBLIC_MEMBERS_SITE: string;
NEXT_PUBLIC_WELCOME_SITE: string;
NEXT_PUBLIC_WWW_SITE: string;
NEXT_PUBLIC_MY_SITE: string;
}
}
Binary file added public/github-logo.png
View file
Open in desktop
satyam73 marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions public/rds-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { ReactNode } from "react";
import Head from "next/head";
import Navbar from "./common/Navbar/Navbar";

type LayoutProps = {
title: string;
Expand All @@ -11,6 +12,7 @@ export default function Layout({ title, children }: LayoutProps) {
<Head>
<title>{title}</title>
</Head>
<Navbar />
{children}
</div>
);
Expand Down
54 changes: 54 additions & 0 deletions src/components/common/Navbar/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React, { useState } from "react";
import Image from "next/image";
import { NAVBAR_LINKS } from "./navbar.constants";
import { NavbarLink } from "./navbar.types";
import { IoLogoGithub } from "react-icons/io5";
import { GiHamburgerMenu } from "react-icons/gi";

function Navbar() {
const [isNavbarLinksVisible, setIsNavbarLinksVisible] = useState<boolean>(false);

function toggleNavbarLinksVisibility() {
setIsNavbarLinksVisible((prevState) => !prevState);
}
const navbarItemsMapping = NAVBAR_LINKS.map((item: NavbarLink) => (
<li
key={item.id}
className="text-base font-bold max-lg:w-full max-lg:text-primary text-white hover:text-contrast "
>
<a className="decoration-none max-lg:p-3 max-lg:w-full max-lg:inline-block max-lg:pl-10" href={item.link}>
{item.name}
</a>
</li>
));

return (
<header className="navbar bg-primary w-full flex items-center max-lg:flex-col">
<div className="bg-primary w-full p-5 pl-10 max-sm:pl-6 flex gap-10 items-center justify-between">
<Image className="max-lg:hidden" src="/rds-logo.svg" alt="Real Dev Squad" height={45} width={45} />
<button onClick={toggleNavbarLinksVisibility} className="hamburger lg:hidden">
<GiHamburgerMenu className="text-white font-bold" size={30} />
</button>
<nav className="navbar__desktop max-lg:hidden visible">
<ul className="flex gap-10 items-center max-lg:flex-col">{navbarItemsMapping}</ul>
</nav>
<a data-testid="signin-button" className="ml-auto decoration-none" href={"login url will come here"}>
<span className="flex gap-2 items-center text-base max-sm:text-sm max-sm:font-bold font-semibold w-fit border text-white rounded-md py-2 p-2 ">
<span>Sign in with Github</span>
<IoLogoGithub size={25} />
sahsisunny marked this conversation as resolved.
Show resolved Hide resolved
</span>
</a>
</div>
<nav
data-testid="mobile-nav"
className={`navbar__mobile ${isNavbarLinksVisible ? "visible" : "hidden"} max-lg:w-full`}
>
<ul className="bg-white shadow-md flex lg:hidden items-center max-lg:flex-col max-lg:py-3">
{navbarItemsMapping}
</ul>
</nav>
</header>
);
}

export default Navbar;
24 changes: 24 additions & 0 deletions src/components/common/Navbar/navbar.constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { NavbarLink } from "./navbar.types";

export const NAVBAR_LINKS: NavbarLink[] = [
{
id: "welcome-site",
ajoykumardas12 marked this conversation as resolved.
Show resolved Hide resolved
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,
},
];
5 changes: 5 additions & 0 deletions src/components/common/Navbar/navbar.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export type NavbarLink = {
id: string;
name: string;
link: string;
};
3 changes: 3 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ module.exports = {
},
},
colors: {
primary: "#041187",
sahsisunny marked this conversation as resolved.
Show resolved Hide resolved
secondary: "#E30062",
contrast: "#85DA6B",
green: "#059669",
red: {
100: "#FEF2F2",
Expand Down
1 change: 1 addition & 0 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
}
},
"include": [
"process-env.d.ts",
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
Expand Down
Loading