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.
36 lines (35 loc) • 3.33 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { cn } from '../../../utils';
import { Icon } from '../../atoms/Icon';
import { Sidebar } from '../Sidebar';
export const Navbar = ({ brand, variant = 'default', className, mobileUserButton = 'sidebar', navigationLinks = [], onUserClick, userButtonText = 'User', userButtonIcon = 'user', userButtonNavigateTo, children, childrenPosition = 'end', ...props }) => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const location = useLocation();
const navigate = useNavigate();
const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
};
const closeMenu = () => {
setIsMenuOpen(false);
};
const handleUserClick = () => {
if (onUserClick) {
onUserClick();
}
else if (userButtonNavigateTo) {
// Navigate to specified route
navigate(userButtonNavigateTo);
}
else {
// Default behavior - you can customize this
console.log('User clicked');
}
};
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: [_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))) }));
return (_jsxs(_Fragment, { children: [_jsx("nav", { className: cn('navbar', variant !== 'default' && `navbar--${variant}`, className), ...props, children: _jsxs("div", { className: "navbar__container", 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) }))] }) })] }));
};