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

ISSUE #93 (solved) Code Optimization and UI Enhancements for Navbar Component #94

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

ISSUE #93 (solved) Code Optimization and UI Enhancements for Navbar Component #94

Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8e90fea
Updated Navbar.tsx
Sumanth077s Oct 17, 2024
542af6d
Updated Navbar.tsx
Sumanth077s Oct 17, 2024
3e9e485
Updated Navbar.tsx
Sumanth077s Oct 18, 2024
1c59f54
Updated Navbar.tsx
Sumanth077s Oct 18, 2024
2dbc69f
Update Navbar.tsx
Sumanth077s Oct 20, 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
128 changes: 61 additions & 67 deletions apps/web/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
"use client";

import React, { useState } from "react";
import Link from "next/link";
import { Montserrat } from "next/font/google";
import Image from "next/image";
import logo from "../public/create-api.png";
import GIthubButton from "./ui/GIthub-Button";
import GithubButton from "./ui/GIthub-Button";

const alata = Montserrat({
const montserrat = Montserrat({
weight: "800",
subsets: ["latin"],
display: "swap",
Expand All @@ -15,94 +16,87 @@ const alata = Montserrat({
export const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);

const toggleHamburger = () => {
setIsOpen(!isOpen);
};
const toggleHamburger = () => setIsOpen((prev) => !prev);

return (
<div className="w-[90%] sm:w-[80%] mx-auto mb-[50px] py-6">
<div className="relative z-20 bg-transparent">
<div className="px-6 md:px-12 lg:container lg:mx-auto lg:px-6 lg:py-4">
<div className="flex items-center justify-between">
<div className="relative z-20">
<Link href="/" className="flex justify-center items-center gap-3">
<>
{/* Add padding to main content to avoid overlap */}
<div className="pt-20 lg:pt-24"></div>

<div className="fixed top-0 left-0 w-full bg-transparent z-50">
<nav className="relative bg-transparent">
<div className="px-6 md:px-12 lg:container lg:mx-auto lg:px-6 lg:py-4">
<div className="flex items-center justify-between">
{/* Logo Section */}
<Link href="/" className="flex items-center gap-3">
<Image src={logo} height={50} width={50} alt="logo" />
<h2 className={`text-2xl font-bold ${alata.className}`}>
<span
className={`text-orange-300 font-extrabold ${alata.className}`}
>
Create
</span>{" "}
<span
className={`text-orange-500 font-extrabold ${alata.className}`}
>
My
</span>{" "}
<span
className={`text-red-500 font-extrabold ${alata.className}`}
>
API
</span>
<h2 className={`text-2xl font-bold ${montserrat.className}`}>
<span className="text-orange-300 font-extrabold">Create</span>{" "}
<span className="text-orange-500 font-extrabold">My</span>{" "}
<span className="text-red-500 font-extrabold">API</span>
</h2>
</Link>
</div>

<div className="flex items-center justify-end">
<input
type="checkbox"
name="hamburger"
id="hamburger"
className="peer"
hidden
checked={isOpen}
onChange={toggleHamburger}
/>
<label
htmlFor="hamburger"
className="peer-checked:hamburger block relative z-20 p-6 -mr-6 cursor-pointer lg:hidden"
>
<div
aria-hidden="true"
className="m-auto h-0.5 w-6 rounded bg-white transition duration-300"
></div>
{/* Hamburger Menu and Navigation Links */}
<div className="flex items-center">
<input
type="checkbox"
id="hamburger"
className="peer hidden"
checked={isOpen}
onChange={toggleHamburger}
/>
<label
htmlFor="hamburger"
className="lg:hidden p-6 cursor-pointer relative z-50 -mr-6"
>
<div
className={`h-0.5 w-6 bg-white m-auto rounded transition-transform duration-300 ${
isOpen ? "rotate-45 translate-y-[6px]" : ""
}`}
></div>
<div
className={`mt-2 h-0.5 w-6 bg-white m-auto rounded transition-transform duration-300 ${
isOpen ? "-rotate-45 -translate-y-[6px]" : ""
}`}
></div>
</label>

{/* Overlay for Blur Background */}
<div
aria-hidden="true"
className="m-auto mt-2 h-0.5 w-6 rounded bg-white transition duration-300"
className={`fixed inset-0 bg-black bg-opacity-50 backdrop-blur-md transition-opacity duration-300 ${
isOpen ? "opacity-100 visible" : "opacity-0 invisible"
}`}
></div>
</label>

<div
className={`peer-checked:translate-x-0 fixed inset-0 w-[calc(100%-4.5rem)] translate-x-[-100%] shadow-xl transition duration-300 lg:w-auto lg:static lg:shadow-none lg:translate-x-0 ${
isOpen ? "translate-x-0 -translate-y-20" : ""
}`}
>
<div className="flex flex-col h-full justify-between lg:items-center lg:flex-row">
<ul className="px-6 pt-32 text-white space-y-8 md:px-12 lg:space-y-0 lg:flex lg:space-x-12 lg:pt-0">
<div
className={`fixed inset-0 w-[calc(100%-4.5rem)] translate-x-[-100%] transition-transform duration-300 lg:translate-x-0 lg:static lg:w-auto peer-checked:translate-x-0 ${
isOpen ? "-translate-y-0" : "-translate-y-full"
}`}
>
<ul className="flex flex-col items-center space-y-8 px-6 pt-32 text-white md:px-12 lg:flex-row lg:space-y-0 lg:space-x-12 lg:pt-0">
<li>
<Link
href="#"
className="group relative before:absolute before:inset-x-0 before:bottom-0 before:h-2 before:origin-right before:scale-x-0 "
>
<span className="relative hover:text-orange-300"></span>
<Link href="/" className="group relative">
<span className="relative hover:text-orange-300">
Home
</span>
</Link>
</li>
<li>
<Link
href="https://github.com/Puskar-Roy/create-my-api"
className="group relative before:absolute before:inset-x-0 before:bottom-0 before:h-2 before:origin-right before:scale-x-0 flex justify-center items-center"
className="group relative flex items-center"
>
<span className="relative hover:text-orange-300 ">
<GIthubButton />
</span>
<GithubButton />
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
</>
);
};