Next JS recipes

nextjs-recipes.md

NextJS recipes

Global css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  [data-nextjs-scroll-focus-boundary] {
    display: contents;
  }
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgb(243, 241, 241);
  border-radius: 4px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(233, 223, 223);
  border-radius: 4px;
}

* {
  box-sizing: border-box;
}

[data-nextjs-scroll-focus-boundary] {
  display: contents;
}

.rainbow-mesh {
  background-color: hsla(0, 100%, 50%, 1);
  background-image: radial-gradient(
      at 40% 20%,
      hsla(28, 100%, 74%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340, 100%, 76%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(242, 100%, 70%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 1) 0px, transparent 50%);
}

.candy-mesh {
  background-color: #ff99ee;
  background-image: radial-gradient(
      at 99% 6%,
      hsla(195, 69%, 67%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 55% 88%, hsla(189, 74%, 69%, 1) 0px, transparent 50%),
    radial-gradient(at 53% 27%, hsla(271, 78%, 63%, 1) 0px, transparent 50%),
    radial-gradient(at 89% 89%, hsla(317, 89%, 70%, 1) 0px, transparent 50%),
    radial-gradient(at 35% 44%, hsla(337, 92%, 61%, 1) 0px, transparent 50%);
}

.glass {
  backdrop-filter: blur(16px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.4);
}

.glass-pane {
  backdrop-filter: blur(16px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 0.5rem;
  border: 2px solid #d3d3d3;
}

Navbar

import { useEffect, useState } from "react";
import { FaBars, FaTimes } from "react-icons/fa";
import disinfolablogo from "../../assets/images/disinfolablogo.png";
import { Link } from "react-router-dom";

export const Navbar = () => {
  const [sidebarVisible, setSidebarVisible] = useState(false);
  useEffect(() => {
    // listen for scroll event, if scroll is greater than 100px, add class to nav

    const scrollHandler = () => {
      if (window.scrollY > 100) {
        document.getElementById("nav")?.classList.add("nav-scroll");
      } else {
        document.getElementById("nav")?.classList.remove("nav-scroll");
      }
    };
    window.addEventListener("scroll", scrollHandler);
    return () => {
      window.removeEventListener("scroll", scrollHandler);
    };
  });
  return (
    <>
      <nav id="nav">
        {/* nav content container */}
        <div className="nav-center">
          {/* nav logo */}
          <div className="nav-header">
            <Link to="/">
              <img src={disinfolablogo} alt="" className="logo" />
            </Link>
          </div>
          {/* nav links */}
          <ul className="nav-links">
            <a href="">Work</a>
            <a href="">Contact</a>
            <a href="">Services</a>
          </ul>
          {/* hamburger button: when clicked, show sidebar */}
          <button className="nav-btn" onClick={() => setSidebarVisible(true)}>
            <FaBars />
          </button>
        </div>
      </nav>
      {/* sidebar */}
      <aside className={`sidebar ${sidebarVisible ? "show-sidebar" : ""}`}>
        <button className="close-btn" onClick={() => setSidebarVisible(false)}>
          <FaTimes />
        </button>
        <div className="sidebar-content">
          <div className="sidebar-logo">
            <img src={disinfolablogo} alt="" />
          </div>
          <ul className="sidebar-links">
            <a href="">Work</a>
            <a href="">Contact</a>
            <a href="">Services</a>
          </ul>
        </div>
      </aside>
    </>
  );
};

nav {
  height: 5rem;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: $primary-500;
  transition: $transition;
}

.nav-center {
  max-width: $max-width;
  width: 90vw;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  height: 3.5rem;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid $primary-100;
  overflow: hidden;
  transition: $transition;
  &:hover {
    filter: blur(1px);
    cursor: pointer;
  }
}

.nav-btn {
  display: none;
}

.nav-links {
  display: flex;
  gap: 1rem;
  // standard link styling
  a {
    color: $primary-100;
    display: block;
    padding: 0.75rem 1rem;
    transition: $transition;
    text-transform: capitalize;
    &:hover {
      color: $secondary-600;
    }
  }
}

// when scroll past 100px, apply this class
.nav-scroll {
  background-color: $primary-500;
  box-shadow: $shadow-3;
}

.sidebar {
  position: fixed;
  inset: 0;
  background-color: $primary-400;
  transform: translate(-100%);
  opacity: 0;
  transition: $transition;
  .close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    @include iconButton($red-dark);
    font-size: 3rem;
  }
  display: grid;
  place-items: center;
}

// when this class is applied, translate sidebar back into view
.show-sidebar {
  transform: translate(0);
  opacity: 1;
}

// when the screen is larger than the breakpoint, hide the sidebar
@media (min-width: $breakpoint-md) {
  .show-sidebar {
    transform: translate(100%);
    opacity: 0;
  }
}

// when screen is small, display hamburger button and hide nav links
@media (max-width: $breakpoint-md) {
  .nav-btn {
    display: flex;
    background: transparent;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 2rem;
    transition: $transition;
    &:hover {
      color: $secondary-600;
      transform: scale(1.05);
    }
  }
  .nav-links {
    display: none;
  }
}