react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
91 lines (90 loc) • 7.02 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useState } from 'react';
import { cn } from '../../../utils';
import { Icon } from '../../atoms/Icon';
import { Sidebar } from '../Sidebar';
// React Router imports - we'll use a simpler approach
const Link = ({ to, children, className, onClick, ...props }) => (_jsx("a", { href: to, className: className, onClick: onClick, ...props, children: children }));
const useLocation = () => ({ pathname: window.location.pathname });
const useNavigate = () => (to) => { window.location.href = to; };
export const Navbar = ({ brand, variant = 'default', className, mobileUserButton = 'sidebar', navigationLinks = [], onUserClick, userButtonText = 'User', userButtonIcon = 'user', userButtonElement, userButtonNavigateTo, userMenu, children, childrenPosition = 'end', containerSize = 'xl', accountLanguage = 'en', ...props }) => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
const location = useLocation();
const navigate = useNavigate();
const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
};
const closeMenu = () => {
setIsMenuOpen(false);
};
const closeUserMenu = () => {
setIsUserMenuOpen(false);
};
const handleUserClick = () => {
if (onUserClick) {
onUserClick();
}
else if (userMenu) {
// Open user menu sidebar
setIsUserMenuOpen(true);
}
else if (userButtonNavigateTo) {
// Navigate to specified route
navigate(userButtonNavigateTo);
}
else {
// Default behavior - you can customize this
console.log('User clicked');
}
};
const getAccountLanguage = () => {
switch (accountLanguage) {
case 'en':
return 'Account';
case 'fr':
return 'Compte';
case 'es':
return 'Cuenta';
case 'de':
return 'Konto';
case 'it':
return 'Account';
case 'pt':
return 'Conta';
default:
return 'Account';
}
};
const shouldShowHeaderUser = mobileUserButton === 'header' || mobileUserButton === 'both';
const shouldShowSidebarUser = mobileUserButton === 'sidebar' || mobileUserButton === 'both';
const renderUserButton = (className, showText = false) => (_jsxs("button", { className: className, onClick: handleUserClick, "aria-label": userButtonText, children: [userButtonElement || _jsx(Icon, { name: userButtonIcon, size: "md" }), showText && _jsx("span", { children: userButtonText })] }));
const renderNavLinks = () => (_jsx(_Fragment, { children: navigationLinks.map((link) => (_jsx(Link, { to: link.path, className: cn('navbar__nav-link', location.pathname === link.path && 'navbar__nav-link--active'), onClick: closeMenu, children: link.label }, link.path))) }));
const renderUserMenu = () => {
if (!userMenu)
return null;
const defaultMenuItems = [
{ label: 'Profile', icon: 'user', path: '/profile' },
{ label: 'Settings', icon: 'settings', path: '/settings' },
{ label: 'Purchases', icon: 'shopping-bag', path: '/purchases' },
{ isDivider: true },
{ label: 'Logout', icon: 'logout', onClick: () => console.log('Logout clicked') }
];
const menuItems = userMenu.menuItems || defaultMenuItems;
return (_jsx(Sidebar, { direction: "right", isOpen: isUserMenuOpen, onClose: closeUserMenu, className: "navbar__user-menu", showHeader: true, headerContent: _jsxs("div", { className: "navbar__user-menu-header", children: [_jsx("h3", { children: getAccountLanguage() }), _jsx("button", { className: "navbar__user-menu-close", onClick: closeUserMenu, "aria-label": "Close user menu", children: _jsx(Icon, { name: "close", size: "sm" }) })] }), children: _jsxs("div", { className: "navbar__user-menu-content", children: [userMenu.showUserInfo && userMenu.user && (_jsxs("div", { className: "navbar__user-info", children: [userMenu.user.avatar && (_jsx("img", { src: userMenu.user.avatar, alt: "User avatar", className: "navbar__user-avatar" })), _jsxs("div", { className: "navbar__user-details", children: [userMenu.user.name && (_jsx("div", { className: "navbar__user-name", children: userMenu.user.name })), userMenu.user.email && (_jsx("div", { className: "navbar__user-email", children: userMenu.user.email }))] })] })), _jsx("nav", { className: "navbar__user-menu-nav", children: menuItems.map((item, index) => {
if (item.isDivider) {
return _jsx("div", { className: "navbar__user-menu-divider" }, index);
}
return (_jsxs("button", { className: "navbar__user-menu-item", onClick: () => {
if (item.onClick) {
item.onClick();
}
else if (item.path) {
navigate(item.path);
}
closeUserMenu();
}, children: [item.icon && _jsx(Icon, { name: item.icon, size: "sm" }), _jsx("span", { children: item.label })] }, index));
}) })] }) }));
};
return (_jsxs(_Fragment, { children: [_jsx("nav", { className: cn('navbar', variant !== 'default' && `navbar--${variant}`, className), ...props, children: _jsxs("div", { className: cn('navbar__container', `container-${containerSize}`), children: [_jsxs("div", { className: "navbar__header", children: [brand && _jsx("div", { className: "navbar__brand", children: brand }), _jsxs("div", { className: "navbar__actions", children: [shouldShowHeaderUser && renderUserButton('navbar__user-btn'), _jsx("button", { className: "navbar__toggle", onClick: toggleMenu, "aria-label": "Toggle navigation menu", children: _jsx(Icon, { name: isMenuOpen ? 'close' : 'hamburger', size: "lg" }) })] })] }), _jsxs("div", { className: "navbar__content", children: [_jsx("div", { className: "navbar__nav-items", children: renderNavLinks() }), children && (_jsx("div", { className: `navbar__children navbar__children--${childrenPosition}`, children: children })), renderUserButton('navbar__user-btn navbar__user-btn--desktop')] })] }) }), _jsx(Sidebar, { direction: "right", isOpen: isMenuOpen, onClose: closeMenu, className: "navbar__mobile-sidebar", showHeader: false, children: _jsxs("div", { className: "navbar__mobile-nav", children: [renderNavLinks(), shouldShowSidebarUser && (_jsx("div", { className: "navbar__mobile-user", children: renderUserButton('navbar__user-btn navbar__user-btn--mobile', true) }))] }) }), renderUserMenu()] }));
};