floating-dock

1"use client";
2/**
3 * Note: Use position fixed according to your needs
4 * Desktop navbar is better positioned at the bottom
5 * Mobile navbar is better positioned at bottom right.
6 **/
7 
8import { cn } from "@/lib/utils";
9import { IconLayoutNavbarCollapse } from "@tabler/icons-react";
10import {
11  AnimatePresence,
12  MotionValue,
13  motion,
14  useMotionValue,
15  useSpring,
16  useTransform,
17} from "motion/react";
18 
19import { useRef, useState } from "react";
20 
21export const FloatingDock = ({
22  items,
23  desktopClassName,
24  mobileClassName,
25}: {
26  items: { title: string; icon: React.ReactNode; href: string }[];
27  desktopClassName?: string;
28  mobileClassName?: string;
29}) => {
30  return (
31    <>
32      <FloatingDockDesktop items={items} className={desktopClassName} />
33      <FloatingDockMobile items={items} className={mobileClassName} />
34    </>
35  );
36};
37 
38const FloatingDockMobile = ({
39  items,
40  className,
41}: {
42  items: { title: string; icon: React.ReactNode; href: string }[];
43  className?: string;
44}) => {
45  const [open, setOpen] = useState(false);
46  return (
47    <div className={cn("relative block md:hidden", className)}>
48      <AnimatePresence>
49        {open && (
50          <motion.div
51            layoutId="nav"
52            className="absolute inset-x-0 bottom-full mb-2 flex flex-col gap-2"
53          >
54            {items.map((item, idx) => (
55              <motion.div
56                key={item.title}
57                initial={{ opacity: 0, y: 10 }}
58                animate={{
59                  opacity: 1,
60                  y: 0,
61                }}
62                exit={{
63                  opacity: 0,
64                  y: 10,
65                  transition: {
66                    delay: idx * 0.05,
67                  },
68                }}
69                transition={{ delay: (items.length - 1 - idx) * 0.05 }}
70              >
71                <a
72                  href={item.href}
73                  key={item.title}
74                  className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 dark:bg-neutral-900"
75                >
76                  <div className="h-4 w-4">{item.icon}</div>
77                </a>
78              </motion.div>
79            ))}
80          </motion.div>
81        )}
82      </AnimatePresence>
83      <button
84        onClick={() => setOpen(!open)}
85        className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 dark:bg-neutral-800"
86      >
87        <IconLayoutNavbarCollapse className="h-5 w-5 text-neutral-500 dark:text-neutral-400" />
88// … truncated