@jetbrains/kotlin-web-site-ui 4.4.0-alpha.2 → 4.4.0-alpha.3

package/out/components/header/index.css

@@ -9,7 +9,6 @@
   width: 100px;
   height: 24px;
   text-decoration: none;
-  margin-left: -4px;
   cursor: pointer;
 }
 
@@ -211,6 +210,12 @@
   }
 }
 
+@media (max-width: 767px) {
+  .ktl-horizontal-menu-module_nav_gbA7M {
+    display: none;
+  }
+}
+
 :root {
   --ktl-light-grey: #f4f4f4;
   --ktl-dark-100: rgba(39, 40, 44, 1);
@@ -776,10 +781,15 @@
     color: #ffffff;
     text-decoration: none;
     padding: 12px 7px 12px 16px;
-    transition: color var(--ktl-transition-xfast),
-    background-color var(--ktl-transition-xfast);
 }
 
+s
+
+    .ktl-menu-list-item-module_menu-item_Aruue:hover {
+        color: rgba(255, 255, 255, 1);
+        text-decoration: none;
+    }
+
 .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);

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-var _radialGradient, _path, _g;
+var _path, _path2, _path3, _defs;
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -21,33 +21,35 @@ function _extends() {
 }
 
 const SvgKotlinLogoLarge = props => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 100 24"
-}, props), _radialGradient || (_radialGradient = /*#__PURE__*/React.createElement("radialGradient", {
+  width: 98,
+  height: 22,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M43.314 1.067h-4.031L30.5 10.422V1.098H27.27v20.273H30.5v-9.82l8.814 9.82h4.177l-9.397-10.484 9.22-9.82Z",
+  fill: "#fff"
+})), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+  d: "M54.303 7.186c-1.153-.66-2.45-.994-3.901-.994-1.478 0-2.803.33-3.973.994a7.042 7.042 0 0 0-2.735 2.758c-.65 1.179-.976 2.515-.976 4.01 0 1.494.325 2.835.972 4.01a6.967 6.967 0 0 0 2.716 2.758c1.166.659 2.486.993 3.964.993 1.46 0 2.766-.33 3.923-.993a6.941 6.941 0 0 0 2.694-2.759c.642-1.178.963-2.515.963-4.01 0-1.494-.32-2.83-.963-4.009a6.949 6.949 0 0 0-2.684-2.758Zm-.204 9.328c-.357.74-.859 1.314-1.505 1.73-.646.415-1.392.622-2.233.622-.85 0-1.604-.207-2.26-.623a4.184 4.184 0 0 1-1.528-1.73c-.361-.74-.542-1.589-.542-2.555 0-.966.185-1.815.551-2.555a4.177 4.177 0 0 1 1.537-1.73c.656-.415 1.415-.623 2.278-.623.832 0 1.573.208 2.22.623a4.125 4.125 0 0 1 1.5 1.73c.353.74.529 1.59.529 2.555-.009.962-.19 1.815-.547 2.556ZM64.555 2.836h-3.132v2.52c0 .397-.095.695-.29.889-.194.198-.492.298-.899.298h-1.537v2.664h2.667v7.978c0 .83.167 1.562.506 2.194a3.591 3.591 0 0 0 1.442 1.472c.624.348 1.36.52 2.21.52h2.391v-2.782h-1.798c-.466 0-.841-.163-1.13-.483-.29-.325-.434-.75-.434-1.282V9.207h3.448V6.543h-3.448V2.836h.004ZM73.68.286h-3.186V21.37h3.187V.286ZM80.498.312H77.28v3.273h3.218V.312ZM80.466 6.544H77.28V21.37h3.186V6.544ZM96.67 8.99a4.969 4.969 0 0 0-1.899-2.054c-.818-.492-1.772-.74-2.866-.74-1.161 0-2.178.284-3.05.848-.697.447-1.257 1.052-1.7 1.797l-.018-2.298H84.09V21.37h3.191v-8.298c0-.8.154-1.513.457-2.136a3.39 3.39 0 0 1 1.293-1.45c.556-.342 1.202-.514 1.948-.514.669 0 1.238.14 1.717.42.48.28.841.682 1.085 1.201.249.52.37 1.142.37 1.87v8.907h3.192v-9.355c0-1.138-.226-2.149-.674-3.025Z",
+  fill: "#fff"
+})), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
+  d: "M20 21H0V1h20L9.793 10.855 20 21Z",
+  fill: "url(#kotlin-logo-large_svg__a)"
+})), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("radialGradient", {
   id: "kotlin-logo-large_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 1.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-large_svg__a)",
-  d: "M22.87 21.68H3.94V2.76h18.93l-9.66 9.32z"
-})), _g || (_g = /*#__PURE__*/React.createElement("g", {
-  fill: "#fff"
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M45.69 2.73h-3.76l-8.18 8.73v-8.7h-3.02v18.92h3.02v-9.17l8.21 9.17h3.89l-8.75-9.79z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M55.93 8.44c-1.07-.62-2.28-.93-3.64-.93-1.38 0-2.61.31-3.7.93a6.63 6.63 0 0 0-2.55 2.57c-.61 1.1-.91 2.35-.91 3.74 0 1.4.3 2.64.91 3.74a6.45 6.45 0 0 0 2.53 2.57c1.09.62 2.32.93 3.7.93 1.36 0 2.58-.31 3.66-.93a6.53 6.53 0 0 0 2.51-2.57c.6-1.1.9-2.35.9-3.74 0-1.4-.3-2.64-.9-3.74-.6-1.1-1.43-1.95-2.51-2.57zm-.19 8.7c-.33.69-.8 1.23-1.4 1.61-.6.39-1.3.58-2.08.58-.79 0-1.49-.19-2.11-.58-.61-.39-1.09-.93-1.43-1.61-.34-.69-.51-1.48-.51-2.38 0-.9.17-1.7.51-2.39.34-.69.82-1.23 1.43-1.61.61-.39 1.32-.58 2.12-.58.77 0 1.46.19 2.07.58.6.39 1.07.93 1.4 1.61.33.69.49 1.48.49 2.39.01.9-.15 1.69-.49 2.38zm9.75-12.76h-2.92v2.35c0 .37-.09.65-.27.83-.18.18-.46.28-.84.28h-1.43v2.49h2.49v7.45c0 .77.16 1.46.47 2.05.31.59.76 1.05 1.34 1.37.58.32 1.27.49 2.06.49h2.23V19.1h-1.68c-.43 0-.78-.15-1.06-.45-.27-.3-.4-.7-.4-1.2v-7.11h3.22v-2.5h-3.22V4.38zM71.03 2H74v19.68h-2.97zm6.32.03h3v3.05h-3zm0 5.81h2.97v13.84h-2.97zm18.08 2.28a4.694 4.694 0 0 0-1.77-1.92c-.76-.46-1.65-.69-2.67-.69-1.08 0-2.03.26-2.84.79-.65.42-1.17.98-1.58 1.68l-.02-2.14H83.7v13.84h2.97v-7.74c0-.75.14-1.41.43-1.99.28-.58.68-1.03 1.2-1.35.52-.32 1.12-.48 1.82-.48.62 0 1.16.13 1.6.39.45.26.78.64 1.01 1.12.23.49.34 1.07.34 1.74v8.31h2.97v-8.73c.02-1.07-.2-2.01-.61-2.83z"
-}))));
+  stopColor: "#7F52FF"
+})))));
 
 export { SvgKotlinLogoLarge as default };

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

@@ -18,7 +18,7 @@ const MenuPopup = ({
   const [navStyle, setNavStyle] = useState({});
   useEffect(() => {
     return () => {
-      // setExpand(false);
+      setExpand(false);
       clearAllBodyScrollLocks();
     };
   }, []);

package/out/components/top-menu/index.css

@@ -150,6 +150,10 @@
     margin-bottom: 8px;
 }
 
+.ktl-vertical-menu-module_sticky-header_BlLzL {
+    margin-top: 0;
+}
+
 .ktl-vertical-menu-module_dropdown-list_N3KWV {
     display: flex;
     flex-direction: column;
@@ -166,12 +170,9 @@
 .ktl-vertical-menu-module_dropdown-item_XLfp4 {
     padding: 12px 16px;
     text-decoration: none;
-    transition: color var(--ktl-transition-xfast),
-    background-color var(--ktl-transition-xfast);
 }
 
 .ktl-vertical-menu-module_dropdown-item_XLfp4:hover {
-        background: rgba(39, 40, 44, 0.1);
         color: #27282c;
     }
 
@@ -193,7 +194,6 @@
     }
 
 .ktl-vertical-menu-module_dropdown-list-dark-theme_A1-Bw .ktl-vertical-menu-module_dropdown-item_XLfp4:hover {
-            background: rgba(255, 255, 255, 0.1);
             color: #ffffff;
         }
 

package/out/components/top-menu/vertical-menu/vertical-menu.js

@@ -21,7 +21,7 @@ const VerticalMenu = ({
 }) => {
   const textCn = useTextStyles();
 
-  let _items = (mobileOverview ? [{
+  const _items = (mobileOverview ? [{
     title: mobileTitle,
     url: homeUrl
   }] : []).concat(items);
@@ -31,8 +31,11 @@ const VerticalMenu = ({
   const activeItem = _items[_activeIndex];
   const [isExpanded, setIsExpanded] = useState(false);
   const [portalRoot, setPortalRoot] = useState(null);
+  const [isTopMenuSticky, setIsTopMenuSticky] = useState(false);
   const handleOpen = useCallback(() => {
     setIsExpanded(true);
+    const topMenuTopOffset = topMenuRef?.current?.getBoundingClientRect().top;
+    setIsTopMenuSticky(topMenuTopOffset === 0);
   }, []);
   const handleClose = useCallback(() => {
     setIsExpanded(false);
@@ -62,7 +65,8 @@ const VerticalMenu = ({
     items: _items,
     onClose: handleClose,
     linkHandler: linkHandler,
-    topMenuRef: topMenuRef
+    topMenuRef: topMenuRef,
+    isSticky: isTopMenuSticky
   }), portalRoot)));
 };
 
@@ -72,7 +76,8 @@ const VerticalMenuDropDown = ({
   items,
   linkHandler,
   activeIndex,
-  topMenuRef
+  topMenuRef,
+  isSticky
 }) => {
   const textCn = useTextStyles();
   const theme = useTheme();
@@ -99,7 +104,9 @@ const VerticalMenuDropDown = ({
       [styles.dropdownListDarkTheme]: theme === 'dark'
     })
   }, React__default.createElement("div", {
-    className: styles.dropdownHeader
+    className: classNames(styles.dropdownHeader, {
+      [styles.stickyHeader]: isSticky
+    })
   }, React__default.createElement("div", {
     className: textCn('rs-text-2')
   }, title), React__default.createElement(Button, {
@@ -116,7 +123,8 @@ const VerticalMenuDropDown = ({
       [styles.dropdownItemActive]: index === activeIndex
     }),
     onClick: event => linkHandler?.(event, item.url),
-    target: item.isExternal ? '_blank' : undefined
+    target: item.isExternal ? '_blank' : undefined,
+    rel: "noreferrer"
   }, item.title)));
 };
 

package/out/components/top-menu/vertical-menu/vertical-menu.module.pcss.js

@@ -4,6 +4,7 @@ var styles = {
   "buttonText": "ktl-vertical-menu-module_button-text_aXith",
   "icon": "ktl-vertical-menu-module_icon_-Ieat",
   "dropdownHeader": "ktl-vertical-menu-module_dropdown-header_77lTy",
+  "stickyHeader": "ktl-vertical-menu-module_sticky-header_BlLzL",
   "dropdownList": "ktl-vertical-menu-module_dropdown-list_N3KWV",
   "dropdownItem": "ktl-vertical-menu-module_dropdown-item_XLfp4",
   "dropdownItemActive": "ktl-vertical-menu-module_dropdown-item-active_iBUbj",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.4.0-alpha.2",
+  "version": "4.4.0-alpha.3",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [