@cloud-ru/uikit-product-site-header 0.4.8

package/src/helperComponents/LinkItemHeader/index.ts

@@ -0,0 +1 @@
+export * from './LinkItemHeader';

package/src/helperComponents/LinkItemHeader/styles.module.scss

@@ -0,0 +1,65 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element' as ste;
+
+.button {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}
+
+.item {
+  position: relative;
+  text-decoration: none;
+  color: ste.$sys-graphite-accent-default;
+  transition: color 0.3s ease-in-out;
+  cursor: pointer;
+
+  &:hover {
+    color: ste.$sys-graphite-accent-hovered;
+  }
+}
+
+.hovered {
+  &::after {
+    content: '';
+
+    position: absolute;
+    bottom: -20px;
+    left: 0;
+
+    width: 100%;
+    height: 2px;
+
+    opacity: 0;
+    background: ste.$sys-primary-accent-default;
+
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  &:hover {
+    &::after {
+      opacity: 1;
+    }
+  }
+}
+
+.active {
+  &::after {
+    content: '';
+
+    position: absolute;
+    bottom: -20px;
+    left: 0;
+
+    width: 100%;
+    height: 2px;
+
+    opacity: 1;
+    background: ste.$sys-primary-accent-default;
+  }
+}

package/src/helperComponents/LogoContent/LogoContent.tsx

@@ -0,0 +1,34 @@
+import { CloudFullLogoSVG } from '@cloud-ru/uikit-product-icons';
+import { Typography } from '@snack-uikit/typography';
+
+import { AdditionalLogoText, Logo } from '../../components/SiteHeaderBasic/SiteHeaderBasic';
+import styles from './styles.module.scss';
+
+export type LogoContentProps = {
+  additionalLogoText?: AdditionalLogoText;
+  logo: Logo;
+  isMobile?: boolean;
+};
+
+export function LogoContent({ additionalLogoText, isMobile, logo }: LogoContentProps) {
+  const heightIconSizeProp = isMobile ? 102 : 130;
+  return (
+    <div className={styles.logoContentContainer}>
+      <a href={logo.logoLink} onClick={logo.onClick} className={styles.logoLink}>
+        <CloudFullLogoSVG size={heightIconSizeProp} width='60px' />
+      </a>
+      {additionalLogoText && (
+        <div className={styles.subLogo}>
+          <Typography className={styles.slash} size='m' purpose='title' family='sans'>
+            /
+          </Typography>
+          <a href={additionalLogoText.link} onClick={additionalLogoText.onClick} className={styles.link}>
+            <Typography size='m' purpose='title' family='sans'>
+              {additionalLogoText.text}
+            </Typography>
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/helperComponents/LogoContent/index.ts

@@ -0,0 +1 @@
+export * from './LogoContent';

package/src/helperComponents/LogoContent/styles.module.scss

@@ -0,0 +1,39 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element' as ste;
+
+.logoContentContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  color: ste.$sys-graphite-accent-default;
+
+  &:hover {
+    color: ste.$sys-primary-accent-hovered;
+  }
+
+  &:active {
+    color: ste.$sys-primary-accent-pressed;
+  }
+}
+
+.slash {
+  color: ste.$sys-neutral-text-disabled;
+}
+
+.logoLink {
+  display: flex;
+  align-items: center;
+}
+
+.subLogo {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}

package/src/helperComponents/MobileMenu/MobileMenu.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+import { MobileModalCustom } from '@cloud-ru/uikit-product-mobile-modal';
+
+import styles from './styles.module.scss';
+
+type MobileMenuProps = {
+  mobileMenuOpen: boolean;
+  mobileMenuContent: ReactNode;
+  mobileConsultationButton?: ReactNode;
+  onClickForCloseMobileMenu: () => void;
+};
+
+export function MobileMenu({
+  mobileMenuOpen,
+  onClickForCloseMobileMenu,
+  mobileMenuContent,
+  mobileConsultationButton,
+}: MobileMenuProps) {
+  return (
+    <MobileModalCustom open={mobileMenuOpen} onClose={onClickForCloseMobileMenu} className={styles.mobileMenu}>
+      <MobileModalCustom.Header title='Меню' align='center' />
+      <MobileModalCustom.Body content={mobileMenuContent} />
+      {mobileConsultationButton && <MobileModalCustom.Footer actions={mobileConsultationButton} />}
+    </MobileModalCustom>
+  );
+}

package/src/helperComponents/MobileMenu/index.ts

@@ -0,0 +1 @@
+export * from './MobileMenu';

package/src/helperComponents/MobileMenu/styles.module.scss

@@ -0,0 +1,8 @@
+.mobileMenu {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

package/src/helperComponents/MoreButton/MoreButton.tsx

@@ -0,0 +1,59 @@
+import cn from 'classnames';
+import { useState } from 'react';
+
+import { MoreSVG } from '@cloud-ru/uikit-product-icons';
+import { Dropdown } from '@snack-uikit/dropdown';
+
+import { LinkItem } from '../../components/HeaderItems/types';
+import { LinkItemHeader } from '../LinkItemHeader';
+import styles from './styles.module.scss';
+
+type MoreButtonProps = {
+  linkItemsArray: LinkItem[];
+  activeItemId?: string;
+};
+
+export function MoreButton({ linkItemsArray, activeItemId }: MoreButtonProps) {
+  const [open, setOpen] = useState(false);
+  const onClickOpen = () => {
+    setOpen(prev => !prev);
+  };
+
+  return (
+    <Dropdown
+      placement='bottom-start'
+      open={open}
+      outsideClick={() => {
+        onClickOpen();
+        return false;
+      }}
+      content={
+        <div className={styles.tagRowDropListScroll}>
+          {linkItemsArray.map(item => (
+            <div
+              key={item.id}
+              className={cn(styles.rowLinkMore, {
+                [styles.hovered]: !item.href,
+                [styles.active]: item.id === activeItemId && !item.href,
+              })}
+            >
+              <LinkItemHeader
+                label={item.label}
+                onClick={() => {
+                  item.onClick && item.onClick();
+                  onClickOpen();
+                }}
+                href={item.href}
+                withoutHover
+              />
+            </div>
+          ))}
+        </div>
+      }
+    >
+      <button className={styles.button} onClick={onClickOpen}>
+        <MoreSVG />
+      </button>
+    </Dropdown>
+  );
+}

package/src/helperComponents/MoreButton/index.ts

@@ -0,0 +1 @@
+export * from './MoreButton';

package/src/helperComponents/MoreButton/styles.module.scss

@@ -0,0 +1,39 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element' as ste;
+
+.tagRowDropListScroll {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  width: 140px;
+}
+
+.rowLinkMore {
+  padding: 8px 10px;
+  border-left: 2px solid transparent;
+  transition: color 0.3s ease-in-out;
+}
+
+.hovered {
+  &:hover {
+    border-left: 2px solid ste.$sys-primary-accent-default;
+  }
+}
+
+.button {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}
+
+.active {
+  border-left: 2px solid ste.$sys-primary-accent-default;
+}

package/src/helperComponents/UserInfo/UserInfo.tsx

@@ -0,0 +1,25 @@
+import cn from 'classnames';
+
+import { Avatar } from '@snack-uikit/avatar';
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+
+type UserInfoProps = {
+  userName: string;
+  lastName: string;
+  className?: string;
+};
+
+export function UserInfo({ userName, lastName, className }: UserInfoProps) {
+  const fullName = `${lastName} ${userName}`;
+
+  return (
+    <div className={cn(styles.root, className)}>
+      <Avatar name={fullName} size='xs' showTwoSymbols appearance='green' />
+      <Typography tag='div' size='s' purpose='body' family='sans' className={styles.text}>
+        {fullName}
+      </Typography>
+    </div>
+  );
+}

package/src/helperComponents/UserInfo/index.ts

@@ -0,0 +1 @@
+export * from './UserInfo';

package/src/helperComponents/UserInfo/styles.module.scss

@@ -0,0 +1,16 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element'
+  as ste;
+
+.root {
+  display: grid;
+  grid-template-columns: 24px 188px;
+  align-items: center;
+  gap: 8px;
+}
+
+.text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  color: ste.$sys-neutral-text-main;
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,5 @@
+export * from './MoreButton';
+export * from './LinkItemHeader';
+export * from './ButtonBurger';
+export * from './LogoContent';
+export * from './MobileMenu';

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useResizeObserver';
+export * from './useHeaderPosition';

package/src/hooks/useHeaderPosition.ts

@@ -0,0 +1,52 @@
+import { RefObject, useEffect, useState } from 'react';
+
+export const useHeaderPosition = (isModalMenuOpen?: boolean, refHeader?: RefObject<HTMLDivElement>) => {
+  const [showHeader, setShowHeader] = useState(true);
+  const [headerPosition, setHeaderPosition] = useState(0);
+  const [headerHeight, setHeaderHeight] = useState(0);
+
+  useEffect(() => {
+    const targetScroll = () => {
+      const lastScrollPos = window.scrollY;
+
+      if (headerPosition !== 0) {
+        if (!isModalMenuOpen && lastScrollPos > headerPosition && showHeader && lastScrollPos > 150) {
+          setShowHeader(false);
+          setHeaderPosition(lastScrollPos);
+        } else if (lastScrollPos < headerPosition && !showHeader) {
+          setShowHeader(true);
+        }
+      }
+
+      setHeaderPosition(lastScrollPos);
+    };
+
+    const updateHeaderHeight = () => {
+      if (refHeader && refHeader.current) {
+        const height = refHeader.current.offsetHeight;
+        setHeaderHeight(Math.floor(height));
+      }
+    };
+
+    const handleResize = () => {
+      updateHeaderHeight();
+    };
+
+    updateHeaderHeight();
+    targetScroll();
+
+    window.addEventListener('scroll', targetScroll);
+    window.addEventListener('scroll', handleResize);
+
+    return () => {
+      window.removeEventListener('scroll', targetScroll);
+      window.removeEventListener('scroll', handleResize);
+    };
+  }, [showHeader, headerPosition, isModalMenuOpen, refHeader]);
+
+  return {
+    showHeader,
+    headerPosition,
+    headerHeight,
+  };
+};

package/src/hooks/useResizeObserver.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+export const useResizeObserver = (element: HTMLElement | null) => {
+  const [width, setWidth] = useState<number>(0);
+
+  useEffect(() => {
+    if (!element) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      if (element.offsetWidth !== width) {
+        setWidth(element.offsetWidth);
+      }
+    });
+
+    resizeObserver.observe(element);
+
+    return () => resizeObserver.disconnect();
+  }, [element, width]);
+
+  return { width };
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';