@teambit/component 0.0.923 → 0.0.924

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.
Files changed (13) hide show
  1. package/dist/{preview-1670210914694.js → preview-1670297376032.js} +2 -2
  2. package/dist/ui/menu/menu-nav.d.ts +2 -2
  3. package/dist/ui/menu/menu-nav.js +24 -17
  4. package/dist/ui/menu/menu-nav.js.map +1 -1
  5. package/dist/ui/menu/menu.js +3 -6
  6. package/dist/ui/menu/menu.js.map +1 -1
  7. package/dist/ui/menu/menu.module.scss +3 -18
  8. package/package-tar/teambit-component-0.0.924.tgz +0 -0
  9. package/package.json +21 -21
  10. package/ui/menu/menu-nav.tsx +13 -17
  11. package/ui/menu/menu.module.scss +3 -18
  12. package/ui/menu/menu.tsx +2 -6
  13. package/package-tar/teambit-component-0.0.923.tgz +0 -0
package/dist/{preview-1670210914694.js → preview-1670297376032.js} RENAMED
@@ -1,5 +1,5 @@
1
- import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.923/dist/component.composition.js';
2
- import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.923/dist/component.docs.mdx';
1
+ import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.924/dist/component.composition.js';
2
+ import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.924/dist/component.docs.mdx';
3
3
 
4
4
  export const compositions = [compositions_0];
5
5
  export const overview = [overview_0];
package/dist/ui/menu/menu-nav.d.ts CHANGED
@@ -2,6 +2,6 @@ import React from 'react';
2
2
  import { OrderedNavigationSlot } from './nav-plugin';
3
3
  export declare type MenuNavProps = {
4
4
  navigationSlot: OrderedNavigationSlot;
5
+ widgetSlot: OrderedNavigationSlot;
5
6
  } & React.HTMLAttributes<HTMLElement>;
6
- export declare function MenuNav({ navigationSlot, className }: MenuNavProps): JSX.Element;
7
- export declare function CollapsableMenuNav({ navigationSlot, className }: MenuNavProps): JSX.Element;
7
+ export declare function CollapsableMenuNav({ navigationSlot, widgetSlot, className }: MenuNavProps): JSX.Element;
package/dist/ui/menu/menu-nav.js CHANGED
@@ -7,7 +7,13 @@ Object.defineProperty(exports, "__esModule", {
7
7
  value: true
8
8
  });
9
9
  exports.CollapsableMenuNav = CollapsableMenuNav;
10
- exports.MenuNav = MenuNav;
10
+ function _defineProperty2() {
11
+ const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
12
+ _defineProperty2 = function () {
13
+ return data;
14
+ };
15
+ return data;
16
+ }
11
17
  function _extends2() {
12
18
  const data = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
19
  _extends2 = function () {
@@ -52,34 +58,35 @@ function _menuModule() {
52
58
  }
53
59
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
54
60
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
55
- function MenuNav({
56
- navigationSlot,
57
- className
58
- }) {
59
- const plugins = (0, _react().useMemo)(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);
60
- return /*#__PURE__*/_react().default.createElement("nav", {
61
- className: (0, _classnames().default)(_menuModule().default.navigation, _menuModule().default.desktopNav, className)
62
- }, plugins.map(([id, menuItem]) => {
63
- return /*#__PURE__*/_react().default.createElement(_topBarNav().TopBarNav, (0, _extends2().default)({
64
- key: id
65
- }, menuItem.props));
66
- }));
67
- }
61
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
62
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2().default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
68
63
  function CollapsableMenuNav({
69
64
  navigationSlot,
65
+ widgetSlot,
70
66
  className
71
67
  }) {
72
68
  const plugins = (0, _react().useMemo)(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);
73
- const links = plugins.map(([id, menuItem]) => {
69
+ const widgets = (0, _react().useMemo)(() => widgetSlot.toArray().sort(sortFn), [widgetSlot]);
70
+ const links = [...plugins, ...widgets].map(([id, menuItem]) => {
71
+ var _plugins$, _widgets$;
72
+ // these styles keep plugins to the left and widgets to the right.
73
+ const lastPluginStyle = menuItem.props.href === ((_plugins$ = plugins[-1]) === null || _plugins$ === void 0 ? void 0 : _plugins$[1].props.href) ? {
74
+ marginRight: 'auto'
75
+ } : {};
76
+ const firstWidgetStyle = menuItem.props.href === ((_widgets$ = widgets[0]) === null || _widgets$ === void 0 ? void 0 : _widgets$[1].props.href) ? {
77
+ marginLeft: 'auto'
78
+ } : {};
74
79
  return {
75
80
  component: function TopBarNavComponent({
76
81
  isInMenu
77
82
  }) {
83
+ const widgetDisplayText = menuItem.props.displayName && isInMenu && menuItem.props.displayName;
78
84
  return /*#__PURE__*/_react().default.createElement(_topBarNav().TopBarNav, (0, _extends2().default)({
79
85
  className: (0, _classnames().default)(_menuModule().default.topBarNav, isInMenu && _menuModule().default.noBorder),
80
86
  key: id
81
- }, menuItem.props));
82
- }
87
+ }, menuItem.props), widgetDisplayText || menuItem.props.children);
88
+ },
89
+ style: _objectSpread(_objectSpread({}, firstWidgetStyle), lastPluginStyle)
83
90
  };
84
91
  });
85
92
  return /*#__PURE__*/_react().default.createElement(_designNavigation().ResponsiveNavbar, {
package/dist/ui/menu/menu-nav.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["MenuNav","navigationSlot","className","plugins","useMemo","toArray","sort","sortFn","classnames","styles","navigation","desktopNav","map","id","menuItem","props","CollapsableMenuNav","links","component","TopBarNavComponent","isInMenu","topBarNav","noBorder","tab","width","height","order","first","second"],"sources":["menu-nav.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport classnames from 'classnames';\nimport { ResponsiveNavbar } from '@teambit/design.navigation.responsive-navbar';\nimport type { TabProps } from '@teambit/design.navigation.responsive-navbar';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport type MenuNavProps = {\n navigationSlot: OrderedNavigationSlot;\n} & React.HTMLAttributes<HTMLElement>;\n\nexport function MenuNav({ navigationSlot, className }: MenuNavProps) {\n const plugins = useMemo(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);\n\n return (\n <nav className={classnames(styles.navigation, styles.desktopNav, className)}>\n {plugins.map(([id, menuItem]) => {\n return <TopBarNav key={id} {...menuItem.props} />;\n })}\n </nav>\n );\n}\n\nexport function CollapsableMenuNav({ navigationSlot, className }: MenuNavProps) {\n const plugins = useMemo(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);\n const links = plugins.map(([id, menuItem]) => {\n return {\n component: function TopBarNavComponent({ isInMenu }: TabProps) {\n return (\n <TopBarNav\n className={classnames(styles.topBarNav, isInMenu && styles.noBorder)}\n key={id}\n {...menuItem.props}\n />\n );\n },\n };\n });\n return (\n <ResponsiveNavbar\n navClassName={classnames(styles.tab, className)}\n style={{ width: '100%', height: '100%' }}\n priority=\"none\"\n tabs={links}\n />\n );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n // 0 - equal\n // <0 - first < second\n // >0 - first > second\n\n return (first ?? 0) - (second ?? 0);\n}\n\n// // this is the aspect-oriented and serialize-able way to sort plugins.\n// const pluginOrder = ['teambit.docs/docs', 'teambit.compositions/compositions', 'teambit.docs/docs'];\n// export function toSortedArray<T>(slot: SlotRegistry<T>, order: string[]) {\n// // sort items according to the order\n// const sorted = order.map((x) => [x, slot.get(x)]).filter(([, val]) => !!val) as [string, T][];\n//\n// // add all other items\n// const unsorted = slot.toArray().filter(([id]) => order.indexOf(id) < 0);\n//\n// return sorted.concat(unsorted);\n// }\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAAwC;AAAA;AAOjC,SAASA,OAAO,CAAC;EAAEC,cAAc;EAAEC;AAAwB,CAAC,EAAE;EACnE,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAC,MAAMH,cAAc,CAACI,OAAO,EAAE,CAACC,IAAI,CAACC,MAAM,CAAC,EAAE,CAACN,cAAc,CAAC,CAAC;EAEtF,oBACE;IAAK,SAAS,EAAE,IAAAO,qBAAU,EAACC,qBAAM,CAACC,UAAU,EAAED,qBAAM,CAACE,UAAU,EAAET,SAAS;EAAE,GACzEC,OAAO,CAACS,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,QAAQ,CAAC,KAAK;IAC/B,oBAAO,+BAAC,sBAAS;MAAC,GAAG,EAAED;IAAG,GAAKC,QAAQ,CAACC,KAAK,EAAI;EACnD,CAAC,CAAC,CACE;AAEV;AAEO,SAASC,kBAAkB,CAAC;EAAEf,cAAc;EAAEC;AAAwB,CAAC,EAAE;EAC9E,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAC,MAAMH,cAAc,CAACI,OAAO,EAAE,CAACC,IAAI,CAACC,MAAM,CAAC,EAAE,CAACN,cAAc,CAAC,CAAC;EACtF,MAAMgB,KAAK,GAAGd,OAAO,CAACS,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,QAAQ,CAAC,KAAK;IAC5C,OAAO;MACLI,SAAS,EAAE,SAASC,kBAAkB,CAAC;QAAEC;MAAmB,CAAC,EAAE;QAC7D,oBACE,+BAAC,sBAAS;UACR,SAAS,EAAE,IAAAZ,qBAAU,EAACC,qBAAM,CAACY,SAAS,EAAED,QAAQ,IAAIX,qBAAM,CAACa,QAAQ,CAAE;UACrE,GAAG,EAAET;QAAG,GACJC,QAAQ,CAACC,KAAK,EAClB;MAEN;IACF,CAAC;EACH,CAAC,CAAC;EACF,oBACE,+BAAC,oCAAgB;IACf,YAAY,EAAE,IAAAP,qBAAU,EAACC,qBAAM,CAACc,GAAG,EAAErB,SAAS,CAAE;IAChD,KAAK,EAAE;MAAEsB,KAAK,EAAE,MAAM;MAAEC,MAAM,EAAE;IAAO,CAAE;IACzC,QAAQ,EAAC,MAAM;IACf,IAAI,EAAER;EAAM,EACZ;AAEN;AAEA,SAASV,MAAM,CAAC,GAAG;EAAEmB,KAAK,EAAEC;AAAM,CAAC,CAAsB,EAAE,GAAG;EAAED,KAAK,EAAEE;AAAO,CAAC,CAAsB,EAAE;EACrG;EACA;EACA;;EAEA,OAAO,CAACD,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,KAAKC,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI,CAAC,CAAC;AACrC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
1
+ {"version":3,"names":["CollapsableMenuNav","navigationSlot","widgetSlot","className","plugins","useMemo","toArray","sort","sortFn","widgets","links","map","id","menuItem","lastPluginStyle","props","href","marginRight","firstWidgetStyle","marginLeft","component","TopBarNavComponent","isInMenu","widgetDisplayText","displayName","classnames","styles","topBarNav","noBorder","children","style","tab","width","height","order","first","second"],"sources":["menu-nav.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport classnames from 'classnames';\nimport { ResponsiveNavbar } from '@teambit/design.navigation.responsive-navbar';\nimport type { TabProps } from '@teambit/design.navigation.responsive-navbar';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport type MenuNavProps = {\n navigationSlot: OrderedNavigationSlot;\n widgetSlot: OrderedNavigationSlot;\n} & React.HTMLAttributes<HTMLElement>;\n\nexport function CollapsableMenuNav({ navigationSlot, widgetSlot, className }: MenuNavProps) {\n const plugins = useMemo(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);\n const widgets = useMemo(() => widgetSlot.toArray().sort(sortFn), [widgetSlot]);\n\n const links = [...plugins, ...widgets].map(([id, menuItem]) => {\n\n // these styles keep plugins to the left and widgets to the right.\n const lastPluginStyle = menuItem.props.href === plugins[-1]?.[1].props.href ? { marginRight: 'auto' } : {};\n const firstWidgetStyle = menuItem.props.href === widgets[0]?.[1].props.href ? { marginLeft: 'auto' } : {};\n\n return {\n component: function TopBarNavComponent({ isInMenu }: TabProps) {\n const widgetDisplayText = (menuItem.props.displayName && isInMenu) && menuItem.props.displayName;\n return (\n <TopBarNav className={classnames(styles.topBarNav, isInMenu && styles.noBorder)} key={id} {...menuItem.props}>\n {widgetDisplayText || menuItem.props.children}\n </TopBarNav>\n );\n },\n style: { ...firstWidgetStyle, ...lastPluginStyle },\n };\n });\n return (\n <ResponsiveNavbar\n navClassName={classnames(styles.tab, className)}\n style={{ width: '100%', height: '100%' }}\n priority=\"none\"\n tabs={links}\n />\n );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n // 0 - equal\n // <0 - first < second\n // >0 - first > second\n\n return (first ?? 0) - (second ?? 0);\n}\n\n// // this is the aspect-oriented and serialize-able way to sort plugins.\n// const pluginOrder = ['teambit.docs/docs', 'teambit.compositions/compositions', 'teambit.docs/docs'];\n// export function toSortedArray<T>(slot: SlotRegistry<T>, order: string[]) {\n// // sort items according to the order\n// const sorted = order.map((x) => [x, slot.get(x)]).filter(([, val]) => !!val) as [string, T][];\n//\n// // add all other items\n// const unsorted = slot.toArray().filter(([id]) => order.indexOf(id) < 0);\n//\n// return sorted.concat(unsorted);\n// }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAAwC;AAAA;AAAA;AAAA;AAQjC,SAASA,kBAAkB,CAAC;EAAEC,cAAc;EAAEC,UAAU;EAAEC;AAAwB,CAAC,EAAE;EAC1F,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAC,MAAMJ,cAAc,CAACK,OAAO,EAAE,CAACC,IAAI,CAACC,MAAM,CAAC,EAAE,CAACP,cAAc,CAAC,CAAC;EACtF,MAAMQ,OAAO,GAAG,IAAAJ,gBAAO,EAAC,MAAMH,UAAU,CAACI,OAAO,EAAE,CAACC,IAAI,CAACC,MAAM,CAAC,EAAE,CAACN,UAAU,CAAC,CAAC;EAE9E,MAAMQ,KAAK,GAAG,CAAC,GAAGN,OAAO,EAAE,GAAGK,OAAO,CAAC,CAACE,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,QAAQ,CAAC,KAAK;IAAA;IAE7D;IACA,MAAMC,eAAe,GAAGD,QAAQ,CAACE,KAAK,CAACC,IAAI,mBAAKZ,OAAO,CAAC,CAAC,CAAC,CAAC,8CAAX,UAAc,CAAC,CAAC,CAACW,KAAK,CAACC,IAAI,IAAG;MAAEC,WAAW,EAAE;IAAO,CAAC,GAAG,CAAC,CAAC;IAC1G,MAAMC,gBAAgB,GAAGL,QAAQ,CAACE,KAAK,CAACC,IAAI,mBAAKP,OAAO,CAAC,CAAC,CAAC,8CAAV,UAAa,CAAC,CAAC,CAACM,KAAK,CAACC,IAAI,IAAG;MAAEG,UAAU,EAAE;IAAO,CAAC,GAAG,CAAC,CAAC;IAEzG,OAAO;MACLC,SAAS,EAAE,SAASC,kBAAkB,CAAC;QAAEC;MAAmB,CAAC,EAAE;QAC7D,MAAMC,iBAAiB,GAAIV,QAAQ,CAACE,KAAK,CAACS,WAAW,IAAIF,QAAQ,IAAKT,QAAQ,CAACE,KAAK,CAACS,WAAW;QAChG,oBACE,+BAAC,sBAAS;UAAC,SAAS,EAAE,IAAAC,qBAAU,EAACC,qBAAM,CAACC,SAAS,EAAEL,QAAQ,IAAII,qBAAM,CAACE,QAAQ,CAAE;UAAC,GAAG,EAAEhB;QAAG,GAAKC,QAAQ,CAACE,KAAK,GACzGQ,iBAAiB,IAAIV,QAAQ,CAACE,KAAK,CAACc,QAAQ,CACnC;MAEhB,CAAC;MACDC,KAAK,kCAAOZ,gBAAgB,GAAKJ,eAAe;IAClD,CAAC;EACH,CAAC,CAAC;EACF,oBACE,+BAAC,oCAAgB;IACf,YAAY,EAAE,IAAAW,qBAAU,EAACC,qBAAM,CAACK,GAAG,EAAE5B,SAAS,CAAE;IAChD,KAAK,EAAE;MAAE6B,KAAK,EAAE,MAAM;MAAEC,MAAM,EAAE;IAAO,CAAE;IACzC,QAAQ,EAAC,MAAM;IACf,IAAI,EAAEvB;EAAM,EACZ;AAEN;AAEA,SAASF,MAAM,CAAC,GAAG;EAAE0B,KAAK,EAAEC;AAAM,CAAC,CAAsB,EAAE,GAAG;EAAED,KAAK,EAAEE;AAAO,CAAC,CAAsB,EAAE;EACrG;EACA;EACA;;EAEA,OAAO,CAACD,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,KAAKC,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI,CAAC,CAAC;AACrC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
package/dist/ui/menu/menu.js CHANGED
@@ -169,14 +169,11 @@ function ComponentMenu({
169
169
  }, /*#__PURE__*/_react().default.createElement("div", {
170
170
  className: _menuModule().default.leftSide
171
171
  }, /*#__PURE__*/_react().default.createElement(_menuNav().CollapsableMenuNav, {
172
- navigationSlot: navigationSlot
172
+ navigationSlot: navigationSlot,
173
+ widgetSlot: widgetSlot
173
174
  })), /*#__PURE__*/_react().default.createElement("div", {
174
175
  className: _menuModule().default.rightSide
175
- }, /*#__PURE__*/_react().default.createElement("div", {
176
- className: _menuModule().default.widgets
177
- }, /*#__PURE__*/_react().default.createElement(_menuNav().MenuNav, {
178
- navigationSlot: widgetSlot
179
- })), /*#__PURE__*/_react().default.createElement(VersionRelatedDropdowns, {
176
+ }, /*#__PURE__*/_react().default.createElement(VersionRelatedDropdowns, {
180
177
  component: component,
181
178
  consumeMethods: consumeMethodSlot,
182
179
  host: host
package/dist/ui/menu/menu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["getComponentIdStr","componentIdStr","isFunction","ComponentMenu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","useComponent","path","useComponentFilters","idFromLocation","useIdFromLocation","_componentIdStr","componentId","ComponentID","fromString","undefined","resolvedComponentIdStr","useComponentOptions","logFilters","customUseComponent","component","useComponentQuery","toString","mainMenuItems","useMemo","groupBy","flatten","values","classnames","styles","topBar","leftSide","rightSide","widgets","hideOnMobile","VersionRelatedDropdowns","consumeMethods","location","useLocation","lanesModel","useLanes","currentLane","viewedLane","id","isDefault","logs","isWorkspace","snaps","filter","log","tag","map","snap","version","hash","tags","tagLookup","Map","forEach","set","compact","toArray","reverse","get","isNew","length","lanes","getLanesByComponentId","lane","localVersion","currentVersion","search","includes","methods","useConsumeMethods","useBox","name","latest","componentVersionMenu","componentModel","method","x","Component","Title"],"sources":["menu.tsx"],"sourcesContent":["import { Routes, Route } from 'react-router-dom';\nimport { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { VersionDropdown } from '@teambit/component.ui.version-dropdown';\nimport { FullLoader } from '@teambit/ui-foundation.ui.full-loader';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { useLocation } from '@teambit/base-react.navigation.link';\nimport { flatten, groupBy, compact, isFunction } from 'lodash';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\nimport { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';\nimport { useLanes } from '@teambit/lanes.hooks.use-lanes';\nimport { LaneModel } from '@teambit/lanes.ui.models.lanes-model';\nimport { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { LegacyComponentLog } from '@teambit/legacy-component-log';\nimport type { ComponentModel } from '../component-model';\nimport { useComponent as useComponentQuery, UseComponentType } from '../use-component';\nimport { MenuNav, CollapsableMenuNav } from './menu-nav';\nimport styles from './menu.module.scss';\nimport { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';\nimport { useIdFromLocation } from '../use-component-from-location';\nimport { ComponentID } from '../..';\nimport { Filters } from '../use-component-query';\n\nexport type MenuProps = {\n className?: string;\n /**\n * slot for top bar menu nav items\n */\n navigationSlot: OrderedNavigationSlot;\n /**\n * right side menu item slot\n */\n widgetSlot: OrderedNavigationSlot;\n host: string;\n /**\n * main dropdown item slot\n */\n menuItemSlot: MenuItemSlot;\n\n consumeMethodSlot: ConsumeMethodSlot;\n\n componentIdStr?: string | (() => string | undefined);\n\n useComponent?: UseComponentType;\n\n path?: string;\n\n useComponentFilters?: () => Filters;\n};\nfunction getComponentIdStr(componentIdStr?: string | (() => string | undefined)): string | undefined {\n if (isFunction(componentIdStr)) return componentIdStr();\n return componentIdStr;\n}\n/**\n * top bar menu.\n */\nexport function ComponentMenu({\n navigationSlot,\n widgetSlot,\n className,\n host,\n menuItemSlot,\n consumeMethodSlot,\n componentIdStr,\n useComponent,\n path,\n useComponentFilters,\n}: MenuProps) {\n const idFromLocation = useIdFromLocation();\n const _componentIdStr = getComponentIdStr(componentIdStr);\n const componentId = _componentIdStr ? ComponentID.fromString(_componentIdStr) : undefined;\n const resolvedComponentIdStr = path || idFromLocation;\n\n const useComponentOptions = {\n logFilters: useComponentFilters?.(),\n customUseComponent: useComponent,\n };\n\n const { component } = useComponentQuery(host, componentId?.toString() || idFromLocation, useComponentOptions);\n const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);\n if (!component) return <FullLoader />;\n return (\n <Routes>\n <Route\n path={`${resolvedComponentIdStr}/*`}\n element={\n <div className={classnames(styles.topBar, className)}>\n <div className={styles.leftSide}>\n <CollapsableMenuNav navigationSlot={navigationSlot} />\n \n </div>\n <div className={styles.rightSide}>\n <div className={styles.widgets}>\n <MenuNav navigationSlot={widgetSlot} />\n </div>\n <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />\n <MainDropdown className={styles.hideOnMobile} menuItems={mainMenuItems} />\n </div>\n </div>\n }\n />\n </Routes>\n );\n}\n\nfunction VersionRelatedDropdowns({\n component,\n consumeMethods,\n host,\n}: {\n component: ComponentModel;\n consumeMethods: ConsumeMethodSlot;\n host: string;\n}) {\n const location = useLocation();\n const { lanesModel } = useLanes();\n const currentLane =\n lanesModel?.viewedLane?.id && !lanesModel?.viewedLane?.id.isDefault() ? lanesModel.viewedLane : undefined;\n\n const { logs } = component;\n const isWorkspace = host === 'teambit.workspace/workspace';\n\n const snaps = useMemo(() => {\n return (logs || []).filter((log) => !log.tag).map((snap) => ({ ...snap, version: snap.hash }));\n }, [logs]);\n\n const tags = useMemo(() => {\n const tagLookup = new Map<string, LegacyComponentLog>();\n (logs || [])\n .filter((log) => log.tag)\n .forEach((tag) => {\n tagLookup.set(tag?.tag as string, tag);\n });\n return compact(\n component.tags\n ?.toArray()\n .reverse()\n .map((tag) => tagLookup.get(tag.version.version))\n ).map((tag) => ({ ...tag, version: tag.tag as string }));\n }, [logs]);\n\n const isNew = snaps.length === 0 && tags.length === 0;\n\n const lanes = lanesModel?.getLanesByComponentId(component.id)?.filter((lane) => !lane.id.isDefault()) || [];\n const localVersion = isWorkspace && !isNew && !currentLane;\n\n const currentVersion =\n isWorkspace && !isNew && !location?.search.includes('version') ? 'workspace' : component.version;\n\n const methods = useConsumeMethods(consumeMethods, component, currentLane);\n return (\n <>\n {tags.length > 0 && (\n <UseBoxDropdown\n position=\"bottom-end\"\n className={classnames(styles.useBox, styles.hideOnMobile)}\n Menu={<ConsumeMethodsMenu methods={methods} componentName={component.id.name} />}\n />\n )}\n <VersionDropdown\n tags={tags}\n snaps={snaps}\n lanes={lanes}\n localVersion={localVersion}\n currentVersion={currentVersion}\n latestVersion={component.latest}\n currentLane={currentLane}\n menuClassName={styles.componentVersionMenu}\n />\n </>\n );\n}\n\nfunction useConsumeMethods(\n consumeMethods: ConsumeMethodSlot,\n componentModel: ComponentModel,\n currentLane?: LaneModel\n): ConsumeMethod[] {\n return useMemo(\n () =>\n flatten(consumeMethods.values())\n .map((method) => {\n return method?.(componentModel, { currentLane });\n })\n .filter((x) => !!x && x.Component && x.Title) as ConsumeMethod[],\n [consumeMethods, componentModel, currentLane]\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["getComponentIdStr","componentIdStr","isFunction","ComponentMenu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","useComponent","path","useComponentFilters","idFromLocation","useIdFromLocation","_componentIdStr","componentId","ComponentID","fromString","undefined","resolvedComponentIdStr","useComponentOptions","logFilters","customUseComponent","component","useComponentQuery","toString","mainMenuItems","useMemo","groupBy","flatten","values","classnames","styles","topBar","leftSide","rightSide","hideOnMobile","VersionRelatedDropdowns","consumeMethods","location","useLocation","lanesModel","useLanes","currentLane","viewedLane","id","isDefault","logs","isWorkspace","snaps","filter","log","tag","map","snap","version","hash","tags","tagLookup","Map","forEach","set","compact","toArray","reverse","get","isNew","length","lanes","getLanesByComponentId","lane","localVersion","currentVersion","search","includes","methods","useConsumeMethods","useBox","name","latest","componentVersionMenu","componentModel","method","x","Component","Title"],"sources":["menu.tsx"],"sourcesContent":["import { Routes, Route } from 'react-router-dom';\nimport { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { VersionDropdown } from '@teambit/component.ui.version-dropdown';\nimport { FullLoader } from '@teambit/ui-foundation.ui.full-loader';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { useLocation } from '@teambit/base-react.navigation.link';\nimport { flatten, groupBy, compact, isFunction } from 'lodash';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\nimport { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';\nimport { useLanes } from '@teambit/lanes.hooks.use-lanes';\nimport { LaneModel } from '@teambit/lanes.ui.models.lanes-model';\nimport { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { LegacyComponentLog } from '@teambit/legacy-component-log';\nimport type { ComponentModel } from '../component-model';\nimport { useComponent as useComponentQuery, UseComponentType } from '../use-component';\nimport { CollapsableMenuNav } from './menu-nav';\nimport styles from './menu.module.scss';\nimport { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';\nimport { useIdFromLocation } from '../use-component-from-location';\nimport { ComponentID } from '../..';\nimport { Filters } from '../use-component-query';\n\nexport type MenuProps = {\n className?: string;\n /**\n * slot for top bar menu nav items\n */\n navigationSlot: OrderedNavigationSlot;\n /**\n * right side menu item slot\n */\n widgetSlot: OrderedNavigationSlot;\n host: string;\n /**\n * main dropdown item slot\n */\n menuItemSlot: MenuItemSlot;\n\n consumeMethodSlot: ConsumeMethodSlot;\n\n componentIdStr?: string | (() => string | undefined);\n\n useComponent?: UseComponentType;\n\n path?: string;\n\n useComponentFilters?: () => Filters;\n};\nfunction getComponentIdStr(componentIdStr?: string | (() => string | undefined)): string | undefined {\n if (isFunction(componentIdStr)) return componentIdStr();\n return componentIdStr;\n}\n/**\n * top bar menu.\n */\nexport function ComponentMenu({\n navigationSlot,\n widgetSlot,\n className,\n host,\n menuItemSlot,\n consumeMethodSlot,\n componentIdStr,\n useComponent,\n path,\n useComponentFilters,\n}: MenuProps) {\n const idFromLocation = useIdFromLocation();\n const _componentIdStr = getComponentIdStr(componentIdStr);\n const componentId = _componentIdStr ? ComponentID.fromString(_componentIdStr) : undefined;\n const resolvedComponentIdStr = path || idFromLocation;\n\n const useComponentOptions = {\n logFilters: useComponentFilters?.(),\n customUseComponent: useComponent,\n };\n\n const { component } = useComponentQuery(host, componentId?.toString() || idFromLocation, useComponentOptions);\n const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);\n if (!component) return <FullLoader />;\n return (\n <Routes>\n <Route\n path={`${resolvedComponentIdStr}/*`}\n element={\n <div className={classnames(styles.topBar, className)}>\n <div className={styles.leftSide}>\n <CollapsableMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />\n </div>\n <div className={styles.rightSide}>\n <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />\n <MainDropdown className={styles.hideOnMobile} menuItems={mainMenuItems} />\n </div>\n </div>\n }\n />\n </Routes>\n );\n}\n\nfunction VersionRelatedDropdowns({\n component,\n consumeMethods,\n host,\n}: {\n component: ComponentModel;\n consumeMethods: ConsumeMethodSlot;\n host: string;\n}) {\n const location = useLocation();\n const { lanesModel } = useLanes();\n const currentLane =\n lanesModel?.viewedLane?.id && !lanesModel?.viewedLane?.id.isDefault() ? lanesModel.viewedLane : undefined;\n\n const { logs } = component;\n const isWorkspace = host === 'teambit.workspace/workspace';\n\n const snaps = useMemo(() => {\n return (logs || []).filter((log) => !log.tag).map((snap) => ({ ...snap, version: snap.hash }));\n }, [logs]);\n\n const tags = useMemo(() => {\n const tagLookup = new Map<string, LegacyComponentLog>();\n (logs || [])\n .filter((log) => log.tag)\n .forEach((tag) => {\n tagLookup.set(tag?.tag as string, tag);\n });\n return compact(\n component.tags\n ?.toArray()\n .reverse()\n .map((tag) => tagLookup.get(tag.version.version))\n ).map((tag) => ({ ...tag, version: tag.tag as string }));\n }, [logs]);\n\n const isNew = snaps.length === 0 && tags.length === 0;\n\n const lanes = lanesModel?.getLanesByComponentId(component.id)?.filter((lane) => !lane.id.isDefault()) || [];\n const localVersion = isWorkspace && !isNew && !currentLane;\n\n const currentVersion =\n isWorkspace && !isNew && !location?.search.includes('version') ? 'workspace' : component.version;\n\n const methods = useConsumeMethods(consumeMethods, component, currentLane);\n return (\n <>\n {tags.length > 0 && (\n <UseBoxDropdown\n position=\"bottom-end\"\n className={classnames(styles.useBox, styles.hideOnMobile)}\n Menu={<ConsumeMethodsMenu methods={methods} componentName={component.id.name} />}\n />\n )}\n <VersionDropdown\n tags={tags}\n snaps={snaps}\n lanes={lanes}\n localVersion={localVersion}\n currentVersion={currentVersion}\n latestVersion={component.latest}\n currentLane={currentLane}\n menuClassName={styles.componentVersionMenu}\n />\n </>\n );\n}\n\nfunction useConsumeMethods(\n consumeMethods: ConsumeMethodSlot,\n componentModel: ComponentModel,\n currentLane?: LaneModel\n): ConsumeMethod[] {\n return useMemo(\n () =>\n flatten(consumeMethods.values())\n .map((method) => {\n return method?.(componentModel, { currentLane });\n })\n .filter((x) => !!x && x.Component && x.Title) as ConsumeMethod[],\n [consumeMethods, componentModel, currentLane]\n );\n}\n"],"mappings":"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"}
package/dist/ui/menu/menu.module.scss CHANGED
@@ -34,7 +34,7 @@
34
34
  // show desktop nav on larger res
35
35
  &.desktopNav {
36
36
  display: flex;
37
- @media screen and (max-width: $br-lg) {
37
+ @media screen and (max-width: $br-md) {
38
38
  display: none;
39
39
  }
40
40
  }
@@ -54,6 +54,7 @@
54
54
  display: flex;
55
55
  align-items: center;
56
56
  height: 100%;
57
+ padding-left: 16px;
57
58
  > * {
58
59
  margin-right: 12px;
59
60
  &:last-child {
@@ -65,23 +66,6 @@
65
66
  margin-right: 8px;
66
67
  }
67
68
  }
68
- .widgets {
69
- height: 100%;
70
- margin-right: 20px;
71
- display: flex;
72
- align-items: center;
73
- > nav {
74
- > a {
75
- padding: 0;
76
- &:last-child {
77
- margin-right: 0;
78
- }
79
- }
80
- }
81
- @media screen and (max-width: $br-lg) {
82
- display: none;
83
- }
84
- }
85
69
  .widget {
86
70
  font-size: 17px;
87
71
  }
@@ -97,6 +81,7 @@
97
81
 
98
82
  .tab {
99
83
  > div {
84
+ color: var(--on-background-color, #2B2B2B);
100
85
  padding: 0;
101
86
  }
102
87
  }
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@teambit/component",
3
- "version": "0.0.923",
3
+ "version": "0.0.924",
4
4
  "homepage": "https://bit.dev/teambit/component/component",
5
5
  "main": "dist/index.js",
6
6
  "componentId": {
7
7
  "scope": "teambit.component",
8
8
  "name": "component",
9
- "version": "0.0.923"
9
+ "version": "0.0.924"
10
10
  },
11
11
  "dependencies": {
12
12
  "@teambit/any-fs": "0.0.5",
@@ -27,47 +27,47 @@
27
27
  "@teambit/documenter.ui.heading": "4.1.1",
28
28
  "@teambit/documenter.ui.separator": "4.1.1",
29
29
  "@teambit/explorer.ui.command-bar": "2.0.3",
30
- "@teambit/design.navigation.responsive-navbar": "0.0.1",
30
+ "@teambit/design.navigation.responsive-navbar": "0.0.2",
31
31
  "@teambit/base-ui.layout.breakpoints": "1.0.0",
32
32
  "@teambit/component-id": "0.0.425",
33
33
  "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.497",
34
- "@teambit/aspect-loader": "0.0.923",
35
- "@teambit/graph": "0.0.923",
34
+ "@teambit/aspect-loader": "0.0.924",
35
+ "@teambit/graph": "0.0.924",
36
36
  "@teambit/legacy-bit-id": "0.0.421",
37
37
  "@teambit/toolbox.path.match-patterns": "0.0.9",
38
38
  "@teambit/toolbox.string.capitalize": "0.0.490",
39
- "@teambit/cli": "0.0.618",
40
- "@teambit/express": "0.0.716",
41
- "@teambit/graphql": "0.0.923",
39
+ "@teambit/cli": "0.0.619",
40
+ "@teambit/express": "0.0.717",
41
+ "@teambit/graphql": "0.0.924",
42
42
  "@teambit/bit-error": "0.0.402",
43
- "@teambit/command-bar": "0.0.923",
43
+ "@teambit/command-bar": "0.0.924",
44
44
  "@teambit/component.ui.deprecation-icon": "0.0.503",
45
- "@teambit/preview": "0.0.923",
46
- "@teambit/pubsub": "0.0.923",
47
- "@teambit/react-router": "0.0.923",
45
+ "@teambit/preview": "0.0.924",
46
+ "@teambit/pubsub": "0.0.924",
47
+ "@teambit/react-router": "0.0.924",
48
48
  "@teambit/ui-foundation.ui.is-browser": "0.0.495",
49
49
  "@teambit/ui-foundation.ui.main-dropdown": "0.0.496",
50
50
  "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.499",
51
51
  "@teambit/ui-foundation.ui.use-box.menu": "0.0.129",
52
- "@teambit/ui": "0.0.923",
52
+ "@teambit/ui": "0.0.924",
53
53
  "@teambit/component-issues": "0.0.82",
54
54
  "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.500",
55
55
  "@teambit/cli-table": "0.0.41",
56
- "@teambit/component-descriptor": "0.0.188",
56
+ "@teambit/component-descriptor": "0.0.189",
57
57
  "@teambit/ui-foundation.ui.react-router.use-query": "0.0.496",
58
58
  "@teambit/design.ui.empty-box": "0.0.363",
59
59
  "@teambit/harmony.ui.aspect-box": "0.0.497",
60
60
  "@teambit/design.ui.pages.not-found": "0.0.366",
61
61
  "@teambit/design.ui.pages.server-error": "0.0.366",
62
- "@teambit/compositions": "0.0.923",
63
- "@teambit/deprecation": "0.0.923",
64
- "@teambit/envs": "0.0.923",
62
+ "@teambit/compositions": "0.0.924",
63
+ "@teambit/deprecation": "0.0.924",
64
+ "@teambit/envs": "0.0.924",
65
65
  "@teambit/legacy-component-log": "0.0.399",
66
66
  "@teambit/design.ui.styles.ellipsis": "0.0.357",
67
67
  "@teambit/envs.ui.env-icon": "0.0.495",
68
- "@teambit/component.ui.version-dropdown": "0.0.683",
69
- "@teambit/lanes.hooks.use-lanes": "0.0.81",
70
- "@teambit/lanes.ui.models.lanes-model": "0.0.43",
68
+ "@teambit/component.ui.version-dropdown": "0.0.684",
69
+ "@teambit/lanes.hooks.use-lanes": "0.0.82",
70
+ "@teambit/lanes.ui.models.lanes-model": "0.0.44",
71
71
  "@teambit/ui-foundation.ui.full-loader": "0.0.495",
72
72
  "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.129"
73
73
  },
@@ -88,7 +88,7 @@
88
88
  "peerDependencies": {
89
89
  "react-router-dom": "^6.0.0",
90
90
  "@apollo/client": "^3.6.0",
91
- "@teambit/legacy": "1.0.399",
91
+ "@teambit/legacy": "1.0.400",
92
92
  "react-dom": "^16.8.0 || ^17.0.0",
93
93
  "react": "^16.8.0 || ^17.0.0"
94
94
  },
package/ui/menu/menu-nav.tsx CHANGED
@@ -8,33 +8,29 @@ import { NavPlugin, OrderedNavigationSlot } from './nav-plugin';
8
8
 
9
9
  export type MenuNavProps = {
10
10
  navigationSlot: OrderedNavigationSlot;
11
+ widgetSlot: OrderedNavigationSlot;
11
12
  } & React.HTMLAttributes<HTMLElement>;
12
13
 
13
- export function MenuNav({ navigationSlot, className }: MenuNavProps) {
14
+ export function CollapsableMenuNav({ navigationSlot, widgetSlot, className }: MenuNavProps) {
14
15
  const plugins = useMemo(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);
16
+ const widgets = useMemo(() => widgetSlot.toArray().sort(sortFn), [widgetSlot]);
15
17
 
16
- return (
17
- <nav className={classnames(styles.navigation, styles.desktopNav, className)}>
18
- {plugins.map(([id, menuItem]) => {
19
- return <TopBarNav key={id} {...menuItem.props} />;
20
- })}
21
- </nav>
22
- );
23
- }
18
+ const links = [...plugins, ...widgets].map(([id, menuItem]) => {
19
+
20
+ // these styles keep plugins to the left and widgets to the right.
21
+ const lastPluginStyle = menuItem.props.href === plugins[-1]?.[1].props.href ? { marginRight: 'auto' } : {};
22
+ const firstWidgetStyle = menuItem.props.href === widgets[0]?.[1].props.href ? { marginLeft: 'auto' } : {};
24
23
 
25
- export function CollapsableMenuNav({ navigationSlot, className }: MenuNavProps) {
26
- const plugins = useMemo(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);
27
- const links = plugins.map(([id, menuItem]) => {
28
24
  return {
29
25
  component: function TopBarNavComponent({ isInMenu }: TabProps) {
26
+ const widgetDisplayText = (menuItem.props.displayName && isInMenu) && menuItem.props.displayName;
30
27
  return (
31
- <TopBarNav
32
- className={classnames(styles.topBarNav, isInMenu && styles.noBorder)}
33
- key={id}
34
- {...menuItem.props}
35
- />
28
+ <TopBarNav className={classnames(styles.topBarNav, isInMenu && styles.noBorder)} key={id} {...menuItem.props}>
29
+ {widgetDisplayText || menuItem.props.children}
30
+ </TopBarNav>
36
31
  );
37
32
  },
33
+ style: { ...firstWidgetStyle, ...lastPluginStyle },
38
34
  };
39
35
  });
40
36
  return (
package/ui/menu/menu.module.scss CHANGED
@@ -34,7 +34,7 @@
34
34
  // show desktop nav on larger res
35
35
  &.desktopNav {
36
36
  display: flex;
37
- @media screen and (max-width: $br-lg) {
37
+ @media screen and (max-width: $br-md) {
38
38
  display: none;
39
39
  }
40
40
  }
@@ -54,6 +54,7 @@
54
54
  display: flex;
55
55
  align-items: center;
56
56
  height: 100%;
57
+ padding-left: 16px;
57
58
  > * {
58
59
  margin-right: 12px;
59
60
  &:last-child {
@@ -65,23 +66,6 @@
65
66
  margin-right: 8px;
66
67
  }
67
68
  }
68
- .widgets {
69
- height: 100%;
70
- margin-right: 20px;
71
- display: flex;
72
- align-items: center;
73
- > nav {
74
- > a {
75
- padding: 0;
76
- &:last-child {
77
- margin-right: 0;
78
- }
79
- }
80
- }
81
- @media screen and (max-width: $br-lg) {
82
- display: none;
83
- }
84
- }
85
69
  .widget {
86
70
  font-size: 17px;
87
71
  }
@@ -97,6 +81,7 @@
97
81
 
98
82
  .tab {
99
83
  > div {
84
+ color: var(--on-background-color, #2B2B2B);
100
85
  padding: 0;
101
86
  }
102
87
  }
package/ui/menu/menu.tsx CHANGED
@@ -14,7 +14,7 @@ import { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.me
14
14
  import { LegacyComponentLog } from '@teambit/legacy-component-log';
15
15
  import type { ComponentModel } from '../component-model';
16
16
  import { useComponent as useComponentQuery, UseComponentType } from '../use-component';
17
- import { MenuNav, CollapsableMenuNav } from './menu-nav';
17
+ import { CollapsableMenuNav } from './menu-nav';
18
18
  import styles from './menu.module.scss';
19
19
  import { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';
20
20
  import { useIdFromLocation } from '../use-component-from-location';
@@ -86,13 +86,9 @@ export function ComponentMenu({
86
86
  element={
87
87
  <div className={classnames(styles.topBar, className)}>
88
88
  <div className={styles.leftSide}>
89
- <CollapsableMenuNav navigationSlot={navigationSlot} />
90
-
89
+ <CollapsableMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />
91
90
  </div>
92
91
  <div className={styles.rightSide}>
93
- <div className={styles.widgets}>
94
- <MenuNav navigationSlot={widgetSlot} />
95
- </div>
96
92
  <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />
97
93
  <MainDropdown className={styles.hideOnMobile} menuItems={mainMenuItems} />
98
94
  </div>