first commit

common/resources/client/ui/navigation/navbar/logo.tsx

@@ -0,0 +1,54 @@
+import {useTrans} from '@common/i18n/use-trans';
+import {useSettings} from '@common/core/settings/use-settings';
+import {Link} from 'react-router-dom';
+import {NavbarProps} from '@common/ui/navigation/navbar/navbar';
+import clsx from 'clsx';
+
+interface LogoProps {
+  color?: NavbarProps['color'];
+  logoColor?: NavbarProps['logoColor'];
+  isDarkMode?: boolean;
+  className?: string;
+}
+export function Logo({color, logoColor, isDarkMode, className}: LogoProps) {
+  const {trans} = useTrans();
+  const {branding} = useSettings();
+
+  let desktopLogo: string;
+  let mobileLogo: string;
+  if (
+    isDarkMode ||
+    !branding.logo_dark ||
+    (logoColor !== 'dark' && color !== 'bg' && color !== 'bg-alt')
+  ) {
+    desktopLogo = branding.logo_light;
+    mobileLogo = branding.logo_light_mobile;
+  } else {
+    desktopLogo = branding.logo_dark;
+    mobileLogo = branding.logo_dark_mobile;
+  }
+
+  if (!mobileLogo && !desktopLogo) {
+    return null;
+  }
+
+  return (
+    <Link
+      to="/"
+      className={clsx(
+        'mr-4 block h-full max-h-26 flex-shrink-0 md:mr-24 md:max-h-36',
+        className,
+      )}
+      aria-label={trans({message: 'Go to homepage'})}
+    >
+      <picture>
+        <source srcSet={mobileLogo || desktopLogo} media="(max-width: 768px)" />
+        <source srcSet={desktopLogo} media="(min-width: 768px)" />
+        <img
+          className="block h-full max-h-26 w-auto md:max-h-36"
+          alt={trans({message: 'Site logo'})}
+        />
+      </picture>
+    </Link>
+  );
+}

common/resources/client/ui/navigation/navbar/navbar-auth-buttons.tsx

@@ -0,0 +1,83 @@
+import {ButtonColor} from '@common/ui/buttons/get-shared-button-style';
+import {useSettings} from '@common/core/settings/use-settings';
+import {useNavigate} from '@common/utils/hooks/use-navigate';
+import {Menu, MenuTrigger} from '@common/ui/navigation/menu/menu-trigger';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {PersonIcon} from '@common/icons/material/Person';
+import {Item} from '@common/ui/forms/listbox/item';
+import {Trans} from '@common/i18n/trans';
+import {Link} from 'react-router-dom';
+import {Button} from '@common/ui/buttons/button';
+import {NavbarProps} from '@common/ui/navigation/navbar/navbar';
+import {Fragment} from 'react';
+
+interface NavbarAuthButtonsProps {
+  primaryButtonColor?: ButtonColor;
+  navbarColor?: NavbarProps['color'];
+}
+export function NavbarAuthButtons({
+  primaryButtonColor,
+  navbarColor,
+}: NavbarAuthButtonsProps) {
+  if (!primaryButtonColor) {
+    primaryButtonColor = navbarColor === 'primary' ? 'paper' : 'primary';
+  }
+
+  return (
+    <Fragment>
+      <MobileButtons />
+      <DesktopButtons primaryButtonColor={primaryButtonColor} />
+    </Fragment>
+  );
+}
+
+interface DesktopButtonsProps {
+  primaryButtonColor: ButtonColor;
+}
+function DesktopButtons({primaryButtonColor}: DesktopButtonsProps) {
+  const {registration} = useSettings();
+  return (
+    <div className="text-sm max-md:hidden">
+      {!registration.disable && (
+        <Button
+          elementType={Link}
+          to="/register"
+          variant="text"
+          className="mr-10"
+        >
+          <Trans message="Register" />
+        </Button>
+      )}
+      <Button
+        elementType={Link}
+        to="/login"
+        variant="raised"
+        color={primaryButtonColor}
+      >
+        <Trans message="Login" />
+      </Button>
+    </div>
+  );
+}
+
+function MobileButtons() {
+  const {registration} = useSettings();
+  const navigate = useNavigate();
+  return (
+    <MenuTrigger>
+      <IconButton size="md" className="md:hidden">
+        <PersonIcon />
+      </IconButton>
+      <Menu>
+        <Item value="login" onSelected={() => navigate('/login')}>
+          <Trans message="Login" />
+        </Item>
+        {!registration.disable && (
+          <Item value="register" onSelected={() => navigate('/register')}>
+            <Trans message="Register" />
+          </Item>
+        )}
+      </Menu>
+    </MenuTrigger>
+  );
+}

common/resources/client/ui/navigation/navbar/navbar-auth-menu.tsx

@@ -0,0 +1,137 @@
+import {ReactElement, useContext} from 'react';
+import {ListboxItemProps} from '@common/ui/forms/listbox/item';
+import {SiteConfigContext} from '@common/core/settings/site-config-context';
+import {useLogout} from '@common/auth/requests/logout';
+import {useCustomMenu} from '@common/menus/use-custom-menu';
+import {useSettings} from '@common/core/settings/use-settings';
+import {useAuth} from '@common/auth/use-auth';
+import {useNavigate} from '@common/utils/hooks/use-navigate';
+import {useThemeSelector} from '@common/ui/themes/theme-selector-context';
+import {
+  Menu,
+  MenuItem,
+  MenuTrigger,
+} from '@common/ui/navigation/menu/menu-trigger';
+import {NotificationsIcon} from '@common/icons/material/Notifications';
+import {Trans} from '@common/i18n/trans';
+import {PaymentsIcon} from '@common/icons/material/Payments';
+import {createSvgIconFromTree} from '@common/icons/create-svg-icon';
+import {AccountCircleIcon} from '@common/icons/material/AccountCircle';
+import {DarkModeIcon} from '@common/icons/material/DarkMode';
+import {LightModeIcon} from '@common/icons/material/LightMode';
+import {ExitToAppIcon} from '@common/icons/material/ExitToApp';
+
+interface Props {
+  children: ReactElement;
+  items?: ReactElement<ListboxItemProps>[];
+}
+export function NavbarAuthMenu({children, items}: Props) {
+  const {auth} = useContext(SiteConfigContext);
+  const logout = useLogout();
+  const menu = useCustomMenu('auth-dropdown');
+  const {notifications, themes} = useSettings();
+  const {user, isSubscribed} = useAuth();
+  const navigate = useNavigate();
+  const {selectedTheme, selectTheme} = useThemeSelector();
+  if (!selectedTheme || !user) return null;
+  const hasUnreadNotif = !!user.unread_notifications_count;
+
+  const notifMenuItem = (
+    <MenuItem
+      className="md:hidden"
+      value="notifications"
+      startIcon={<NotificationsIcon />}
+      onSelected={() => {
+        navigate('/notifications');
+      }}
+    >
+      <Trans message="Notifications" />
+      {hasUnreadNotif ? ` (${user.unread_notifications_count})` : undefined}
+    </MenuItem>
+  );
+
+  const billingMenuItem = (
+    <MenuItem
+      value="billing"
+      startIcon={<PaymentsIcon />}
+      onSelected={() => {
+        navigate('/billing');
+      }}
+    >
+      <Trans message="Billing" />
+    </MenuItem>
+  );
+
+  return (
+    <MenuTrigger>
+      {children}
+      <Menu>
+        {menu &&
+          menu.items.map(item => {
+            const Icon = item.icon && createSvgIconFromTree(item.icon);
+            return (
+              <MenuItem
+                value={item.id}
+                key={item.id}
+                startIcon={Icon && <Icon />}
+                onSelected={() => {
+                  if (item.type === 'link') {
+                    window.open(item.action, '_blank');
+                  } else {
+                    navigate(item.action);
+                  }
+                }}
+              >
+                <Trans message={item.label} />
+              </MenuItem>
+            );
+          })}
+        {auth.getUserProfileLink && (
+          <MenuItem
+            value="profile"
+            startIcon={<AccountCircleIcon />}
+            onSelected={() => {
+              navigate(auth.getUserProfileLink!(user));
+            }}
+          >
+            <Trans message="Profile page" />
+          </MenuItem>
+        )}
+        {items?.map(item => item)}
+        {notifications?.integrated ? notifMenuItem : undefined}
+        {isSubscribed && billingMenuItem}
+        {themes?.user_change && !selectedTheme.is_dark && (
+          <MenuItem
+            value="light"
+            startIcon={<DarkModeIcon />}
+            onSelected={() => {
+              selectTheme('dark');
+            }}
+          >
+            <Trans message="Dark mode" />
+          </MenuItem>
+        )}
+        {themes?.user_change && selectedTheme.is_dark && (
+          <MenuItem
+            value="dark"
+            startIcon={<LightModeIcon />}
+            onSelected={() => {
+              selectTheme('light');
+            }}
+          >
+            <Trans message="Light mode" />
+          </MenuItem>
+        )}
+        <MenuItem
+          value="logout"
+          startIcon={<ExitToAppIcon />}
+          onSelected={() => {
+            logout.mutate();
+          }}
+        >
+          <Trans message="Log out" />
+        </MenuItem>
+      </Menu>
+    </MenuTrigger>
+  );
+}

common/resources/client/ui/navigation/navbar/navbar-auth-user.tsx

@@ -0,0 +1,58 @@
+import {useAuth} from '@common/auth/use-auth';
+import {useThemeSelector} from '@common/ui/themes/theme-selector-context';
+import {Badge} from '@common/ui/badge/badge';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {PersonIcon} from '@common/icons/material/Person';
+import {ButtonBase} from '@common/ui/buttons/button-base';
+import {ArrowDropDownIcon} from '@common/icons/material/ArrowDropDown';
+import {ReactElement} from 'react';
+import {ListboxItemProps} from '@common/ui/forms/listbox/item';
+import {NavbarAuthMenu} from '@common/ui/navigation/navbar/navbar-auth-menu';
+
+export interface NavbarAuthUserProps {
+  items?: ReactElement<ListboxItemProps>[];
+}
+export function NavbarAuthUser({items = []}: NavbarAuthUserProps) {
+  const {user} = useAuth();
+  const {selectedTheme} = useThemeSelector();
+  if (!selectedTheme || !user) return null;
+  const hasUnreadNotif = !!user.unread_notifications_count;
+
+  const mobileButton = (
+    <IconButton
+      size="md"
+      className="md:hidden"
+      role="presentation"
+      aria-label="toggle authentication menu"
+      badge={
+        hasUnreadNotif ? (
+          <Badge>{user.unread_notifications_count}</Badge>
+        ) : undefined
+      }
+    >
+      <PersonIcon />
+    </IconButton>
+  );
+  const desktopButton = (
+    <ButtonBase className="flex items-center max-md:hidden" role="presentation">
+      <img
+        className="mr-12 h-32 w-32 flex-shrink-0 rounded object-cover"
+        src={user.avatar}
+        alt=""
+      />
+      <span className="mr-2 block max-w-124 overflow-x-hidden overflow-ellipsis text-sm">
+        {user.display_name}
+      </span>
+      <ArrowDropDownIcon className="block icon-sm" />
+    </ButtonBase>
+  );
+
+  return (
+    <NavbarAuthMenu items={items}>
+      <span role="button">
+        {mobileButton}
+        {desktopButton}
+      </span>
+    </NavbarAuthMenu>
+  );
+}

common/resources/client/ui/navigation/navbar/navbar.tsx

@@ -0,0 +1,198 @@
+import {ReactElement, ReactNode} from 'react';
+import clsx from 'clsx';
+import {useAuth} from '@common/auth/use-auth';
+import {NotificationDialogTrigger} from '@common/notifications/dialog/notification-dialog-trigger';
+import {Menu, MenuTrigger} from '@common/ui/navigation/menu/menu-trigger';
+import {useCustomMenu} from '@common/menus/use-custom-menu';
+import {createSvgIconFromTree} from '@common/icons/create-svg-icon';
+import {Trans} from '@common/i18n/trans';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {Item} from '@common/ui/forms/listbox/item';
+import {useNavigate} from '@common/utils/hooks/use-navigate';
+import {useIsDarkMode} from '@common/ui/themes/use-is-dark-mode';
+import {CustomMenu} from '@common/menus/custom-menu';
+import {useSettings} from '@common/core/settings/use-settings';
+import {ButtonColor} from '@common/ui/buttons/get-shared-button-style';
+import {MenuIcon} from '@common/icons/material/Menu';
+import {MenuItemConfig} from '@common/core/settings/settings';
+import {
+  NavbarAuthUser,
+  NavbarAuthUserProps,
+} from '@common/ui/navigation/navbar/navbar-auth-user';
+import {NavbarAuthButtons} from '@common/ui/navigation/navbar/navbar-auth-buttons';
+import {useDarkThemeVariables} from '@common/ui/themes/use-dark-theme-variables';
+import {Logo} from '@common/ui/navigation/navbar/logo';
+import {useLightThemeVariables} from '@common/ui/themes/use-light-theme-variables';
+import {isAbsoluteUrl} from '@common/utils/urls/is-absolute-url';
+
+type NavbarColor = 'primary' | 'bg' | 'bg-alt' | 'transparent' | string;
+
+export interface NavbarProps {
+  hideLogo?: boolean | null;
+  toggleButton?: ReactElement;
+  children?: ReactNode;
+  className?: string;
+  color?: NavbarColor;
+  bgOpacity?: number | string;
+  darkModeColor?: NavbarColor;
+  logoColor?: 'dark' | 'light';
+  textColor?: string;
+  primaryButtonColor?: ButtonColor;
+  border?: string;
+  size?: 'xs' | 'sm' | 'md';
+  rightChildren?: ReactNode;
+  menuPosition?: string;
+  authMenuItems?: NavbarAuthUserProps['items'];
+  alwaysDarkMode?: boolean;
+  wrapInContainer?: boolean;
+}
+export function Navbar(props: NavbarProps) {
+  let {
+    hideLogo,
+    toggleButton,
+    children,
+    className,
+    border,
+    size = 'md',
+    color,
+    textColor,
+    darkModeColor,
+    rightChildren,
+    menuPosition,
+    logoColor,
+    primaryButtonColor,
+    authMenuItems,
+    alwaysDarkMode = false,
+    wrapInContainer = false,
+  } = props;
+  const isDarkMode = useIsDarkMode() || alwaysDarkMode;
+  const {notifications} = useSettings();
+  const {isLoggedIn} = useAuth();
+  const darkThemeVars = useDarkThemeVariables();
+  const lightThemeVars = useLightThemeVariables();
+  const showNotifButton = isLoggedIn && notifications?.integrated;
+  color = color ?? lightThemeVars?.['--be-navbar-color'] ?? 'primary';
+  darkModeColor =
+    darkModeColor ?? darkModeColor?.['--be-navbar-color'] ?? 'bg-alt';
+
+  if (isDarkMode) {
+    color = darkModeColor;
+  }
+
+  return (
+    <div
+      style={alwaysDarkMode ? darkThemeVars : undefined}
+      className={clsx(
+        getColorStyle(color, textColor),
+        size === 'md' && 'h-64 py-8',
+        size === 'sm' && 'h-54 py-4',
+        size === 'xs' && 'h-48 py-4',
+        border,
+        className,
+      )}
+    >
+      <div
+        className={clsx(
+          'flex h-full items-center justify-end gap-10 pl-14 pr-8 md:pl-20 md:pr-20',
+          wrapInContainer && 'container mx-auto',
+        )}
+      >
+        {!hideLogo && (
+          <Logo isDarkMode={isDarkMode} color={color} logoColor={logoColor} />
+        )}
+        {toggleButton}
+        {children}
+        <MobileMenu position={menuPosition} />
+        <DesktopMenu position={menuPosition} />
+        <div className="ml-auto flex items-center gap-4 md:gap-14">
+          {rightChildren}
+          {showNotifButton && <NotificationDialogTrigger />}
+          {isLoggedIn ? (
+            <NavbarAuthUser items={authMenuItems} />
+          ) : (
+            <NavbarAuthButtons
+              navbarColor={color}
+              primaryButtonColor={primaryButtonColor}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface DesktopMenuProps {
+  position: NavbarProps['menuPosition'];
+}
+function DesktopMenu({position}: DesktopMenuProps) {
+  return (
+    <CustomMenu
+      className="mx-14 text-sm max-md:hidden"
+      itemClassName={isActive =>
+        clsx(
+          'opacity-90 hover:underline hover:opacity-100',
+          isActive && 'opacity-100',
+        )
+      }
+      menu={position}
+    />
+  );
+}
+
+interface MobileMenuProps {
+  position: NavbarProps['menuPosition'];
+}
+function MobileMenu({position}: MobileMenuProps) {
+  const navigate = useNavigate();
+  const menu = useCustomMenu(position);
+
+  if (!menu?.items.length) {
+    return null;
+  }
+
+  const handleItemClick = (item: MenuItemConfig) => {
+    if (isAbsoluteUrl(item.action)) {
+      window.open(item.action, item.target)?.focus();
+    } else {
+      navigate(item.action);
+    }
+  };
+
+  return (
+    <MenuTrigger>
+      <IconButton className="md:hidden" aria-label="Toggle menu">
+        <MenuIcon />
+      </IconButton>
+      <Menu>
+        {menu.items.map(item => {
+          const Icon = item.icon && createSvgIconFromTree(item.icon);
+          return (
+            <Item
+              value={item.action}
+              onSelected={() => handleItemClick(item)}
+              key={item.id}
+              startIcon={Icon && <Icon />}
+            >
+              <Trans message={item.label} />
+            </Item>
+          );
+        })}
+      </Menu>
+    </MenuTrigger>
+  );
+}
+
+function getColorStyle(color: string, textColor?: string): string {
+  switch (color) {
+    case 'primary':
+      return `bg-primary ${textColor || 'text-on-primary'} border-b-primary`;
+    case 'bg':
+      return `bg ${textColor || 'text-main'} border-b`;
+    case 'bg-alt':
+      return `bg-alt ${textColor || 'text-main'} border-b`;
+    case 'transparent':
+      return `bg-transparent ${textColor || 'text-white'}`;
+    default:
+      return `${color} ${textColor}`;
+  }
+}