@gravity-ui/navigation 0.2.1 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/build/cjs/components/types.d.ts +9 -1
- package/build/cjs/index.js +75 -48
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/types.d.ts +9 -1
- package/build/esm/index.js +75 -48
- package/build/esm/index.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.3.1](https://github.com/gravity-ui/navigation/compare/v0.3.0...v0.3.1) (2022-12-29)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* keep svg viewbox ([#33](https://github.com/gravity-ui/navigation/issues/33)) ([0205630](https://github.com/gravity-ui/navigation/commit/020563098e5e1d8187f2d2c62e7ef9af4d4085eb))
|
|
9
|
+
|
|
10
|
+
## [0.3.0](https://github.com/gravity-ui/navigation/compare/v0.2.1...v0.3.0) (2022-11-24)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### ⚠ BREAKING CHANGES
|
|
14
|
+
|
|
15
|
+
* Type of FooterItemProps.item.itemWrapper is changed ([df865df](https://github.com/gravity-ui/navigation/commit/df865df329f6c1e62c09063cdbf1596e634e8145))
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
* footer items should be in bottom even if menuItems is empty ([d55e55e](https://github.com/gravity-ui/navigation/commit/d55e55e267be989b2f94d552476f21c116af9489))
|
|
21
|
+
|
|
3
22
|
## [0.2.1](https://github.com/gravity-ui/navigation/compare/v0.2.0...v0.2.1) (2022-10-31)
|
|
4
23
|
|
|
5
24
|
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { IconProps } from '@gravity-ui/uikit';
|
|
3
3
|
export declare type MenuItemType = 'regular' | 'action' | 'divider';
|
|
4
|
+
export interface MakeItemParams {
|
|
5
|
+
icon?: React.ReactNode;
|
|
6
|
+
title: React.ReactNode;
|
|
7
|
+
}
|
|
4
8
|
export interface MenuItem {
|
|
5
9
|
id: string;
|
|
6
10
|
title: React.ReactNode;
|
|
@@ -11,7 +15,11 @@ export interface MenuItem {
|
|
|
11
15
|
current?: boolean;
|
|
12
16
|
pinned?: boolean;
|
|
13
17
|
onItemClick?: (item: MenuItem, collapsed: boolean) => void;
|
|
14
|
-
itemWrapper?: (
|
|
18
|
+
itemWrapper?: (p: MakeItemParams, makeItem: (p: MakeItemParams) => React.ReactNode, opts: {
|
|
19
|
+
collapsed: boolean;
|
|
20
|
+
compact: boolean;
|
|
21
|
+
item: MenuItem;
|
|
22
|
+
}) => React.ReactNode;
|
|
15
23
|
rightAdornment?: React.ReactNode;
|
|
16
24
|
type?: MenuItemType;
|
|
17
25
|
afterMoreButton?: boolean;
|
package/build/cjs/index.js
CHANGED
|
@@ -3876,7 +3876,8 @@ function renderItemTitle(item) {
|
|
|
3876
3876
|
}
|
|
3877
3877
|
const defaultPopupPlacement = ['right-end'];
|
|
3878
3878
|
const defaultPopupOffset = [-20, 8];
|
|
3879
|
-
const Item = (
|
|
3879
|
+
const Item = (props) => {
|
|
3880
|
+
const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, renderPopupContent, onClosePopup, onItemClick, } = props;
|
|
3880
3881
|
if (item.type === 'divider') {
|
|
3881
3882
|
return React__default["default"].createElement("div", { className: b$6('menu-divider') });
|
|
3882
3883
|
}
|
|
@@ -3899,64 +3900,88 @@ const Item = ({ item, compact, className, collapseItems, onMouseLeave, onMouseEn
|
|
|
3899
3900
|
}
|
|
3900
3901
|
onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
|
|
3901
3902
|
}, [onClosePopup]);
|
|
3902
|
-
const
|
|
3903
|
-
|
|
3904
|
-
|
|
3905
|
-
|
|
3906
|
-
|
|
3907
|
-
|
|
3908
|
-
|
|
3909
|
-
|
|
3910
|
-
|
|
3911
|
-
}
|
|
3912
|
-
else {
|
|
3913
|
-
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false);
|
|
3914
|
-
}
|
|
3915
|
-
}, onMouseEnter: () => {
|
|
3916
|
-
if (!compact) {
|
|
3917
|
-
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
|
|
3918
|
-
}
|
|
3919
|
-
}, onMouseLeave: () => {
|
|
3920
|
-
if (!compact) {
|
|
3921
|
-
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3922
|
-
}
|
|
3923
|
-
} },
|
|
3924
|
-
React__default["default"].createElement("div", { className: b$6('icon-place') }, compact ? (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
3925
|
-
React__default["default"].createElement("div", { onMouseEnter: (event) => {
|
|
3926
|
-
if (!open) {
|
|
3927
|
-
setTooltipAnchor(event.currentTarget);
|
|
3928
|
-
}
|
|
3929
|
-
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
|
|
3930
|
-
}, onMouseLeave: () => {
|
|
3903
|
+
const makeNode = ({ icon: iconEl, title: titleEl }) => {
|
|
3904
|
+
const createdNode = (React__default["default"].createElement("div", { className: b$6({ type, current, compact }, className), ref: ref, onClick: () => {
|
|
3905
|
+
if (collapsedItem) {
|
|
3906
|
+
/**
|
|
3907
|
+
* If we call onItemClick for collapsedItem then:
|
|
3908
|
+
* - User get unexpected item in onItemClick callback
|
|
3909
|
+
* - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
|
|
3910
|
+
*/
|
|
3911
|
+
toggleOpen(!open);
|
|
3931
3912
|
setTooltipAnchor(null);
|
|
3913
|
+
}
|
|
3914
|
+
else {
|
|
3915
|
+
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false);
|
|
3916
|
+
}
|
|
3917
|
+
}, onMouseEnter: () => {
|
|
3918
|
+
if (!compact) {
|
|
3919
|
+
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
|
|
3920
|
+
}
|
|
3921
|
+
}, onMouseLeave: () => {
|
|
3922
|
+
if (!compact) {
|
|
3932
3923
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3933
|
-
}
|
|
3934
|
-
|
|
3935
|
-
|
|
3936
|
-
|
|
3937
|
-
|
|
3938
|
-
|
|
3939
|
-
const collapseNode = (React__default["default"].createElement("div", { className: b$6('collapse-item'), onClick: () => {
|
|
3940
|
-
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
|
|
3941
|
-
} }, renderItemTitle(collapseItem)));
|
|
3942
|
-
if (typeof collapseItem.itemWrapper === 'function') {
|
|
3943
|
-
return collapseItem.itemWrapper(collapseNode, collapseItem, true, compact);
|
|
3924
|
+
}
|
|
3925
|
+
} },
|
|
3926
|
+
React__default["default"].createElement("div", { className: b$6('icon-place') }, compact ? (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
3927
|
+
React__default["default"].createElement("div", { onMouseEnter: (event) => {
|
|
3928
|
+
if (!open) {
|
|
3929
|
+
setTooltipAnchor(event.currentTarget);
|
|
3944
3930
|
}
|
|
3945
|
-
|
|
3946
|
-
}
|
|
3947
|
-
|
|
3931
|
+
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
|
|
3932
|
+
}, onMouseLeave: () => {
|
|
3933
|
+
setTooltipAnchor(null);
|
|
3934
|
+
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3935
|
+
}, className: b$6('btn-icon') }, iconEl),
|
|
3936
|
+
enableTooltip && (React__default["default"].createElement(ItemTooltip, { anchor: tooltipAnchor, text: tooltipText })))) : (iconEl)),
|
|
3937
|
+
React__default["default"].createElement("div", { className: b$6('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
|
|
3938
|
+
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { className: b$6('popup'), open: popupVisible, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
|
|
3939
|
+
return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$6('link') }, createdNode)) : (createdNode);
|
|
3940
|
+
};
|
|
3941
|
+
const iconNode = icon ? React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$6('icon') }) : null;
|
|
3942
|
+
const titleNode = renderItemTitle(item);
|
|
3943
|
+
const params = { icon: iconNode, title: titleNode };
|
|
3944
|
+
let node;
|
|
3945
|
+
const opts = { compact, collapsed: false, item };
|
|
3948
3946
|
if (typeof item.itemWrapper === 'function') {
|
|
3949
|
-
|
|
3947
|
+
node = item.itemWrapper(params, makeNode, opts);
|
|
3948
|
+
}
|
|
3949
|
+
else {
|
|
3950
|
+
node = makeNode(params);
|
|
3950
3951
|
}
|
|
3951
|
-
return
|
|
3952
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
3953
|
+
node,
|
|
3954
|
+
open && collapsedItem && (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(CollapsedPopup, Object.assign({}, props, { anchorRef: ref, onClose: () => toggleOpen(false) })))));
|
|
3952
3955
|
};
|
|
3953
3956
|
Item.displayName = 'Item';
|
|
3957
|
+
function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClose, }) {
|
|
3958
|
+
return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default["default"].createElement(uikit.Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
|
|
3959
|
+
React__default["default"].createElement("div", { className: b$6('collapse-items-popup-content') },
|
|
3960
|
+
React__default["default"].createElement(uikit.List, { itemClassName: b$6('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
|
|
3961
|
+
const makeCollapseNode = ({ title: titleEl }) => {
|
|
3962
|
+
const res = (React__default["default"].createElement("div", { className: b$6('collapse-item'), onClick: () => {
|
|
3963
|
+
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
|
|
3964
|
+
} }, titleEl));
|
|
3965
|
+
return collapseItem.link ? (React__default["default"].createElement("a", { href: collapseItem.link, className: b$6('link') }, res)) : (res);
|
|
3966
|
+
};
|
|
3967
|
+
const titleNode = renderItemTitle(collapseItem);
|
|
3968
|
+
const params = { title: titleNode };
|
|
3969
|
+
const opts = { compact, collapsed: true, item: collapseItem };
|
|
3970
|
+
if (typeof collapseItem.itemWrapper === 'function') {
|
|
3971
|
+
return collapseItem.itemWrapper(params, makeCollapseNode, opts);
|
|
3972
|
+
}
|
|
3973
|
+
else {
|
|
3974
|
+
return makeCollapseNode(params);
|
|
3975
|
+
}
|
|
3976
|
+
} })))) : null;
|
|
3977
|
+
}
|
|
3954
3978
|
|
|
3955
3979
|
var _path$2;
|
|
3956
3980
|
function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : 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$2.apply(this, arguments); }
|
|
3957
3981
|
var SvgDots = function SvgDots(props) {
|
|
3958
3982
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
3959
3983
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3984
|
+
viewBox: "0 0 16 16",
|
|
3960
3985
|
width: 16,
|
|
3961
3986
|
height: 16
|
|
3962
3987
|
}, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -4083,6 +4108,7 @@ var SvgControlMenuButton = function SvgControlMenuButton(props) {
|
|
|
4083
4108
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
4084
4109
|
width: 8,
|
|
4085
4110
|
height: 8,
|
|
4111
|
+
viewBox: "0 0 8 8",
|
|
4086
4112
|
fill: "currentColor",
|
|
4087
4113
|
xmlns: "http://www.w3.org/2000/svg"
|
|
4088
4114
|
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -4097,6 +4123,7 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4097
4123
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
4098
4124
|
width: 56,
|
|
4099
4125
|
height: 29,
|
|
4126
|
+
viewBox: "0 0 56 29",
|
|
4100
4127
|
fill: "currentColor",
|
|
4101
4128
|
xmlns: "http://www.w3.org/2000/svg"
|
|
4102
4129
|
}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -4105,7 +4132,7 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4105
4132
|
};
|
|
4106
4133
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4107
4134
|
|
|
4108
|
-
var css_248z$3 = ".yc-root {\n --aside-header-background-color: var(--yc-color-base-info);\n --aside-header-collapse-button-divider-line-color: var(\n --aside-header-header-divider-line-color\n );\n}\n\n.yc-root_theme_light {\n --aside-header-divider-line-color: transparent;\n --aside-header-header-divider-line-color: var(--yc-color-line-generic);\n}\n\n.yc-root_theme_dark {\n --aside-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n --aside-header-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n}\n\n.ycn-aside-header {\n --aside-header-min-width: 56px;\n height: 100%;\n width: 100%;\n position: relative;\n background-color: var(--yc-color-base-background);\n}\n.ycn-aside-header__aside {\n position: sticky;\n top: 0;\n left: 0;\n height: 100vh;\n width: inherit;\n display: flex;\n flex-direction: column;\n background-color: var(--yc-color-base-background);\n z-index: 100;\n box-sizing: border-box;\n}\n.ycn-aside-header__aside::after {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n width: 1px;\n height: 100%;\n content: \"\";\n background-color: var(--aside-header-divider-line-color);\n}\n.ycn-aside-header__aside-popup-anchor {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n}\n.ycn-aside-header__aside-content {\n --gradient-height: 334px;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n width: inherit;\n height: inherit;\n position: relative;\n z-index: 2;\n user-select: none;\n background: linear-gradient(180deg, var(--aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.ycn-aside-header__aside-content::after {\n position: absolute;\n top: 0;\n right: -100px;\n bottom: 0;\n width: 100px;\n content: \"\";\n box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.ycn-aside-header__aside-content > .ycn-aside-header-logo {\n margin: 8px 0;\n}\n.ycn-aside-header_compact .ycn-aside-header__aside-content {\n background: transparent;\n}\n.ycn-aside-header__header {\n --aside-header-header-divider-height: 29px;\n position: relative;\n z-index: 1;\n flex: none;\n box-sizing: border-box;\n width: 100%;\n padding-top: 8px;\n padding-bottom: 22px;\n}\n.ycn-aside-header__header .ycn-aside-header__header-divider {\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: -2;\n display: none;\n color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::before {\n position: absolute;\n top: 0;\n left: 0;\n z-index: -2;\n display: none;\n width: 100%;\n height: calc(100% - var(--aside-header-header-divider-height));\n content: \"\";\n background-color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::after {\n position: absolute;\n bottom: 12px;\n left: 0;\n z-index: -2;\n width: 100%;\n height: 1px;\n content: \"\";\n background-color: var(--aside-header-header-divider-line-color);\n}\n.ycn-aside-header_compact .ycn-aside-header__header::before {\n display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header::after {\n display: none;\n}\n.ycn-aside-header_compact .ycn-aside-header__header .ycn-aside-header__header-divider {\n display: block;\n}\n.ycn-aside-header__footer {\n flex-shrink: 0;\n width: 100%;\n margin: 8px 0;\n display: flex;\n flex-direction: column;\n}\n.ycn-aside-header__panels {\n z-index: 98;\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n overflow: auto;\n}\n.ycn-aside-header__panel {\n height: 100%;\n}\n.ycn-aside-header__pane-container {\n display: flex;\n outline: none;\n overflow: visible;\n user-select: text;\n flex-direction: row;\n}\n.ycn-aside-header__content {\n width: calc(100% - var(--aside-header-size));\n z-index: 95;\n}\n.ycn-aside-header__collapse-button {\n --yc-button-background-color-hover: transparent;\n overflow: hidden;\n box-sizing: border-box;\n flex: none;\n width: 100%;\n height: 20px;\n border-top: 1px solid var(--aside-header-collapse-button-divider-line-color);\n margin-top: auto;\n}\n.ycn-aside-header__collapse-button:not(.ycn-aside-header__collapse-button_compact) .ycn-aside-header__collapse-icon {\n transform: rotate(180deg);\n}\n.ycn-aside-header__collapse-button .ycn-aside-header__collapse-icon {\n color: var(--yc-color-text-secondary);\n}\n.ycn-aside-header__collapse-button:hover .ycn-aside-header__collapse-icon {\n color: var(--yc-color-text-primary);\n}";
|
|
4135
|
+
var css_248z$3 = ".yc-root {\n --aside-header-background-color: var(--yc-color-base-info);\n --aside-header-collapse-button-divider-line-color: var(\n --aside-header-header-divider-line-color\n );\n}\n\n.yc-root_theme_light {\n --aside-header-divider-line-color: transparent;\n --aside-header-header-divider-line-color: var(--yc-color-line-generic);\n}\n\n.yc-root_theme_dark {\n --aside-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n --aside-header-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n}\n\n.ycn-aside-header {\n --aside-header-min-width: 56px;\n height: 100%;\n width: 100%;\n position: relative;\n background-color: var(--yc-color-base-background);\n}\n.ycn-aside-header__aside {\n position: sticky;\n top: 0;\n left: 0;\n height: 100vh;\n width: inherit;\n display: flex;\n flex-direction: column;\n background-color: var(--yc-color-base-background);\n z-index: 100;\n box-sizing: border-box;\n}\n.ycn-aside-header__aside::after {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n width: 1px;\n height: 100%;\n content: \"\";\n background-color: var(--aside-header-divider-line-color);\n}\n.ycn-aside-header__aside-popup-anchor {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n}\n.ycn-aside-header__aside-content {\n --gradient-height: 334px;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n width: inherit;\n height: inherit;\n position: relative;\n z-index: 2;\n user-select: none;\n background: linear-gradient(180deg, var(--aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.ycn-aside-header__aside-content::after {\n position: absolute;\n top: 0;\n right: -100px;\n bottom: 0;\n width: 100px;\n content: \"\";\n box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.ycn-aside-header__aside-content > .ycn-aside-header-logo {\n margin: 8px 0;\n}\n.ycn-aside-header_compact .ycn-aside-header__aside-content {\n background: transparent;\n}\n.ycn-aside-header__header {\n --aside-header-header-divider-height: 29px;\n position: relative;\n z-index: 1;\n flex: none;\n box-sizing: border-box;\n width: 100%;\n padding-top: 8px;\n padding-bottom: 22px;\n}\n.ycn-aside-header__header .ycn-aside-header__header-divider {\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: -2;\n display: none;\n color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::before {\n position: absolute;\n top: 0;\n left: 0;\n z-index: -2;\n display: none;\n width: 100%;\n height: calc(100% - var(--aside-header-header-divider-height));\n content: \"\";\n background-color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::after {\n position: absolute;\n bottom: 12px;\n left: 0;\n z-index: -2;\n width: 100%;\n height: 1px;\n content: \"\";\n background-color: var(--aside-header-header-divider-line-color);\n}\n.ycn-aside-header_compact .ycn-aside-header__header::before {\n display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header::after {\n display: none;\n}\n.ycn-aside-header_compact .ycn-aside-header__header .ycn-aside-header__header-divider {\n display: block;\n}\n.ycn-aside-header__menu-items {\n flex-grow: 1;\n}\n.ycn-aside-header__footer {\n flex-shrink: 0;\n width: 100%;\n margin: 8px 0;\n display: flex;\n flex-direction: column;\n}\n.ycn-aside-header__panels {\n z-index: 98;\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n overflow: auto;\n}\n.ycn-aside-header__panel {\n height: 100%;\n}\n.ycn-aside-header__pane-container {\n display: flex;\n outline: none;\n overflow: visible;\n user-select: text;\n flex-direction: row;\n}\n.ycn-aside-header__content {\n width: calc(100% - var(--aside-header-size));\n z-index: 95;\n}\n.ycn-aside-header__collapse-button {\n --yc-button-background-color-hover: transparent;\n overflow: hidden;\n box-sizing: border-box;\n flex: none;\n width: 100%;\n height: 20px;\n border-top: 1px solid var(--aside-header-collapse-button-divider-line-color);\n margin-top: auto;\n}\n.ycn-aside-header__collapse-button:not(.ycn-aside-header__collapse-button_compact) .ycn-aside-header__collapse-icon {\n transform: rotate(180deg);\n}\n.ycn-aside-header__collapse-button .ycn-aside-header__collapse-icon {\n color: var(--yc-color-text-secondary);\n}\n.ycn-aside-header__collapse-button:hover .ycn-aside-header__collapse-icon {\n color: var(--yc-color-text-primary);\n}";
|
|
4109
4136
|
styleInject(css_248z$3);
|
|
4110
4137
|
|
|
4111
4138
|
const b$4 = block('aside-header');
|
|
@@ -4120,7 +4147,7 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4120
4147
|
React__default["default"].createElement("div", { className: b$4('aside-popup-anchor'), ref: this.asideRef }),
|
|
4121
4148
|
React__default["default"].createElement("div", { className: b$4('aside-content') },
|
|
4122
4149
|
this.renderHeader(),
|
|
4123
|
-
React__default["default"].createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick }),
|
|
4150
|
+
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default["default"].createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default["default"].createElement("div", { className: b$4('menu-items') })),
|
|
4124
4151
|
this.renderFooter(size),
|
|
4125
4152
|
this.renderCollapseButton())),
|
|
4126
4153
|
panelItems && this.renderPanels(size)));
|