Skip to content

feat: 🎸 Add Navbar component and integrate the theme toggle button #16

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

Merged
merged 2 commits into from
Jan 5, 2025
Merged

feat: 🎸 Add Navbar component and integrate the theme toggle button #16

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bbce90a
feat: 🎸 Add Navbar component and integrate Radix UI Dialog for improv…
kekubhai Jan 5, 2025
df1c624
refactor: 💡 Simplify Navbar links by removing hover animations
kekubhai Jan 5, 2025
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
11 changes: 2 additions & 9 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,12 @@ import { ThemeToggle } from "@/components/theme-toggle"
import { BookOpen, CheckCircle, Github } from 'lucide-react'
import { SocialLinks } from "@/components/socials"
import { Highlight } from "@/components/ui/hero-hihglight";
import Navbar from '@/components/header'

export default function LandingPage() {
return (
<div className="flex flex-col min-h-screen bg-background">
<header className="px-4 lg:px-6 h-16 flex items-center sticky top-0 w-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 z-50 border-b">
<Link className="flex items-center justify-center" href="#">
<BookOpen className="h-6 w-6 mr-2 text-primary" />
<span className="font-bold text-lg">LeetCode Journal</span>
</Link>
<nav className="ml-auto flex gap-4 sm:gap-6">
<ThemeToggle />
</nav>
</header>
<Navbar/>
<main className="flex-1">
<section className="w-full py-12 md:py-24 lg:py-32 bg-secondary overflow-hidden">
<div className="container px-4 md:px-6 relative z-10">
Expand Down
96 changes: 96 additions & 0 deletions components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
'use client'
import { FC, useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { ThemeToggle } from "@/components/theme-toggle";

const Navbar: FC = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);

return (
<header>

<nav className="flex justify-between items-center px-6 py-4 bg-gray-900 text-white dark:bg-gray-800">
<div className="flex items-center space-x-2">
<span className="text-2xl font-bold">📓</span>
<span className="text-xl font-semibold">LeetCodeJournal</span>
</div>
<div className="hidden lg:flex space-x-6">
<Link href="#" className="hover:text-purple-400 hover:animate-spin">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kekubhai Remove animations from the items, they are not necessary.
image

Home
</Link>
<Link href="#" className="hover:text-purple-400 hover:animate-pulse">
Features
</Link>
<Link href="#" className="hover:text-purple-400 hover:animate-bounce">
How it Works
</Link>
<Link href="#" className="hover:text-purple-400 hover:animate-ping">
FAQs
</Link>
<Link href="#" className="hover:text-purple-400 hover:animate-bounce">
Blog
</Link>
</div>
<div className="hidden lg:flex items-center space-x-4">
<Link href="#" className="hover:text-gray-400">
Log in
</Link>
<Button className="bg-purple-500 hover:bg-purple-600">Sign up</Button>
<ThemeToggle />
</div>
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="lg:hidden focus:outline-none"
>
{isMenuOpen ? "✖️" : "☰"}
</button>
</nav>


{isMenuOpen && (
<div className="fixed inset-x-0 top-[65px] z-50 border-b bg-background p-6 lg:hidden">
<nav className="flex flex-col space-y-4">
<Link
href="#"
className="text-sm font-medium transition-colors hover:text-primary"
onClick={() => setIsMenuOpen(false)}
>
Home
</Link>
<Link
href="#"
className="text-sm font-medium transition-colors hover:text-primary"
onClick={() => setIsMenuOpen(false)}
>
Features
</Link>
<Link
href="#"
className="text-sm font-medium transition-colors hover:text-primary"
onClick={() => setIsMenuOpen(false)}
>
How it Works
</Link>
<Link
href="#"
className="text-sm font-medium transition-colors hover:text-primary"
onClick={() => setIsMenuOpen(false)}
>
FAQs
</Link>
<Link
href="#"
className="text-sm font-medium transition-colors hover:text-primary"
onClick={() => setIsMenuOpen(false)}
>
Blog
</Link>
</nav>
</div>
)}
</header>
);
};

export default Navbar;
140 changes: 140 additions & 0 deletions components/ui/sheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
"use client"

import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

const SheetOverlay = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
ref={ref}
/>
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

const sheetVariants = cva(
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
{
variants: {
side: {
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
bottom:
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
right:
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
},
},
defaultVariants: {
side: "right",
},
}
)

interface SheetContentProps
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Content>,
SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
ref={ref}
className={cn(sheetVariants({ side }), className)}
{...props}
>
{children}
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName

const SheetHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className
)}
{...props}
/>
)
SheetHeader.displayName = "SheetHeader"

const SheetFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
)
SheetFooter.displayName = "SheetFooter"

const SheetTitle = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold text-foreground", className)}
{...props}
/>
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

const SheetDescription = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
SheetDescription.displayName = SheetPrimitive.Description.displayName

export {
Sheet,
SheetPortal,
SheetOverlay,
SheetTrigger,
SheetClose,
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
}
Loading
Loading