Implement react-layered for Z-Index Management

app/page.tsx

@@ -25,7 +25,7 @@ export default async function Home() {
 
   return (
     <>
-      <div className="z-10 w-full max-w-xl px-5 xl:px-0">
+      <div className="w-full max-w-xl px-5 xl:px-0">
         <a
           href="https://twitter.com/steventey/status/1613928948915920896"
           target="_blank"

components/layout/navbar.tsx

@@ -6,22 +6,25 @@ import useScroll from "@/lib/hooks/use-scroll";
 import { useSignInModal } from "./sign-in-modal";
 import UserDropdown from "./user-dropdown";
 import { Session } from "next-auth";
+import { useLayer } from "@/lib/hooks/use-layer";
 
 export default function NavBar({ session }: { session: Session | null }) {
   const { SignInModal, setShowSignInModal } = useSignInModal();
+  const { style } = useLayer("navbar");
   const scrolled = useScroll(50);
 
   return (
     <>
       <SignInModal />
       <div
-        className={`fixed top-0 w-full flex justify-center ${
+        style={style}
+        className={`fixed top-0 flex w-full justify-center ${
           scrolled
             ? "border-b border-gray-200 bg-white/50 backdrop-blur-xl"
             : "bg-white/0"
-        } z-30 transition-all`}
+        } transition-all`}
       >
-        <div className="mx-5 flex h-16 max-w-screen-xl items-center justify-between w-full">
+        <div className="mx-5 flex h-16 w-full max-w-screen-xl items-center justify-between">
           <Link href="/" className="flex items-center font-display text-2xl">
             <Image
               src="/logo.png"

components/shared/modal.tsx

@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils";
 import { Drawer } from "vaul";
 import * as Dialog from "@radix-ui/react-dialog";
 import useMediaQuery from "@/lib/hooks/use-media-query";
+import { useLayer } from "@/lib/hooks/use-layer";
 
 export default function Modal({
   children,
@@ -18,19 +19,27 @@ export default function Modal({
   setShowModal: Dispatch<SetStateAction<boolean>>;
 }) {
   const { isMobile } = useMediaQuery();
+  const { style } = useLayer("modal");
 
   if (isMobile) {
     return (
       <Drawer.Root open={showModal} onOpenChange={setShowModal}>
-        <Drawer.Overlay className="fixed inset-0 z-40 bg-gray-100 bg-opacity-10 backdrop-blur" />
+        <Drawer.Overlay
+          style={style.overlay}
+          className="fixed inset-0 bg-gray-100 bg-opacity-10 backdrop-blur"
+        />
         <Drawer.Portal>
           <Drawer.Content
+            style={style.content}
             className={cn(
-              "fixed bottom-0 left-0 right-0 z-50 mt-24 rounded-t-[10px] border-t border-gray-200 bg-white",
+              "fixed bottom-0 left-0 right-0 mt-24 rounded-t-[10px] border-t border-gray-200 bg-white",
               className,
             )}
           >
-            <div className="sticky top-0 z-20 flex w-full items-center justify-center rounded-t-[10px] bg-inherit">
+            <div
+              style={style.bar}
+              className="sticky top-0 flex w-full items-center justify-center rounded-t-[10px] bg-inherit"
+            >
               <div className="my-3 h-1 w-12 rounded-full bg-gray-300" />
             </div>
             {children}
@@ -46,13 +55,15 @@ export default function Modal({
         <Dialog.Overlay
           // for detecting when there's an active opened modal
           id="modal-backdrop"
-          className="animate-fade-in fixed inset-0 z-40 bg-gray-100 bg-opacity-50 backdrop-blur-md"
+          style={style.overlay}
+          className="animate-fade-in fixed inset-0 bg-gray-100 bg-opacity-50 backdrop-blur-md"
         />
         <Dialog.Content
           onOpenAutoFocus={(e) => e.preventDefault()}
           onCloseAutoFocus={(e) => e.preventDefault()}
+          style={style.content}
           className={cn(
-            "animate-scale-in fixed inset-0 z-40 m-auto max-h-fit w-full max-w-md overflow-hidden border border-gray-200 bg-white p-0 shadow-xl md:rounded-2xl",
+            "animate-scale-in fixed inset-0 m-auto max-h-fit w-full max-w-md overflow-hidden border border-gray-200 bg-white p-0 shadow-xl md:rounded-2xl",
             className,
           )}
         >

components/shared/popover.tsx

@@ -4,6 +4,7 @@ import { Dispatch, ReactNode, SetStateAction } from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Drawer } from "vaul";
 import useMediaQuery from "@/lib/hooks/use-media-query";
+import { useLayer } from "@/lib/hooks/use-layer";
 
 export default function Popover({
   children,
@@ -19,16 +20,26 @@ export default function Popover({
   setOpenPopover: Dispatch<SetStateAction<boolean>>;
   mobileOnly?: boolean;
 }) {
+  const { style } = useLayer("popover");
   const { isMobile } = useMediaQuery();
 
   if (isMobile) {
     return (
       <Drawer.Root open={openPopover} onOpenChange={setOpenPopover}>
         <div className="sm:hidden">{children}</div>
-        <Drawer.Overlay className="fixed inset-0 z-40 bg-gray-100 bg-opacity-10 backdrop-blur" />
+        <Drawer.Overlay
+          style={style.overlay}
+          className="fixed inset-0 bg-gray-100 bg-opacity-10 backdrop-blur"
+        />
         <Drawer.Portal>
-          <Drawer.Content className="fixed bottom-0 left-0 right-0 z-50 mt-24 rounded-t-[10px] border-t border-gray-200 bg-white">
-            <div className="sticky top-0 z-20 flex w-full items-center justify-center rounded-t-[10px] bg-inherit">
+          <Drawer.Content
+            style={style.content}
+            className="fixed bottom-0 left-0 right-0 mt-24 rounded-t-[10px] border-t border-gray-200 bg-white"
+          >
+            <div
+              style={style.bar}
+              className="sticky top-0 flex w-full items-center justify-center rounded-t-[10px] bg-inherit"
+            >
               <div className="my-3 h-1 w-12 rounded-full bg-gray-300" />
             </div>
             <div className="flex min-h-[150px] w-full items-center justify-center overflow-hidden bg-white pb-8 align-middle shadow-xl">
@@ -50,7 +61,8 @@ export default function Popover({
         <PopoverPrimitive.Content
           sideOffset={8}
           align={align}
-          className="z-50 hidden animate-slide-up-fade items-center rounded-md border border-gray-200 bg-white drop-shadow-lg sm:block"
+          style={style.content}
+          className="hidden animate-slide-up-fade items-center rounded-md border border-gray-200 bg-white drop-shadow-lg sm:block"
         >
           {content}
         </PopoverPrimitive.Content>

components/shared/tooltip.tsx

@@ -4,6 +4,7 @@ import { ReactNode } from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { Drawer } from "vaul";
 import useMediaQuery from "@/lib/hooks/use-media-query";
+import { useLayer } from "@/lib/hooks/use-layer";
 
 export default function Tooltip({
   children,
@@ -14,6 +15,7 @@ export default function Tooltip({
   content: ReactNode | string;
   fullWidth?: boolean;
 }) {
+  const { style } = useLayer("tooltip");
   const { isMobile } = useMediaQuery();
 
   if (isMobile) {
@@ -27,10 +29,19 @@ export default function Tooltip({
         >
           {children}
         </Drawer.Trigger>
-        <Drawer.Overlay className="fixed inset-0 z-40 bg-gray-100 bg-opacity-10 backdrop-blur" />
+        <Drawer.Overlay
+          style={style.overlay}
+          className="fixed inset-0 bg-gray-100 bg-opacity-10 backdrop-blur"
+        />
         <Drawer.Portal>
-          <Drawer.Content className="fixed bottom-0 left-0 right-0 z-50 mt-24 rounded-t-[10px] border-t border-gray-200 bg-white">
-            <div className="sticky top-0 z-20 flex w-full items-center justify-center rounded-t-[10px] bg-inherit">
+          <Drawer.Content
+            style={style.content}
+            className="fixed bottom-0 left-0 right-0 mt-24 rounded-t-[10px] border-t border-gray-200 bg-white"
+          >
+            <div
+              style={style.bar}
+              className="sticky top-0 flex w-full items-center justify-center rounded-t-[10px] bg-inherit"
+            >
               <div className="my-3 h-1 w-12 rounded-full bg-gray-300" />
             </div>
             <div className="flex min-h-[150px] w-full items-center justify-center overflow-hidden bg-white align-middle shadow-xl">
@@ -61,7 +72,8 @@ export default function Tooltip({
         <TooltipPrimitive.Content
           sideOffset={8}
           side="top"
-          className="z-[99] hidden animate-slide-up-fade items-center overflow-hidden rounded-md border border-gray-200 bg-white shadow-md md:block"
+          style={style.content}
+          className="hidden animate-slide-up-fade items-center overflow-hidden rounded-md border border-gray-200 bg-white shadow-md md:block"
         >
           {typeof content === "string" ? (
             <div className="block max-w-xs px-4 py-2 text-center text-sm text-gray-700">

lib/hooks/use-layer.ts

@@ -0,0 +1,8 @@
+import { useLayerConfig as layers } from "react-layered";
+
+export const useLayer = layers([
+  "navbar",
+  { key: "modal", parts: ["overlay", "content", "bar"] },
+  { key: "popover", parts: ["overlay", "content", "bar"] },
+  { key: "tooltip", parts: ["overlay", "content", "bar"] },
+]);

package.json

@@ -33,6 +33,7 @@
     "next-auth": "4.22.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-layered": "^2.2.0",
     "react-markdown": "^8.0.7",
     "tailwind-merge": "^1.14.0",
     "typescript": "5.2.2",