Import source: cshare-app/src/components/Navbar

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:14:11 +03:30
parent e8dca5e8f3
commit bbd93de4c6
1 changed files with 165 additions and 0 deletions
@@ -0,0 +1,165 @@
 import { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { MenuIcon, XIcon } from './Icons';
 export default function Navbar() {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const [mobileOpen, setMobileOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { path: '/', label: 'Home' },
    { path: '/upload', label: 'Upload' },
    { path: '/dashboard', label: 'Dashboard' },
    { path: '/preview', label: 'Preview' },
  ];
  const extraLinks = [
    {
      label: 'Features',
      action: () => {
        navigate('/');
        setTimeout(() => document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' }), 150);
      },
    },
    {
      label: 'How it Works',
      action: () => {
        navigate('/');
        setTimeout(() => document.getElementById('how-it-works')?.scrollIntoView({ behavior: 'smooth' }), 150);
      },
    },
    { label: 'Pricing', action: () => go('/pricing') },
    { label: 'Docs', action: () => go('/docs') },
  ];
  const go = (path) => {
    navigate(path);
    setMobileOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  return (
    <>
    <nav
      className="navbar"
      style={{
        boxShadow: scrolled ? '0 1px 20px rgba(0,0,0,0.3)' : 'none',
        borderBottomColor: scrolled ? 'var(--border)' : 'var(--border-subtle)',
        transition: 'all var(--transition-base)',
      }}
    >
      <div className="navbar-logo" onClick={() => go('/')}>
        <div
          className="logo-mark"
          style={{ transition: 'all var(--transition-base)' }}
          onMouseEnter={(e) => {
            e.currentTarget.style.boxShadow = '0 0 16px rgba(74, 144, 255, 0.4)';
            e.currentTarget.style.transform = 'scale(1.05)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.boxShadow = 'none';
            e.currentTarget.style.transform = 'scale(1)';
          }}
        >
          C
        </div>
        CShare
      </div>
      {/* Desktop nav */}
      <div className="navbar-links">
        {links.map((link) => (
          <button
            type="button"
            key={link.path}
            className={`navbar-link ${pathname === link.path ? 'active' : ''}`}
            onClick={() => go(link.path)}
            style={{ position: 'relative' }}
          >
            {link.label}
            {pathname === link.path && (
              <span style={{
                position: 'absolute',
                bottom: '-2px',
                left: '50%',
                transform: 'translateX(-50%)',
                width: '16px',
                height: '2px',
                borderRadius: '1px',
                background: 'var(--accent)',
                boxShadow: '0 0 6px rgba(74, 144, 255, 0.5)',
              }} />
            )}
          </button>
        ))}
        {extraLinks.map((link, i) => (
          <button type="button" key={i} className="navbar-link" onClick={link.action}>
            {link.label}
          </button>
        ))}
        <button
          type="button"
          className="btn btn-primary btn-sm"
          style={{ marginLeft: '12px' }}
          onClick={() => go('/upload')}
        >
          Share Files
        </button>
      </div>
      {/* Mobile hamburger */}
      <button
        type="button"
        className="btn btn-ghost btn-icon mobile-menu-btn"
        aria-label={mobileOpen ? 'Close navigation menu' : 'Open navigation menu'}
        aria-controls="mobile-navigation"
        aria-expanded={mobileOpen}
        onClick={() => setMobileOpen((open) => !open)}
      >
        {mobileOpen ? <XIcon size={20} /> : <MenuIcon size={20} />}
      </button>
    </nav>
    {mobileOpen && (
      <div id="mobile-navigation" className="mobile-menu-panel">
        <div className="mobile-menu-list">
          {links.map((link) => (
            <button
              type="button"
              key={link.path}
              className={`mobile-menu-link ${pathname === link.path ? 'active' : ''}`}
              onClick={() => go(link.path)}
            >
              {link.label}
            </button>
          ))}
          {extraLinks.map((link, i) => (
            <button
              type="button"
              key={i}
              className="mobile-menu-link"
              onClick={() => { link.action(); setMobileOpen(false); }}
            >
              {link.label}
            </button>
          ))}
          <button
            type="button"
            className="btn btn-primary btn-lg mobile-menu-cta"
            onClick={() => go('/upload')}
          >
            Share Files
          </button>
        </div>
      </div>
    )}
    </>
  );
 }