feature(public,docs): new public website and docs

2024-11-13 21:15:46 +01:00
parent fc2a019e1d
commit a022cb4831
234 changed files with 9341 additions and 6154 deletions
--- a/apps/public/components/navbar.tsx
+++ b/apps/public/components/navbar.tsx
@@ -0,0 +1,138 @@
+'use client';
+
+import { baseOptions } from '@/app/layout.config';
+import { cn } from '@/lib/utils';
+import { AnimatePresence, motion } from 'framer-motion';
+import { MenuIcon } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
+import { GithubButton } from './github-button';
+import { Logo } from './logo';
+import { Button } from './ui/button';
+
+const Navbar = () => {
+  const pathname = usePathname();
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const navbarRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  useEffect(() => {
+    // If click outside of the menu, close it
+    const handleClick = (e: MouseEvent) => {
+      if (isMobileMenuOpen && !navbarRef.current?.contains(e.target as Node)) {
+        setIsMobileMenuOpen(false);
+      }
+    };
+    window.addEventListener('click', handleClick);
+    return () => window.removeEventListener('click', handleClick);
+  }, [isMobileMenuOpen]);
+
+  if (pathname.startsWith('/docs')) {
+    return null;
+  }
+
+  return (
+    <nav className="fixed top-4 z-50 w-full animate-fade-down" ref={navbarRef}>
+      <div className="container">
+        <div
+          className={cn(
+            'flex justify-between border border-transparent backdrop-blur-lg items-center p-4 -mx-4 rounded-full transition-colors',
+            isScrolled
+              ? 'bg-background/90 border-foreground/10'
+              : 'bg-transparent',
+          )}
+        >
+          {/* Logo */}
+          <div className="flex-shrink-0">
+            <Link href="/" className="row items-center font-medium">
+              <Logo className="h-6" />
+              {baseOptions.nav?.title}
+            </Link>
+          </div>
+
+          <div className="row items-center gap-8">
+            {/* Desktop Navigation */}
+            <div className="hidden md:flex items-center space-x-8 text-sm">
+              {baseOptions.links?.map((link) => {
+                if (link.type !== 'main') {
+                  return null;
+                }
+
+                return (
+                  <Link
+                    key={link.url}
+                    href={link.url!}
+                    className="text-foreground/80 hover:text-foreground font-medium"
+                  >
+                    {link.text}
+                  </Link>
+                );
+              })}
+            </div>
+
+            {/* Right side buttons */}
+            <div className="flex items-center gap-2">
+              <GithubButton />
+              {/* Sign in button */}
+              <Button asChild>
+                <Link href="https://dashboard.openpanel.dev/login">
+                  Sign in
+                </Link>
+              </Button>
+              <Button
+                className="md:hidden -my-2"
+                size="icon"
+                variant="ghost"
+                onClick={() => {
+                  setIsMobileMenuOpen((p) => !p);
+                }}
+              >
+                <MenuIcon className="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+        {/* Mobile menu */}
+        <AnimatePresence>
+          {isMobileMenuOpen && (
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: 'auto', opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="overflow-hidden -mx-4"
+            >
+              <div className="rounded-xl bg-background/90 border border-foreground/10 mt-4 md:hidden backdrop-blur-lg">
+                <div className="col text-sm divide-y divide-foreground/10">
+                  {baseOptions.links?.map((link) => {
+                    if (link.type !== 'main') return null;
+                    return (
+                      <Link
+                        key={link.url}
+                        href={link.url!}
+                        className="text-foreground/80 hover:text-foreground text-xl font-medium p-4 px-4"
+                      >
+                        {link.text}
+                      </Link>
+                    );
+                  })}
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;