-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(navbar): add moble layout navbar
- Loading branch information
Showing
5 changed files
with
285 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| "use client"; | ||
|
|
||
| import { useState } from "react"; | ||
| import Image from "next/image"; | ||
| import Link from "next/link"; | ||
| import { useLenis } from "lenis/react"; | ||
|
|
||
| import LogoMabim from "@/assets/logo-mabim.svg"; | ||
| import { MenuIndicator } from "@/components/ornament/indicator"; | ||
| import { Button, buttonVariants } from "@/components/ui/button"; | ||
| import { | ||
| Sheet, | ||
| SheetContent, | ||
| SheetTrigger, | ||
| } from "@/components/ui/medieval-sheet"; | ||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| const navLinks = [ | ||
| { | ||
| name: "Beranda", | ||
| href: "#main", | ||
| }, | ||
| { | ||
| name: "Countdown", | ||
| href: "#countdown", | ||
| }, | ||
| { | ||
| name: "Kelompok", | ||
| href: "#kelompok", | ||
| }, | ||
| { | ||
| name: "Timeline", | ||
| href: "#timeline", | ||
| }, | ||
| { | ||
| name: "FAQ", | ||
| href: "#faq", | ||
| }, | ||
| ]; | ||
|
|
||
| export function Navbar() { | ||
| const lenis = useLenis(); | ||
| const [isOpen, setIsOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <div className="fixed left-0 right-0 top-0 z-50 mx-auto"> | ||
| <nav className="container flex items-center justify-between bg-primary-950"> | ||
| <div className="flex items-center gap-x-4"> | ||
| <div className="relative h-12 w-12"> | ||
| <Image | ||
| // eslint-disable-next-line | ||
| src={LogoMabim} | ||
| alt="Logo Mabim" | ||
| className="absolute -bottom-2 left-0 h-12 w-12" | ||
| /> | ||
| </div> | ||
| <h3 className="font-zelda text-2xl tracking-tight text-primary-50"> | ||
| MABIMRPL 2024 | ||
| </h3> | ||
| </div> | ||
|
|
||
| <Sheet open={isOpen} onOpenChange={setIsOpen}> | ||
| <SheetTrigger asChild> | ||
| <Button size="icon" className="bg-primary-950 hover:bg-primary-900"> | ||
| <MenuIndicator pathClassName="fill-primary-50" /> | ||
| </Button> | ||
| </SheetTrigger> | ||
| <SheetContent> | ||
| <div className="relative z-50 mt-4 flex flex-col gap-4 text-neutral-50"> | ||
| {navLinks.map((link) => ( | ||
| <Link | ||
| key={link.name} | ||
| href={link.href} | ||
| className={cn(buttonVariants(), "w-full")} | ||
| onClick={(e) => { | ||
| e.preventDefault(); | ||
| setIsOpen(false); | ||
| lenis?.scrollTo(link.href, { | ||
| offset: link.href !== "#main" ? -64 : 0, | ||
| }); | ||
| }} | ||
| > | ||
| {link.name} | ||
| </Link> | ||
| ))} | ||
| </div> | ||
| </SheetContent> | ||
| </Sheet> | ||
| </nav> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,173 @@ | ||
| "use client"; | ||
|
|
||
| import * as React from "react"; | ||
| import { cva, type VariantProps } from "class-variance-authority"; | ||
| import { AnimatePresence, motion } from "framer-motion"; | ||
|
|
||
| import { | ||
| BottomLeftCorner, | ||
| BottomRightCorner, | ||
| TopLeftCorner, | ||
| TopRightCorner, | ||
| } from "@/components/ornament/border"; | ||
| import { cn } from "@/lib/utils"; | ||
| import * as SheetPrimitive from "@radix-ui/react-dialog"; | ||
| import { Cross2Icon } from "@radix-ui/react-icons"; | ||
|
|
||
| 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 text-neutral-50 bg-neutral-900 pt-12 px-6 pb-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 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", | ||
| bottom: | ||
| "inset-x-0 bottom-0 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 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 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} | ||
| > | ||
| <AnimatePresence> | ||
| <motion.div | ||
| className="absolute inset-0 m-2 border border-neutral-100/25" | ||
| initial={{ opacity: 0, scale: 0.95 }} | ||
| animate={{ opacity: 1, scale: 1 }} | ||
| exit={{ opacity: 0, scale: 0.95 }} | ||
| transition={{ duration: 0.3 }} | ||
| > | ||
| <TopLeftCorner | ||
| pathClassName="fill-neutral-100" | ||
| className="absolute -left-2 -top-2 scale-50" | ||
| /> | ||
| <TopRightCorner | ||
| pathClassName="fill-neutral-100" | ||
| className="absolute -right-2 -top-2 scale-50" | ||
| /> | ||
| <BottomLeftCorner | ||
| pathClassName="fill-neutral-100" | ||
| className="absolute -bottom-2 -left-2 scale-50" | ||
| /> | ||
| <BottomRightCorner | ||
| pathClassName="fill-neutral-100" | ||
| className="absolute -bottom-2 -right-2 scale-50" | ||
| /> | ||
| </motion.div> | ||
| </AnimatePresence> | ||
| {children} | ||
| <SheetPrimitive.Close className="absolute right-6 top-6 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"> | ||
| <Cross2Icon 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, | ||
| SheetClose, | ||
| SheetContent, | ||
| SheetDescription, | ||
| SheetFooter, | ||
| SheetHeader, | ||
| SheetOverlay, | ||
| SheetPortal, | ||
| SheetTitle, | ||
| SheetTrigger, | ||
| }; |