{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "animated-mobile-navbar-html-demo",
"title": "Animated Mobile Navbar",
"description": "Example showcasing the Animated Mobile Navbar component in HTML, CSS, JavaScript and Motion.",
"dependencies": [
"motion"
],
"registryDependencies": [
"https://atlasui.dev/r/animated-mobile-navbar-html.json"
],
"files": [
{
"path": "registry/html/examples/animated-mobile-navbar-html-demo/index.html",
"content": "\n\n \n \n \n Animated Mobile Navbar - Atlas UI\n \n \n \n \n\n \n \n \n\n",
"type": "registry:file",
"target": "~/animated-mobile-navbar/index.html"
},
{
"path": "registry/html/examples/animated-mobile-navbar-html-demo/style.css",
"content": ":root {\n --background: light-dark(\n oklch(100% 0.00011 271.152),\n oklch(18.22% 0.00002 271.152)\n );\n --foreground: light-dark(\n oklch(18.22% 0.00002 271.152),\n oklch(98.511% 0.00011 271.152)\n );\n --content-background: light-dark(white, black);\n --muted: light-dark(\n oklch(97.015% 0.00011 271.152),\n oklch(26.862% 0.00003 271.152)\n );\n --muted-foreground: light-dark(\n oklch(71.547% 0.00008 271.152),\n oklch(71.547% 0.00008 271.152)\n );\n}\n\nhtml {\n color-scheme: light dark;\n}\n\nbody {\n margin: 0;\n padding: 0;\n font-family: Arial, sans-serif;\n background: var(--background);\n color: var(--foreground);\n text-align: center;\n height: 100svh;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.menu-trigger {\n background: transparent;\n border: none;\n color: var(--foreground);\n cursor: pointer;\n border-radius: 0.5rem;\n height: 2rem;\n width: 2rem;\n\n &:hover {\n background-color: var(--muted);\n }\n}\n\n.mobile-menu {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background: var(--content-background);\n transform: scaleY(0);\n transform-origin: top;\n opacity: 0;\n pointer-events: none;\n z-index: 99;\n padding: 2.5rem 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.mobile-menu.active {\n pointer-events: auto;\n}\n\n.menu-close {\n position: absolute;\n top: 1.25rem;\n right: 1.25rem;\n background: transparent;\n border: none;\n color: var(--foreground);\n cursor: pointer;\n border-radius: 0.5rem;\n height: 2rem;\n width: 2rem;\n\n &:hover {\n background-color: var(--muted);\n }\n}\n\n.menu-links {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n margin-top: 4rem;\n overflow: hidden;\n height: 100%;\n}\n\n.nav-link {\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: bold;\n color: var(--muted-foreground);\n text-transform: uppercase;\n text-decoration: none;\n opacity: 0;\n transform: translateY(30vh);\n position: relative;\n\n &::after {\n content: \"\";\n background-color: var(--foreground);\n position: absolute;\n bottom: -0.125rem;\n left: 0;\n height: 1px;\n width: 100%;\n transform: scaleX(0);\n transition: transform 300ms ease-in-out;\n }\n\n &:hover {\n color: var(--foreground);\n\n &::after {\n transform: scaleX(1.25);\n }\n }\n}\n",
"type": "registry:file",
"target": "~/animated-mobile-navbar/style.css"
},
{
"path": "registry/html/examples/animated-mobile-navbar-html-demo/script.js",
"content": "import { animate, stagger } from \"motion\";\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n const menuTrigger = document.getElementById(\"menu-trigger\");\n const menuClose = document.getElementById(\"menu-close\");\n const mobileMenu = document.getElementById(\"mobile-menu\");\n const navLinks = document.querySelectorAll(\".nav-link\");\n\n const openMenu = () => {\n mobileMenu.classList.add(\"active\");\n\n animate(\n mobileMenu,\n { transform: \"translateY(0%)\", opacity: 1 },\n { duration: 0.5, easing: [0.12, 0, 0.39, 0] }\n );\n\n animate(\n navLinks,\n { opacity: 1, transform: \"translateY(0px)\" },\n {\n delay: stagger(0.09, { start: 0.3 }),\n duration: 0.7,\n easing: [0, 0.55, 0.45, 1],\n }\n );\n };\n\n const closeMenu = () => {\n animate(\n navLinks,\n { opacity: 0, transform: \"translateY(30px)\" },\n {\n delay: stagger(0.09, { start: 0, from: \"last\" }),\n duration: 0.5,\n easing: [0.37, 0, 0.36, 1],\n }\n ).finished.then(() => {\n animate(\n mobileMenu,\n { transform: \"translateY(-100%)\", opacity: 0 },\n {\n duration: 0.5,\n easing: [0.22, 1, 0.36, 1],\n }\n ).finished.then(() => {\n mobileMenu.classList.remove(\"active\");\n });\n });\n };\n\n menuTrigger.addEventListener(\"click\", openMenu);\n menuClose.addEventListener(\"click\", closeMenu);\n});\n",
"type": "registry:file",
"target": "~/animated-mobile-navbar/script.js"
}
],
"meta": {
"framework": "html"
},
"type": "registry:example"
}