@jetbrains/kotlin-web-site-ui 4.2.0 → 4.3.0-alpha.0

package/out/components/footer/index.css

@@ -29,7 +29,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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);
 }
@@ -85,7 +86,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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);
 }
@@ -141,7 +143,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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);
 }

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

@@ -1,4 +1,5 @@
-import React__default, { useState, useContext, useRef, useCallback, useLayoutEffect } from 'react';
+import React__default, { useState, useContext, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
+import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
 import useScrollbarSize from 'react-scrollbar-size';
 import { ThemeProvider } from '@rescui/ui-contexts';
 import Input from '@rescui/input';
@@ -53,6 +54,12 @@ const FullSearch = ({
       }
     }
   }, [hits, inputValue]);
+  useLayoutEffect(() => {
+    if (ref.current) disableBodyScroll(ref.current);
+  }, [ref]);
+  useEffect(() => {
+    return clearAllBodyScrollLocks;
+  }, []);
   return React__default.createElement(ThemeProvider, {
     theme: 'light'
   }, React__default.createElement("div", {

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(() => {
-    setIsMenuPopupVisible((headerRef.current?.getBoundingClientRect?.().width ?? 0) <= MENU_POPUP_BREAKPOINT);
+    setMenuPopupVisible((headerRef.current?.getBoundingClientRect?.().width ?? 0) <= MENU_POPUP_BREAKPOINT);
   }, [headerRef]);
-  useResizeObserver(headerRef, entry => setIsMenuPopupVisible(entry.contentRect.width <= MENU_POPUP_BREAKPOINT));
+  useResizeObserver(headerRef, entry => setMenuPopupVisible(entry.contentRect.width <= MENU_POPUP_BREAKPOINT));
   const handleSearchButtonClick = useCallback(() => {
     setSearchBoxVisible(!isSearchBoxVisible);
   }, []);
@@ -77,15 +77,6 @@ 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, {
@@ -94,7 +85,7 @@ const Header = forwardRef(({
     ref: headerRef,
     className: classNames(styles.headerMenu, className, {
       [styles.withMenuPopup]: menuPopupExpanded,
-      [styles.border]: hasBorder
+      [styles.border]: hasBorder || menuPopupExpanded
     }),
     "data-test": 'header'
   }, isMenuPopupVisible && currentTitle && currentUrl && !menuPopupExpanded ? React__default.createElement(LogoSmall, {
@@ -111,10 +102,10 @@ const Header = forwardRef(({
     setFullSearchActive: setFullSearchActive,
     searchBoxViewType: resultViewType
   })) : React__default.createElement(React__default.Fragment, null, !isMenuPopupVisible && React__default.createElement(HorizontalMenu, {
-    items: items,
+    items: itemsWithoutHomeSection,
     theme: dropdownTheme,
     linkHandler: linkHandler
-  }), React__default.createElement(SearchButton, {
+  }), !menuPopupExpanded && React__default.createElement(SearchButton, {
     onClick: handleSearchButtonClick,
     isActive: hasSearch
   }), isMenuPopupVisible && React__default.createElement(MenuPopup, {

package/out/components/header/index.css

@@ -38,7 +38,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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);
 }
@@ -55,12 +56,12 @@
 }
 
 .ktl-header-module_border_paN11 {
-  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.2);
+  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
 }
 
 @media (max-width: 640px) {
   .ktl-header-module_header-menu_wh71L {
-    padding: 0 16px;
+    padding: 0 0 0 16px;
     height: var(--ktl-header-height-mobile);
   }
 
@@ -84,7 +85,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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);
 }
@@ -226,7 +228,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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);
 }
@@ -264,12 +267,13 @@
 @media (max-width: 640px) {
   .ktl-search-button-module_button_YHJPv {
     display: none;
-    margin: 0 16px 0 0;
   }
+}
 
-    .ktl-search-button-module_button_YHJPv.ktl-search-button-module_active_lUmdh {
-      display: flex;
-    }
+@media (min-width: 641px) {
+  .ktl-search-button-module_mobileButton_KT2YP {
+    display: none;
+  }
 }
 
 .ktl-result-module_result_EKhUw {
@@ -692,64 +696,27 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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-popup-module_menu-popup_Q68IE {
-  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;
+    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);
 }
 
 .ktl-menu-popup-module_menu-popup-expanded_ggrp9 {
-  display: block;
+    display: block;
 }
 
 .ktl-menu-button-module_button_wB9Mx {
@@ -763,8 +730,8 @@
   background: none;
   padding: 0;
   margin: 0;
-  width: 24px;
-  height: 24px;
+  width: var(--ktl-header-height-mobile);
+  height: var(--ktl-header-height-mobile);
   align-items: center;
   justify-content: center;
   transition: color var(--ktl-transition-xfast),
@@ -777,6 +744,91 @@
     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;
@@ -787,6 +839,7 @@
 .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 {
@@ -795,13 +848,10 @@
   align-items: center;
   justify-items: center;
   height: 100%;
-  margin-right: 16px;
-  padding-right: 16px;
-  border-right: 1px solid rgba(255, 255, 255, 0.2);
+  margin-right: 12px;
 }
 
 .ktl-logo-small-module_icon_NyEog {
-  width: 24px;
-  height: 24px;
-  margin-left: -4px;
+  width: 20px;
+  height: 20px;
 }

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, 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, 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';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-var _radialGradient, _path;
+var _path, _defs;
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -21,27 +21,29 @@ function _extends() {
 }
 
 const SvgKotlinLogoSmall = props => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-}, props), _radialGradient || (_radialGradient = /*#__PURE__*/React.createElement("radialGradient", {
+  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", {
   id: "kotlin-logo-small_svg__a",
-  cx: 22.432,
-  cy: 3.493,
-  r: 21.679,
-  gradientTransform: "translate(-.19 .042) scale(.9998)",
-  gradientUnits: "userSpaceOnUse"
+  cx: 0,
+  cy: 0,
+  r: 1,
+  gradientUnits: "userSpaceOnUse",
+  gradientTransform: "translate(19.335 .822) scale(22.9097)"
 }, /*#__PURE__*/React.createElement("stop", {
   offset: 0.003,
-  stopColor: "#e44857"
+  stopColor: "#EF4857"
 }), /*#__PURE__*/React.createElement("stop", {
   offset: 0.469,
-  stopColor: "#c711e1"
+  stopColor: "#D211EC"
 }), /*#__PURE__*/React.createElement("stop", {
   offset: 1,
-  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"
-})));
+  stopColor: "#7F52FF"
+})))));
 
 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-h3'))
+    className: classNames(styles.link, textCn('rs-h4'))
   }, homeTitle));
 };
 

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

@@ -1,20 +1,23 @@
 import React__default from 'react';
 import styles from './menu-button.module.pcss.js';
 import classNames from 'classnames';
-import SvgHamburgerIcon from './hamburger-icon.svg.js';
-import SvgCloseIcon from './close-icon.svg.js';
+import Button from '@rescui/button';
+import { CloseIcon, HamburgerIcon } from '@rescui/icons';
 
 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
-  }, isExpanded ? React__default.createElement(SvgCloseIcon, null) : React__default.createElement(SvgHamburgerIcon, null));
+    onClick: onClick,
+    size: 'l',
+    mode: 'clear',
+    icon: isExpanded ? React__default.createElement(CloseIcon, null) : React__default.createElement(HamburgerIcon, null)
+  });
 };
 
 export { MenuButton };

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

@@ -0,0 +1,33 @@
+import React__default, { Fragment } from 'react';
+import { MenuListItem } from '../menu-list-item/menu-list-item.js';
+import styles from './menu-list.module.pcss.js';
+
+const MenuList = ({
+  items,
+  level,
+  linkHandler
+}) => {
+  return React__default.createElement(React__default.Fragment, null, items.map((item, i) => React__default.createElement(Fragment, {
+    key: i
+  }, item.items && item.items.length > 0 ? React__default.createElement("div", {
+    className: styles.menuItemGroup
+  }, 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
+  })) : React__default.createElement(React__default.Fragment, null, React__default.createElement(MenuListItem, {
+    item: item,
+    level: level,
+    linkHandler: linkHandler
+  }), item.items && React__default.createElement(MenuList, {
+    items: item.items,
+    level: level + 1,
+    linkHandler: linkHandler
+  })))));
+};
+
+export { MenuList };

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

@@ -0,0 +1,4 @@
+var styles = {
+  "menuItemGroup": "ktl-menu-list-module_menu-item-group_mFvUE"
+};
+export { styles as default };

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

@@ -0,0 +1,28 @@
+import React__default, { useCallback } from 'react';
+import classNames from 'classnames';
+import styles from './menu-list-item.module.pcss.js';
+
+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);
+};
+
+export { MenuListItem };

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

@@ -0,0 +1,7 @@
+var styles = {
+  "menuItem": "ktl-menu-list-item-module_menu-item_Aruue",
+  "active": "ktl-menu-list-item-module_active_jHfJR",
+  "activeWithChild": "ktl-menu-list-item-module_active-with-child_ier2a",
+  "menuItemRoot": "ktl-menu-list-item-module_menu-item-root_Rzcqb"
+};
+export { styles as default };

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

@@ -1,51 +1,11 @@
-import React__default, { useRef, useState, useEffect, useLayoutEffect, useCallback, Fragment } from 'react';
+import React__default, { useRef, useState, useEffect, useLayoutEffect, useCallback } 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,9 +1,5 @@
 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,4 +1,6 @@
 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/`;
@@ -32,6 +34,9 @@ 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: [{
@@ -80,8 +85,9 @@ const navScheme = [{
   }]
 }];
 
-function getNavScheme(isUrlActive = (url, currentUrl) => url === currentUrl, currentUrl, isPlayground) {
-  return navScheme.map(({
+function getNavScheme(isUrlActive = (url, currentUrl) => url === currentUrl, currentUrl, isPlayground, withoutHomeSection) {
+  const controlledNavScheme = withoutHomeSection ? navScheme.slice(1) : navScheme;
+  return controlledNavScheme.map(({
     title,
     url,
     items
@@ -132,4 +138,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, 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, 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 };