@jetbrains/kotlin-web-site-ui 4.3.0-alpha.1 → 4.3.0-next-layout

package/out/components/header/header.js

@@ -35,20 +35,20 @@ const Header = forwardRef(({
   isPlayground,
   isUrlActive,
   searchConfig,
+  noScrollClassName,
   resultViewType = SearchResultView.Narrow
 }, forwardedRef) => {
   const [menuPopupExpanded, setMenuPopupExpanded] = useState(false);
+  const [isMenuPopupVisible, setIsMenuPopupVisible] = useState(false);
   const [isSearchBoxVisible, setSearchBoxVisible] = useState(false);
   const [fullSearchActive, setFullSearchActive] = useState(false);
   const items = useMemo(() => getNavScheme(isUrlActive, currentUrl, isPlayground), [isUrlActive, currentUrl, isPlayground]);
-  const itemsWithoutHomeSection = useMemo(() => items.slice(1), [items]);
   const headerRef = useRef(null);
   useImperativeHandle(forwardedRef, () => headerRef.current);
-  const [isMenuPopupVisible, setMenuPopupVisible] = useState(false);
   useLayoutEffect(() => {
-    setMenuPopupVisible((headerRef.current?.getBoundingClientRect?.().width ?? 0) <= MENU_POPUP_BREAKPOINT);
+    setIsMenuPopupVisible((headerRef.current?.getBoundingClientRect?.().width ?? 0) <= MENU_POPUP_BREAKPOINT);
   }, [headerRef]);
-  useResizeObserver(headerRef, entry => setMenuPopupVisible(entry.contentRect.width <= MENU_POPUP_BREAKPOINT));
+  useResizeObserver(headerRef, entry => setIsMenuPopupVisible(entry.contentRect.width <= MENU_POPUP_BREAKPOINT));
   const handleSearchButtonClick = useCallback(() => {
     setSearchBoxVisible(!isSearchBoxVisible);
   }, []);
@@ -77,6 +77,15 @@ const Header = forwardRef(({
       };
     }
   }, [fullSearchKeyHandler]);
+  useEffect(() => {
+    if (typeof document !== `undefined` && noScrollClassName) {
+      if (fullSearchActive) {
+        document.body.classList.add(noScrollClassName);
+      } else {
+        document.body.classList.remove(noScrollClassName);
+      }
+    }
+  }, [fullSearchActive]);
   return React__default.createElement(ThemeProvider, {
     theme: 'dark'
   }, React__default.createElement(SearchWrapper, {
@@ -85,7 +94,7 @@ const Header = forwardRef(({
     ref: headerRef,
     className: classNames(styles.headerMenu, className, {
       [styles.withMenuPopup]: menuPopupExpanded,
-      [styles.border]: hasBorder || menuPopupExpanded
+      [styles.border]: hasBorder
     }),
     "data-test": 'header'
   }, isMenuPopupVisible && currentTitle && currentUrl && !menuPopupExpanded ? React__default.createElement(LogoSmall, {
@@ -102,10 +111,10 @@ const Header = forwardRef(({
     setFullSearchActive: setFullSearchActive,
     searchBoxViewType: resultViewType
   })) : React__default.createElement(React__default.Fragment, null, !isMenuPopupVisible && React__default.createElement(HorizontalMenu, {
-    items: itemsWithoutHomeSection,
+    items: items,
     theme: dropdownTheme,
     linkHandler: linkHandler
-  }), !menuPopupExpanded && React__default.createElement(SearchButton, {
+  }), React__default.createElement(SearchButton, {
     onClick: handleSearchButtonClick,
     isActive: hasSearch
   }), isMenuPopupVisible && React__default.createElement(MenuPopup, {

package/out/components/header/header.module.pcss.js

@@ -1,5 +1,6 @@
 var styles = {
   "headerMenu": "ktl-header-module_header-menu_wh71L",
-  "border": "ktl-header-module_border_paN11"
+  "border": "ktl-header-module_border_paN11",
+  "withMenuPopup": "ktl-header-module_with-menu-popup_Bcffw"
 };
 export { styles as default };

package/out/components/header/index.css

@@ -38,8 +38,7 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-mobile-dropdown-list-z-index: 907;
-  --ktl-header-height-mobile: 52px;
+  --ktl-header-height-mobile: 48px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
@@ -56,14 +55,18 @@
 }
 
 .ktl-header-module_border_paN11 {
-  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
+  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.2);
 }
 
 @media (max-width: 640px) {
   .ktl-header-module_header-menu_wh71L {
-    padding: 0 0 0 16px;
+    padding: 0 16px;
     height: var(--ktl-header-height-mobile);
   }
+
+  .ktl-header-module_header-menu_wh71L:not(.ktl-header-module_with-menu-popup_Bcffw) {
+    box-shadow: none;
+  }
 }
 
 :root {
@@ -81,8 +84,7 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-mobile-dropdown-list-z-index: 907;
-  --ktl-header-height-mobile: 52px;
+  --ktl-header-height-mobile: 48px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
@@ -224,8 +226,7 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-mobile-dropdown-list-z-index: 907;
-  --ktl-header-height-mobile: 52px;
+  --ktl-header-height-mobile: 48px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
@@ -263,13 +264,12 @@
 @media (max-width: 640px) {
   .ktl-search-button-module_button_YHJPv {
     display: none;
+    margin: 0 16px 0 0;
   }
-}
 
-@media (min-width: 641px) {
-  .ktl-search-button-module_mobileButton_KT2YP {
-    display: none;
-  }
+    .ktl-search-button-module_button_YHJPv.ktl-search-button-module_active_lUmdh {
+      display: flex;
+    }
 }
 
 .ktl-result-module_result_EKhUw {
@@ -658,7 +658,7 @@
             opacity: 1;
         }
 
-@media (max-width: 767px) {
+@media (--ktl-xs) {
     .ktl-search-box-module_searchBox_0SgE9 {
         background: var(--ktl-dark-100);
         width: auto;
@@ -692,27 +692,64 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-mobile-dropdown-list-z-index: 907;
-  --ktl-header-height-mobile: 52px;
+  --ktl-header-height-mobile: 48px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
 .ktl-menu-popup-module_menu-popup_Q68IE {
-    display: none;
-    padding: 8px 0 56px 0;
-    background: var(--ktl-dark-100);
-    position: fixed;
-    top: var(--ktl-header-height-mobile);
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow: auto;
-    z-index: var(--ktl-top-menu-z-index);
+  display: none;
+  padding: 8px 0;
+  background: var(--ktl-dark-100);
+  position: fixed;
+  top: var(--ktl-header-height-mobile);
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: auto;
+  z-index: var(--ktl-top-menu-z-index);
+}
+
+.ktl-menu-popup-module_menu-item_fPvF- {
+  --level: 0;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.75);
+  text-decoration: none;
+  padding: 8px 16px 8px calc(16px + (var(--level) * 24px));
+  transition: color var(--ktl-transition-xfast),
+    background-color var(--ktl-transition-xfast);
+}
+
+.ktl-menu-popup-module_menu-item_fPvF-:hover {
+    color: rgba(255, 255, 255, 1);
+    background: rgba(255, 255, 255, 0.1);
+    text-decoration: none;
+  }
+
+.ktl-menu-popup-module_menu-item_fPvF-.ktl-menu-popup-module_active_iqTAj {
+    color: var(--ktl-light-text-hard);
+    background: rgba(255, 255, 255, 1);
+    cursor: default;
+    text-decoration: none;
+  }
+
+.ktl-menu-popup-module_menu-item_fPvF-.ktl-menu-popup-module_active-with-child_tAzCG {
+    background: none;
+    color: rgba(255, 255, 255, 1);
+  }
+
+.ktl-menu-popup-module_menu-item-root_gA9d2 {
+  font-size: 20px;
+  line-height: 32px;
+  font-weight: 600;
 }
 
 .ktl-menu-popup-module_menu-popup-expanded_ggrp9 {
-    display: block;
+  display: block;
 }
 
 .ktl-menu-button-module_button_wB9Mx {
@@ -726,8 +763,8 @@
   background: none;
   padding: 0;
   margin: 0;
-  width: var(--ktl-header-height-mobile);
-  height: var(--ktl-header-height-mobile);
+  width: 24px;
+  height: 24px;
   align-items: center;
   justify-content: center;
   transition: color var(--ktl-transition-xfast),
@@ -740,91 +777,6 @@
     color: #ffffff;
   }
 
-:root {
-  --ktl-light-grey: #f4f4f4;
-  --ktl-dark-100: rgba(39, 40, 44, 1);
-  --ktl-dark-bg-hard: rgba(27, 27, 27, 1);
-  --ktl-icon-color-dark: rgba(39, 40, 44, 0.75);
-  --ktl-color-white-light: rgba(255, 255, 255, 0.75);
-  --ktl-transition-xfast: 100ms;
-  --ktl-transition-fast: 300ms;
-  --ktl-color-primary-light-theme: #7f52ff;
-  --ktl-color-dark-40: rgba(39, 40, 44, 0.4);
-  --ktl-light-text-hard: rgba(39, 40, 44, 1);
-  --ktl-light-dark-20: rgba(39, 40, 44, 0.2);
-  --ktl-overlay-z-index: 900;
-  --ktl-top-menu-z-index: 905;
-  --ktl-header-z-index: 906;
-  --ktl-mobile-dropdown-list-z-index: 907;
-  --ktl-header-height-mobile: 52px;
-  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
-  --rs-font-family-ui: var(--ktl-font-family-inter);
-}
-
-.ktl-menu-list-item-module_menu-item_Aruue {
-    --level: 0;
-    display: flex;
-    align-items: center;
-    font-size: 19px;
-    line-height: 28px;
-    font-weight: 400;
-    color: #ffffff;
-    text-decoration: none;
-    padding: 12px 7px 12px 16px;
-    transition: color var(--ktl-transition-xfast),
-    background-color var(--ktl-transition-xfast);
-}
-
-.ktl-menu-list-item-module_menu-item_Aruue.ktl-menu-list-item-module_active_jHfJR {
-        color: var(--ktl-light-text-hard);
-        background: rgba(255, 255, 255, 1);
-        cursor: default;
-        text-decoration: none;
-    }
-
-.ktl-menu-list-item-module_menu-item_Aruue.ktl-menu-list-item-module_active-with-child_ier2a {
-        background: none;
-        color: rgba(255, 255, 255, 0.7);
-    }
-
-.ktl-menu-list-item-module_menu-item-root_Rzcqb:not(a) {
-        font-size: 13px;
-        text-transform: uppercase;
-        line-height: 20px;
-        color: rgba(255, 255, 255, 0.7);
-    }
-
-:root {
-  --ktl-light-grey: #f4f4f4;
-  --ktl-dark-100: rgba(39, 40, 44, 1);
-  --ktl-dark-bg-hard: rgba(27, 27, 27, 1);
-  --ktl-icon-color-dark: rgba(39, 40, 44, 0.75);
-  --ktl-color-white-light: rgba(255, 255, 255, 0.75);
-  --ktl-transition-xfast: 100ms;
-  --ktl-transition-fast: 300ms;
-  --ktl-color-primary-light-theme: #7f52ff;
-  --ktl-color-dark-40: rgba(39, 40, 44, 0.4);
-  --ktl-light-text-hard: rgba(39, 40, 44, 1);
-  --ktl-light-dark-20: rgba(39, 40, 44, 0.2);
-  --ktl-overlay-z-index: 900;
-  --ktl-top-menu-z-index: 905;
-  --ktl-header-z-index: 906;
-  --ktl-mobile-dropdown-list-z-index: 907;
-  --ktl-header-height-mobile: 52px;
-  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
-  --rs-font-family-ui: var(--ktl-font-family-inter);
-}
-
-.ktl-menu-list-module_menu-item-group_mFvUE {
-    margin: 8px 0 8px 0;
-    padding: 4px 0 8px 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.ktl-menu-list-module_menu-item-group_mFvUE:not(:last-child) {
-        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-    }
-
 .ktl-logo-small-module_logo-small_iGY12 {
   flex-grow: 1;
   display: flex;
@@ -835,7 +787,6 @@
 .ktl-logo-small-module_link_SKXAa {
   color: rgba(255, 255, 255, 1);
   text-decoration: none;
-  font-size: 16px;
 }
 
 .ktl-logo-small-module_icon-wrap_6hRnO {
@@ -844,10 +795,13 @@
   align-items: center;
   justify-items: center;
   height: 100%;
-  margin-right: 12px;
+  margin-right: 16px;
+  padding-right: 16px;
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .ktl-logo-small-module_icon_NyEog {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
+  margin-left: -4px;
 }

package/out/components/header/index.js

@@ -1,4 +1,4 @@
 import './index.css';
 import { Header } from './header.js';
 export { Header as default } from './header.js';
-export { ANDROID_TITLE, ANDROID_URL, COMMUNITY_TITLE, COMMUNITY_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DOCS_TITLE, DOCS_URL, HOME_TITLE, HOME_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, MULTIPLATFORM_OTHERS_TITLE, MULTIPLATFORM_OTHERS_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, WEB_FRONTEND_TITLE, WEB_FRONTEND_URL, getNavScheme } from './nav-scheme.js';
+export { ANDROID_TITLE, ANDROID_URL, COMMUNITY_TITLE, COMMUNITY_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DOCS_TITLE, DOCS_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, MULTIPLATFORM_OTHERS_TITLE, MULTIPLATFORM_OTHERS_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, WEB_FRONTEND_TITLE, WEB_FRONTEND_URL, getNavScheme } from './nav-scheme.js';

package/out/components/header/logo-small/kotlin-logo-small.svg.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-var _path, _defs;
+var _radialGradient, _path;
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -21,29 +21,27 @@ function _extends() {
 }
 
 const SvgKotlinLogoSmall = props => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 20,
-  height: 20,
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-  d: "M20 20H0V0h20L9.793 9.855 20 20Z",
-  fill: "url(#kotlin-logo-small_svg__a)"
-})), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("radialGradient", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, props), _radialGradient || (_radialGradient = /*#__PURE__*/React.createElement("radialGradient", {
   id: "kotlin-logo-small_svg__a",
-  cx: 0,
-  cy: 0,
-  r: 1,
-  gradientUnits: "userSpaceOnUse",
-  gradientTransform: "translate(19.335 .822) scale(22.9097)"
+  cx: 22.432,
+  cy: 3.493,
+  r: 21.679,
+  gradientTransform: "translate(-.19 .042) scale(.9998)",
+  gradientUnits: "userSpaceOnUse"
 }, /*#__PURE__*/React.createElement("stop", {
   offset: 0.003,
-  stopColor: "#EF4857"
+  stopColor: "#e44857"
 }), /*#__PURE__*/React.createElement("stop", {
   offset: 0.469,
-  stopColor: "#D211EC"
+  stopColor: "#c711e1"
 }), /*#__PURE__*/React.createElement("stop", {
   offset: 1,
-  stopColor: "#7F52FF"
-})))));
+  stopColor: "#7f52ff"
+}))), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  fill: "url(#kotlin-logo-small_svg__a)",
+  d: "M22.87 21.68H3.94V2.76h18.93l-9.66 9.32z"
+})));
 
 export { SvgKotlinLogoSmall as default };

package/out/components/header/logo-small/logo-small.js

@@ -20,7 +20,7 @@ const LogoSmall = ({
     className: styles.icon
   })), React__default.createElement("a", {
     href: homeUrl,
-    className: classNames(styles.link, textCn('rs-h4'))
+    className: classNames(styles.link, textCn('rs-h3'))
   }, homeTitle));
 };
 

package/out/components/header/menu-popup/menu-button/close-icon.svg.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+var _path;
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+const SvgCloseIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
+  width: 16,
+  height: 16,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M15.707 1.707 14.293.293 8 6.586 1.707.293.293 1.707 6.586 8 .293 14.293l1.414 1.414L8 9.414l6.293 6.293 1.414-1.414L9.414 8l6.293-6.293Z",
+  fill: "currentColor"
+})));
+
+export { SvgCloseIcon as default };

package/out/components/header/menu-popup/menu-button/hamburger-icon.svg.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+var _path;
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+const SvgHamburgerIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
+  width: 24,
+  height: 24,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M4 5h16v2H4V5Zm0 6h16v2H4v-2Zm16 6H4v2h16v-2Z",
+  fill: "currentColor"
+})));
+
+export { SvgHamburgerIcon as default };

package/out/components/header/menu-popup/menu-button/menu-button.js

@@ -1,23 +1,20 @@
 import React__default from 'react';
 import styles from './menu-button.module.pcss.js';
 import classNames from 'classnames';
-import Button from '@rescui/button';
-import { CloseIcon, HamburgerIcon } from '@rescui/icons';
+import SvgHamburgerIcon from './hamburger-icon.svg.js';
+import SvgCloseIcon from './close-icon.svg.js';
 
 const MenuButton = ({
   onClick,
   isExpanded
 }) => {
-  return React__default.createElement(Button, {
+  return React__default.createElement("button", {
     type: "button",
     className: classNames(styles.button),
     "aria-haspopup": "true",
     "aria-label": "Open the navigation",
-    onClick: onClick,
-    size: 'l',
-    mode: 'clear',
-    icon: isExpanded ? React__default.createElement(CloseIcon, null) : React__default.createElement(HamburgerIcon, null)
-  });
+    onClick: onClick
+  }, isExpanded ? React__default.createElement(SvgCloseIcon, null) : React__default.createElement(SvgHamburgerIcon, null));
 };
 
 export { MenuButton };

package/out/components/header/menu-popup/menu-popup.js

@@ -1,11 +1,51 @@
-import React__default, { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
+import React__default, { useRef, useState, useEffect, useLayoutEffect, useCallback, Fragment } from 'react';
 import styles from './menu-popup.module.pcss.js';
 import classNames from 'classnames';
 import { MenuButton } from './menu-button/menu-button.js';
-import { MenuList } from './menu-list/menu-list.js';
 import { useTextStyles } from '@rescui/typography';
 import { clearAllBodyScrollLocks, enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
 
+const MenuListItem = ({
+  item,
+  level,
+  linkHandler
+}) => {
+  const Tag = item.url ? 'a' : 'span';
+  const style = {
+    '--level': level
+  };
+  const handleClick = useCallback(event => linkHandler && item.url && linkHandler(event, item.url), []);
+  return React__default.createElement(Tag, Object.assign({}, item.url ? {
+    href: item.url,
+    onClick: handleClick
+  } : {}, {
+    className: classNames(styles.menuItem, {
+      [styles.menuItemRoot]: level === 0,
+      [styles.active]: item.isActive,
+      [styles.activeWithChild]: item.items && item.items.length
+    }),
+    style: style
+  }), item.title);
+};
+
+const MenuList = ({
+  items,
+  level,
+  linkHandler
+}) => {
+  return React__default.createElement(React__default.Fragment, null, items.map((item, i) => React__default.createElement(Fragment, {
+    key: i
+  }, React__default.createElement(MenuListItem, {
+    item: item,
+    level: level,
+    linkHandler: linkHandler
+  }), item.items && item.items.length > 0 && React__default.createElement(MenuList, {
+    items: item.items,
+    level: level + 1,
+    linkHandler: linkHandler
+  }))));
+};
+
 const MenuPopup = ({
   items,
   isExpanded,

package/out/components/header/menu-popup/menu-popup.module.pcss.js

@@ -1,5 +1,9 @@
 var styles = {
   "menuPopup": "ktl-menu-popup-module_menu-popup_Q68IE",
+  "menuItem": "ktl-menu-popup-module_menu-item_fPvF-",
+  "active": "ktl-menu-popup-module_active_iqTAj",
+  "activeWithChild": "ktl-menu-popup-module_active-with-child_tAzCG",
+  "menuItemRoot": "ktl-menu-popup-module_menu-item-root_gA9d2",
   "menuPopupExpanded": "ktl-menu-popup-module_menu-popup-expanded_ggrp9"
 };
 export { styles as default };

package/out/components/header/nav-scheme.js

@@ -1,6 +1,4 @@
 import { PLAYGROUND_URL, KOTLINLANG_URL } from './consts.js';
-const HOME_TITLE = 'Home';
-const HOME_URL = '/';
 const SOLUTIONS_TITLE = 'Solutions';
 const MULTIPLATFORM_MOBILE_TITLE = 'Multiplatform Mobile';
 const MULTIPLATFORM_MOBILE_URL = `/lp/mobile/`;
@@ -34,9 +32,6 @@ const KOTLIN_DOCS_URL = `/docs/home.html`;
 const KMM_DOCS_TITLE = 'KMM';
 const KMM_DOCS_URL = `/docs/mobile/home.html`;
 const navScheme = [{
-  title: HOME_TITLE,
-  url: HOME_URL
-}, {
   title: SOLUTIONS_TITLE,
   url: null,
   items: [{
@@ -85,9 +80,8 @@ const navScheme = [{
   }]
 }];
 
-function getNavScheme(isUrlActive = (url, currentUrl) => url === currentUrl, currentUrl, isPlayground, withoutHomeSection) {
-  const controlledNavScheme = withoutHomeSection ? navScheme.slice(1) : navScheme;
-  return controlledNavScheme.map(({
+function getNavScheme(isUrlActive = (url, currentUrl) => url === currentUrl, currentUrl, isPlayground) {
+  return navScheme.map(({
     title,
     url,
     items
@@ -138,4 +132,4 @@ function makeExternalUrl(url, currentUrl, isPlayground) {
   return url;
 }
 
-export { ANDROID_TITLE, ANDROID_URL, COMMUNITY_TITLE, COMMUNITY_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DOCS_TITLE, DOCS_URL, HOME_TITLE, HOME_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, MULTIPLATFORM_OTHERS_TITLE, MULTIPLATFORM_OTHERS_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, WEB_FRONTEND_TITLE, WEB_FRONTEND_URL, getNavScheme };
+export { ANDROID_TITLE, ANDROID_URL, COMMUNITY_TITLE, COMMUNITY_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DOCS_TITLE, DOCS_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, MULTIPLATFORM_OTHERS_TITLE, MULTIPLATFORM_OTHERS_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, WEB_FRONTEND_TITLE, WEB_FRONTEND_URL, getNavScheme };

package/out/components/header/search-button/search-button.js

@@ -2,15 +2,13 @@ import React__default from 'react';
 import styles from './search-button.module.pcss.js';
 import classNames from 'classnames';
 import SvgSearch from './search.svg.js';
-import { SearchIcon } from '@rescui/icons';
-import Button from '@rescui/button';
 const DATA_TEST_HEADER_SEARCH_BUTTON = 'header-search-button';
 
 const SearchButton = ({
   onClick,
   isActive
 }) => {
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("button", {
+  return React__default.createElement("button", {
     type: "button",
     className: classNames(styles.button, {
       [styles.active]: isActive
@@ -18,16 +16,7 @@ const SearchButton = ({
     "data-test": DATA_TEST_HEADER_SEARCH_BUTTON,
     "aria-label": "Search",
     onClick: onClick
-  }, React__default.createElement(SvgSearch, null)), React__default.createElement("div", {
-    className: styles.mobileButton
-  }, React__default.createElement(Button, {
-    "data-test": DATA_TEST_HEADER_SEARCH_BUTTON,
-    "aria-label": "Search",
-    onClick: onClick,
-    mode: 'clear',
-    size: 'l',
-    icon: React__default.createElement(SearchIcon, null)
-  })));
+  }, React__default.createElement(SvgSearch, null));
 };
 
 export { DATA_TEST_HEADER_SEARCH_BUTTON, SearchButton };

package/out/components/header/search-button/search-button.module.pcss.js

@@ -1,6 +1,5 @@
 var styles = {
   "button": "ktl-search-button-module_button_YHJPv",
-  "active": "ktl-search-button-module_active_lUmdh",
-  "mobileButton": "ktl-search-button-module_mobileButton_KT2YP"
+  "active": "ktl-search-button-module_active_lUmdh"
 };
 export { styles as default };