Floating Bottom Nav

'use client';

import './BottomNavMobile.css';

/** BottomNavMobile — ported from astro-component-kit. */
export interface BottomNavMobileProps {
}

export function BottomNavMobile({}: BottomNavMobileProps) {
  return (
    <>
      <div className="bottom-nav" data-rk-0f9377="">
        <a href="#" className="active" data-rk-0f9377="">🏠</a>
        <a href="#" data-rk-0f9377="">🔍</a>
        <a href="#" data-rk-0f9377="">🔔</a>
        <a href="#" data-rk-0f9377="">👤</a>
      </div>
    </>
  );
}

export default BottomNavMobile;

/* BottomNavMobile — ported from astro-component-kit (navigation/BottomNavMobile.astro) */

.bottom-nav:where([data-rk-0f9377]) { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); width: 90%; max-width: 400px; height: 60px; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 30px; display: flex; justify-content: space-around; align-items: center; z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.bottom-nav:where([data-rk-0f9377]) a:where([data-rk-0f9377]) { font-size: 1.25rem; opacity: 0.5; text-decoration: none; transition: 0.3s; }
.bottom-nav:where([data-rk-0f9377]) a.active:where([data-rk-0f9377]) { opacity: 1; transform: translateY(-5px); }