FloatingNav — Export Code

Klik op de knop om de volledige code te kopiëren. Plak daarna in de chat van je andere Base44 project en zeg: "Add this FloatingNav component to my app".

// ============================================================
// FloatingNav Component - Khonbaa Bangkok Magazine
// Copy this entire block and paste it into your Base44 chat
// ============================================================

// 1. Install dependencies (already included in Base44):
//    - framer-motion
//    - react-router-dom
//    - lucide-react

// 2. Create file: components/FloatingNav.jsx
//    Paste the component code below:

import { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { X } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

// ✏️ REPLACE THESE with your own categories:
const categories = [
  { emoji: '🏠', label: 'Category 1', slug: 'category-1' },
  { emoji: '⭐', label: 'Category 2', slug: 'category-2' },
  { emoji: '🎯', label: 'Category 3', slug: 'category-3' },
];

export default function FloatingNav() {
  const [isOpen, setIsOpen] = useState(false);

  // ✏️ REPLACE with your own external links (or remove this section):
  const externalLinks = [
    { href: 'https://yoursite.com', label: 'yoursite.com' },
  ];

  return (
    <>
      <nav className="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-lg">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          {/* ✏️ REPLACE with your own logo/site name */}
          <Link to="/" className="text-2xl font-bold text-primary">
            My Site
          </Link>
          <button
            onClick={() => setIsOpen(!isOpen)}
            className="flex flex-col gap-1.5 p-3 hover:scale-110 transition-transform"
            aria-label="Menu"
          >
            {isOpen ? (
              <X className="w-10 h-10 text-primary" />
            ) : (
              <>
                <span className="block h-1.5 w-10 rounded-full" style={{ background: '#ff1493' }}></span>
                <span className="block h-1.5 w-10 rounded-full" style={{ background: '#ffd700' }}></span>
                <span className="block h-1.5 w-10 rounded-full" style={{ background: '#a855f7' }}></span>
              </>
            )}
          </button>
        </div>
      </nav>

      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, y: '-100%' }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: '-100%' }}
            transition={{ type: 'spring', damping: 30, stiffness: 250 }}
            className="fixed inset-0 z-40 bg-black/97 backdrop-blur-xl overflow-y-auto"
          >
            <div className="min-h-full px-6 pt-24 pb-16">
              <div className="max-w-5xl mx-auto">
                {/* ✏️ REPLACE with your own menu title */}
                <p className="text-muted-foreground text-sm uppercase tracking-widest mb-6 text-center">
                  Explore
                </p>
                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 mb-12">
                  {categories.map((cat, i) => (
                    <motion.div
                      key={cat.slug}
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: i * 0.04 }}
                    >
                      <Link
                        to={`/category/${cat.slug}`}
                        onClick={() => setIsOpen(false)}
                        className="flex flex-col items-center gap-2 p-4 rounded-xl border border-border hover:border-primary hover:bg-primary/10 transition-all group text-center"
                      >
                        <span className="text-3xl">{cat.emoji}</span>
                        <span className="text-sm font-bold text-foreground group-hover:text-primary transition-colors leading-tight">
                          {cat.label}
                        </span>
                        <span className="text-xs text-muted-foreground">{cat.labelThai}</span>
                      </Link>
                    </motion.div>
                  ))}
                </div>

                <div className="border-t border-border pt-8 flex flex-wrap justify-center gap-6">
                  {externalLinks.map((link) => (
                    <a
                      key={link.href}
                      href={link.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-accent hover:text-secondary transition-colors text-lg font-semibold"
                    >
                      {link.label}
                    </a>
                  ))}
                </div>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}

// ============================================================
// HOW TO USE IN ANOTHER BASE44 PROJECT:
// 1. Copy ALL of this code
// 2. Open the chat in your other Base44 project
// 3. Paste and say: "Add this FloatingNav component to my app"
// 4. The AI will create the file and hook it up automatically
// ============================================================