feat: create header (#29)

package.json

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",
     "@t3-oss/env-nextjs": "^0.8.0",
     "class-variance-authority": "^0.7.0",

src/app/page.tsx

@@ -2,6 +2,7 @@ import { About } from '@/components/about';
 import { Contact } from '@/components/contact';
 import { Experience } from '@/components/experience';
 import { Footer } from '@/components/footer';
+import { Header } from '@/components/header';
 import { Intro } from '@/components/intro';
 import { Projects } from '@/components/projects';
 import { ThemeToggle } from '@/components/theme-toggle';
@@ -10,6 +11,7 @@ const Home = () => {
   return (
     <>
       <div className="container flex flex-col items-center">
+        <Header />
         <Intro />
         <div className="bg-muted h-16 w-1 rounded-full sm:my-5" />
         <About />
@@ -18,9 +20,7 @@ const Home = () => {
         <Contact />
         <Footer />
       </div>
-      <div className="fixed bottom-5 right-5 sm:bottom-8 sm:right-8">
-        <ThemeToggle />
-      </div>
+      <ThemeToggle className="fixed bottom-5 right-5 hidden sm:bottom-8 sm:right-8 sm:flex" />
     </>
   );
 };

src/components/about.tsx

@@ -3,7 +3,10 @@ import { SectionHeading } from '@/components/section-heading';
 
 export const About = () => {
   return (
-    <section className="my-8 flex w-full flex-col items-center sm:my-10">
+    <section
+      id="about"
+      className="my-8 flex w-full scroll-mt-28 flex-col items-center sm:my-10"
+    >
       <SectionHeading heading="About Me" />
       <div className="max-w-2xl text-center leading-7">
         <p className="mb-4">

src/components/contact.tsx

@@ -34,7 +34,7 @@ export const Contact = () => {
   };
 
   return (
-    <section className="my-8 w-full sm:my-10">
+    <section id="contact" className="my-8 w-full scroll-mt-28 sm:my-10">
       <SectionHeading
         heading="Get In Touch"
         content="Please contact me directly at [email protected] or through this form."

src/components/dialog.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 backdrop-blur-sm',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-8  z-50 grid w-full max-w-lg translate-x-[-50%]  gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-6 top-6 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <X className="size-5" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

src/components/experience.tsx

@@ -14,7 +14,7 @@ import { experiencesData } from '@/lib/data';
 
 export const Experience = () => {
   return (
-    <section className="my-8 sm:my-10">
+    <section id="experience" className="my-8 scroll-mt-28 sm:my-10">
       <SectionHeading
         heading="My Experience"
         content="Projects I worked on. Due to nature of internet businesses not all of them are still online."

src/components/header.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+
+import { Button } from '@/components/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/dialog';
+import { Icons } from '@/components/icons';
+import { ThemeToggle } from '@/components/theme-toggle';
+import { links } from '@/lib/data';
+
+export const Header = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <header className="sm:bg-secondary/80 sticky top-5 z-20 my-5 flex items-center gap-2 sm:top-10 sm:my-10 sm:rounded-full sm:px-8 sm:py-3 sm:backdrop-blur-sm">
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <Button variant="secondary" size="lg" className="sm:hidden">
+            Menu <Icons.chevronDown className="ml-2 size-4" />
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="text-muted-foreground max-h-screen w-[90%]">
+          <DialogHeader>
+            <DialogTitle className="text-md self-start font-medium">
+              Navigation
+            </DialogTitle>
+          </DialogHeader>
+          <nav>
+            <ul>
+              {links.map(({ name, hash }) => (
+                <li
+                  onClick={() => setOpen(false)}
+                  key={name}
+                  className="border-muted-foreground/10 py-3 text-sm [&:not(:last-child)]:border-b"
+                >
+                  <Link className="block" href={hash}>
+                    {name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </DialogContent>
+      </Dialog>
+      <ThemeToggle className="sm:hidden" />
+      <nav className="text-muted-foreground hidden text-sm sm:block">
+        <ul className="flex gap-10">
+          {links.map(({ name, hash }) => (
+            <li key={name}>
+              <Link
+                href={hash}
+                className="hover:text-foreground transition-colors"
+              >
+                {name}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </header>
+  );
+};

src/components/icons.tsx

@@ -1,6 +1,7 @@
 import {
   ArrowRight,
   Briefcase,
+  ChevronDown,
   Download,
   ExternalLink,
   Github,
@@ -17,6 +18,7 @@ export const Icons = {
   preview: ExternalLink,
   githubOutline: Github,
   briefcase: Briefcase,
+  chevronDown: ChevronDown,
   github: (props: LucideProps) => (
     <svg viewBox="0 0 24 24" {...props}>
       <path

src/components/intro.tsx

@@ -5,7 +5,10 @@ import { Icons } from '@/components/icons';
 
 export const Intro = () => {
   return (
-    <section className="my-8 flex flex-col items-center gap-4 text-center sm:my-10">
+    <section
+      id="home"
+      className="my-8 flex scroll-mt-96 flex-col items-center gap-4 text-center sm:my-10"
+    >
       <a href="#" className="bg-muted rounded px-3 py-1 text-sm font-medium">
         🎉
         <span className="ml-3">Check out my new project</span>

src/components/projects.tsx

@@ -4,7 +4,7 @@ import { projectsData } from '@/lib/data';
 
 export const Projects = () => {
   return (
-    <section className="my-8 sm:my-10">
+    <section id="projects" className="my-8 scroll-mt-28 sm:my-10">
       <SectionHeading
         heading="My Projects"
         content="Projects I worked on. Due to nature of internet businesses not all of them are still online."

src/components/theme-toggle.tsx

@@ -2,14 +2,15 @@
 
 import { useTheme } from 'next-themes';
 
-import { Button } from '@/components/button';
+import { Button, ButtonProps } from '@/components/button';
 import { Icons } from '@/components/icons';
 
-export const ThemeToggle = () => {
+export const ThemeToggle = ({ className }: ButtonProps) => {
   const { theme, setTheme } = useTheme();
 
   return (
     <Button
+      className={className}
       variant="secondary"
       size="icon"
       aria-label="theme toggle"

src/lib/data.ts

@@ -1,3 +1,26 @@
+export const links = [
+  {
+    name: 'Home',
+    hash: '#home',
+  },
+  {
+    name: 'About',
+    hash: '#about',
+  },
+  {
+    name: 'Projects',
+    hash: '#projects',
+  },
+  {
+    name: 'Experience',
+    hash: '#experience',
+  },
+  {
+    name: 'Contact',
+    hash: '#contact',
+  },
+] as const;
+
 export const projectsData = [
   {
     image: '/project-image.jpg',

src/styles/globals.css

@@ -54,6 +54,10 @@
     @apply border-border;
   }
 
+  html {
+    @apply scroll-smooth;
+  }
+
   body {
     @apply bg-background text-foreground;
   }