@redocly/theme 0.1.17 → 0.1.20

package/Footer/CustomFooter.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { NavGroupRecord } from '@theme/types/portal';
+interface FooterProps {
+    data: NavGroupRecord;
+}
+export declare function CustomFooter({ data }: FooterProps): JSX.Element | null;
+export {};

package/Footer/CustomFooter.js

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomFooter = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var CustomFooterNavItem_1 = require("../Footer/CustomFooterNavItem");
+var FooterCopyright_1 = require("../Footer/FooterCopyright");
+function CustomFooter(_a) {
+    var data = _a.data;
+    if (!data) {
+        return null;
+    }
+    return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/CustomFooter" },
+        data.links.map(function (navItem, index) {
+            return (react_1.default.createElement(CustomFooterNavItem_1.CustomFooterNavItem, { key: "".concat(navItem.label, "_").concat(index), "data-cy": navItem.label, navItem: navItem }));
+        }),
+        react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: data.copyrightText })));
+}
+exports.CustomFooter = CustomFooter;
+var FooterContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: block;\n  background-color: var(--footer-background-color);\n  text-align: center;\n  font-family: var(--font-family-base);\n\n  ", " {\n    display: block;\n  }\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: block;\n  background-color: var(--footer-background-color);\n  text-align: center;\n  font-family: var(--font-family-base);\n\n  ", " {\n    display: block;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.medium;
+});
+var templateObject_1;

package/Footer/CustomFooterNavItem.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ResolvedNavItem } from '@theme/types/portal';
+interface CustomFooterNavItemProps {
+    navItem: ResolvedNavItem;
+}
+export declare function CustomFooterNavItem({ navItem }: CustomFooterNavItemProps): JSX.Element;
+export {};

package/Footer/CustomFooterNavItem.js

@@ -0,0 +1,25 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomFooterNavItem = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Link_1 = require("../mocks/Link");
+function CustomFooterNavItem(_a) {
+    var navItem = _a.navItem;
+    var item = navItem;
+    return (react_1.default.createElement(FooterItem, { "data-component-name": "Navbar/NavbarItem" },
+        react_1.default.createElement(FooterLink, { to: item.link },
+            react_1.default.createElement(FooterLabel, null, item.label))));
+}
+exports.CustomFooterNavItem = CustomFooterNavItem;
+var FooterItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  text-align: center;\n  line-height: var(--line-height-base);\n  font-size: var(--navbar-item-font-size);\n  margin: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);\n  font-weight: var(--font-weight-regular);\n"], ["\n  display: inline-block;\n  text-align: center;\n  line-height: var(--line-height-base);\n  font-size: var(--navbar-item-font-size);\n  margin: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);\n  font-weight: var(--font-weight-regular);\n"])));
+var FooterLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: var(--footer-text-color);\n  text-decoration: none;\n"], ["\n  color: var(--footer-text-color);\n  text-decoration: none;\n"])));
+var FooterLabel = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  vertical-align: middle;\n"], ["\n  cursor: pointer;\n  vertical-align: middle;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/Footer/Footer.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
-import type { FooterConfig } from '@theme/types/portal';
-export declare function Footer({ columns, copyrightText }: FooterConfig): JSX.Element | null;
+import type { NavGroupRecord } from '@theme/types/portal';
+interface FooterProps {
+    data: NavGroupRecord;
+}
+export declare function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null;
+export {};

package/Footer/Footer.js

@@ -13,7 +13,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var FooterColumns_1 = require("../Footer/FooterColumns");
 var FooterCopyright_1 = require("../Footer/FooterCopyright");
 function Footer(_a) {
-    var columns = _a.columns, copyrightText = _a.copyrightText;
+    var _b = _a.data, columns = _b.columns, copyrightText = _b.copyrightText;
     if (!((columns === null || columns === void 0 ? void 0 : columns.length) || copyrightText)) {
         return null;
     }

package/Footer/FooterColumn.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { FooterColumn as Column } from '@theme/types/portal';
+import type { ResolvedNavItem } from '@theme/types/portal';
 interface FooterColumnProps {
-    column: Column;
+    column: ResolvedNavItem;
 }
 export declare function FooterColumn({ column }: FooterColumnProps): JSX.Element;
 export {};

package/Footer/FooterColumn.js

@@ -12,10 +12,11 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Link_1 = require("../mocks/Link");
 function FooterColumn(_a) {
+    var _b;
     var column = _a.column;
     return (react_1.default.createElement(FooterColumnContainer, { "data-component-name": "Footer/FooterColumn" },
-        react_1.default.createElement(FooterColumnTitle, null, column.group || column.label),
-        column.items.map(function (columnItem, columnItemIndex) {
+        react_1.default.createElement(FooterColumnTitle, null, column.label), (_b = column === null || column === void 0 ? void 0 : column.items) === null || _b === void 0 ? void 0 :
+        _b.map(function (columnItem, columnItemIndex) {
             if (columnItem.type === 'error') {
                 return null;
             }

package/Footer/FooterColumns.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
-import type { FooterConfig } from '@theme/types/portal';
-export declare function FooterColumns({ columns, }: {
-    columns?: FooterConfig['columns'];
-}): JSX.Element | null;
+import type { NavGroup } from '@theme/types/portal';
+interface FooterColumnsProps {
+    columns: NavGroup;
+}
+export declare function FooterColumns({ columns }: FooterColumnsProps): JSX.Element | null;
 export declare const FooterColumnsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FooterRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/Footer/FooterColumns.js

@@ -12,12 +12,12 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var FooterColumn_1 = require("../Footer/FooterColumn");
 function FooterColumns(_a) {
-    var _b = _a.columns, columns = _b === void 0 ? [] : _b;
-    if (!(columns === null || columns === void 0 ? void 0 : columns.length)) {
+    var columns = _a.columns;
+    if (typeof columns === 'string' || typeof columns === 'undefined' || !(columns === null || columns === void 0 ? void 0 : columns.length)) {
         return null;
     }
     return (react_1.default.createElement(exports.FooterColumnsContainer, { "data-component-name": "Footer/FooterColumns" },
-        react_1.default.createElement(exports.FooterRow, null, columns.map(function (column, index) { return (react_1.default.createElement(FooterColumn_1.FooterColumn, { key: index, column: column })); }))));
+        react_1.default.createElement(exports.FooterRow, null, columns.map(function (column, index) { return (react_1.default.createElement(FooterColumn_1.FooterColumn, { key: "".concat(column.label, "_").concat(index), column: column })); }))));
 }
 exports.FooterColumns = FooterColumns;
 exports.FooterColumnsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 3em 20px 1em 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  max-width: 1200px;\n  margin: 0 auto;\n\n  ", " {\n    padding: 5.625em 20px 3.9375em 20px;\n  }\n\n  ", " {\n    color: black;\n    display: none;\n  }\n"], ["\n  padding: 3em 20px 1em 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  max-width: 1200px;\n  margin: 0 auto;\n\n  ", " {\n    padding: 5.625em 20px 3.9375em 20px;\n  }\n\n  ", " {\n    color: black;\n    display: none;\n  }\n"])), function (_a) {

package/Footer/FooterCopyright.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-import type { FooterConfig } from '@theme/types/portal';
-export declare function FooterCopyright({ copyrightText, }: {
-    copyrightText?: FooterConfig['copyrightText'];
-}): JSX.Element | null;
+import type { NavGroup } from '@theme/types/portal';
+interface FooterCopyrightProps {
+    copyrightText: NavGroup;
+}
+export declare function FooterCopyright({ copyrightText }: FooterCopyrightProps): JSX.Element | null;
+export {};

package/Navbar/Navbar.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { ResolvedConfigLinks } from '@theme/types/portal';
 interface NavbarProps {
-    menu: React.ReactNode;
+    menu: ResolvedConfigLinks;
     logo: React.ReactNode;
     search: React.ReactNode;
 }

package/Navbar/Navbar.js

@@ -10,11 +10,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavbarContainer = exports.Navbar = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var Navbar_1 = require("../Navbar");
 function Navbar(_a) {
     var menu = _a.menu, logo = _a.logo, search = _a.search;
     return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar" },
         logo,
-        menu,
+        react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
         search));
 }
 exports.Navbar = Navbar;

package/Navbar/NavbarDropdown.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ResolvedNavLinkItem } from '@theme/types/portal';
+interface NavbarDropdownProps {
+    items: ResolvedNavLinkItem[];
+}
+export declare function NavbarDropdown({ items }: NavbarDropdownProps): JSX.Element;
+export declare const DropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/Navbar/NavbarDropdown.js

@@ -0,0 +1,21 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownWrapper = exports.NavbarDropdown = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Link_1 = require("../mocks/Link");
+function NavbarDropdown(_a) {
+    var items = _a.items;
+    return (react_1.default.createElement(exports.DropdownWrapper, { "data-component-name": "Navbar/NavbarDropdown" }, items.map(function (item, index) { return (react_1.default.createElement("div", { key: "".concat(item.label, "_").concat(index) },
+        react_1.default.createElement(Link_1.Link, { to: item.link }, item.label))); })));
+}
+exports.NavbarDropdown = NavbarDropdown;
+exports.DropdownWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  position: absolute;\n  background: var(--navbar-item-active-background-color);\n  border-radius: var(--navbar-item-border-radius);\n  padding: 10px 15px;\n  width: max-content;\n  line-height: 1rem;\n  box-shadow: var(--navbar-dropdown-shadow);\n  & > div {\n    text-align: left;\n    padding: 10px 0px;\n    cursor: pointer;\n    a {\n      color: var(--navbar-text-color);\n      text-decoration: none;\n    }\n    :hover {\n      text-decoration: underline;\n    }\n  }\n"], ["\n  display: none;\n  position: absolute;\n  background: var(--navbar-item-active-background-color);\n  border-radius: var(--navbar-item-border-radius);\n  padding: 10px 15px;\n  width: max-content;\n  line-height: 1rem;\n  box-shadow: var(--navbar-dropdown-shadow);\n  & > div {\n    text-align: left;\n    padding: 10px 0px;\n    cursor: pointer;\n    a {\n      color: var(--navbar-text-color);\n      text-decoration: none;\n    }\n    :hover {\n      text-decoration: underline;\n    }\n  }\n"])));
+var templateObject_1;

package/Navbar/NavbarItem.d.ts

@@ -1,40 +1,7 @@
 /// <reference types="react" />
-export declare enum MenuStyle {
-    Drilldown = "drilldown"
-}
-export declare type ResolvedNavLinkItem = {
-    type: 'link';
-    link: string;
-    label: string;
-    items?: ResolvedNavItem[];
-    external?: boolean;
-    version?: string;
-    default?: string;
-    httpVerb?: string;
-    separatorLine?: boolean;
-    active?: boolean;
-};
-export declare type ResolvedNavGroupItem = {
-    type: 'group';
-    link?: string;
-    label: string;
-    items: ResolvedNavItem[];
-    version?: string;
-    default?: string;
-    menuStyle?: MenuStyle;
-    separatorLine?: boolean;
-    active?: boolean;
-};
-export declare type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem | {
-    type: 'separator';
-    label?: string;
-    separatorLine?: boolean;
-} | {
-    type: 'error';
-    label: string;
-};
+import type { ResolvedNavItem } from '@theme/types/portal';
 interface NavbarItemProps {
-    navItem: ResolvedNavLinkItem;
+    navItem: ResolvedNavItem;
 }
-export declare function NavbarItem({ navItem }: NavbarItemProps): JSX.Element;
+export declare function NavbarItem({ navItem }: NavbarItemProps): JSX.Element | null;
 export {};

package/Navbar/NavbarItem.js

@@ -7,35 +7,44 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavbarItem = exports.MenuStyle = void 0;
+exports.NavbarItem = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var react_router_dom_1 = require("react-router-dom");
 var Link_1 = require("../mocks/Link");
 var utils_1 = require("../mocks/utils");
-var MenuStyle;
-(function (MenuStyle) {
-    MenuStyle["Drilldown"] = "drilldown";
-})(MenuStyle = exports.MenuStyle || (exports.MenuStyle = {}));
+var NavbarDropdown_1 = require("../Navbar/NavbarDropdown");
 function NavbarItem(_a) {
     var navItem = _a.navItem;
     var pathname = (0, react_router_dom_1.useLocation)().pathname;
-    var isActive = pathname === (0, utils_1.withPathPrefix)(navItem.link);
-    return (react_1.default.createElement(NavMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem" },
-        react_1.default.createElement(NavLink, { to: navItem.link, active: isActive },
-            react_1.default.createElement(NavLabel, null, navItem.label))));
+    if (navItem.link) {
+        var item = navItem;
+        var isActive = pathname === (0, utils_1.withPathPrefix)(item.link);
+        return (react_1.default.createElement(NavMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem" },
+            react_1.default.createElement(NavLink, { to: item.link, active: isActive },
+                react_1.default.createElement(NavLabel, null, item.label))));
+    }
+    if (navItem.items) {
+        var item = navItem;
+        return (react_1.default.createElement(NavMenuItemWithDropdownWrapper, null,
+            react_1.default.createElement(NavMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem" },
+                react_1.default.createElement(NavLabel, null, item.label)),
+            react_1.default.createElement(NavbarDropdown_1.NavbarDropdown, { items: item.items })));
+    }
+    return null;
 }
 exports.NavbarItem = NavbarItem;
-var NavMenuItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-spacing-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"], ["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-spacing-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"])), function (_a) {
+var NavMenuItemWithDropdownWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n  border-radius: var(--navbar-item-border-radius);\n  &:hover {\n    background: var(--navbar-item-active-background-color);\n    ", " {\n      display: block;\n    }\n  }\n"], ["\n  display: inline-block;\n  position: relative;\n  border-radius: var(--navbar-item-border-radius);\n  &:hover {\n    background: var(--navbar-item-active-background-color);\n    ", " {\n      display: block;\n    }\n  }\n"])), NavbarDropdown_1.DropdownWrapper);
+var NavMenuItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-spacing-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"], ["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-spacing-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"])), function (_a) {
     var active = _a.active;
     return (active ? 'var(--navbar-item-active-background-color)' : 'none');
 });
-var NavLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  text-decoration: ", ";\n"], ["\n  color: ", ";\n  text-decoration: ", ";\n"])), function (_a) {
+var NavLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  text-decoration: ", ";\n"], ["\n  color: ", ";\n  text-decoration: ", ";\n"])), function (_a) {
     var active = _a.active;
     return active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)';
 }, function (_a) {
     var active = _a.active;
     return active ? 'var(--navbar-item-active-text-decoration)' : 'none';
 });
-var NavLabel = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  vertical-align: middle;\n"], ["\n  cursor: pointer;\n  vertical-align: middle;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+var NavLabel = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  vertical-align: middle;\n"], ["\n  cursor: pointer;\n  vertical-align: middle;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Navbar/NavbarMenu.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { ResolvedConfigLinks } from '@theme/types/portal';
 export declare function NavbarMenu({ menuItems }: {
-    menuItems: any[];
+    menuItems: ResolvedConfigLinks;
 }): JSX.Element | null;

package/Navbar/NavbarMenu.js

@@ -17,7 +17,7 @@ function NavbarMenu(_a) {
         return null;
     }
     return (react_1.default.createElement(NavItemsContainer, { "data-component-name": "Navbar/NavbarMenu" }, menuItems.map(function (navItem, index) {
-        return react_1.default.createElement(NavbarItem_1.NavbarItem, { key: index, "data-cy": navItem.label, navItem: navItem });
+        return (react_1.default.createElement(NavbarItem_1.NavbarItem, { key: "".concat(navItem.label, "_").concat(index), "data-cy": navItem.label, navItem: navItem }));
     })));
 }
 exports.NavbarMenu = NavbarMenu;

package/globalStyle.js

@@ -22,7 +22,7 @@ var links = (0, styled_components_1.css)(templateObject_13 || (templateObject_13
 var openapiAndGraphqlDocs = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  /* === ref docs and graphql docs specific === */\n\n  /**\n    * @tokens OpenAPI-GraphQL Logo\n    */\n  --logo-max-height: 285px;\n  --logo-max-width: 285px;\n  --logo-padding: 2px;\n\n  /**\n    * @tokens OpenAPI-GraphQL Layout\n    */\n  --layout-buttons-top-offset: 20px; // @presenter Spacing\n  --layout-buttons-height: 36px; // @presenter Spacing\n  --layout-buttons-width: 36px; // @presenter Spacing\n\n  --layout-stacked-small-max-width: 90%;\n  --layout-stacked-medium-max-width: 75%;\n  --layout-stacked-large-max-width: 1200px;\n\n  --layout-three-panel-small-max-width: 100%;\n  --layout-three-panel-medium-max-width: 100%;\n  --layout-three-panel-large-max-width: 1800px;\n\n  --layout-middle-panel-small-max-width: none;\n  --layout-middle-panel-medium-max-width: none;\n  --layout-middle-panel-large-max-width: none;\n\n  /**\n    * @tokens OpenAPI-GraphQL Schema\n    */\n  --schema-lines-color: var(--global-border-color); // @presenter Color\n  --schema-default-details-width: 70%;\n  --schema-type-name-color: var(--color-content-secondary); // @presenter Color\n  --schema-type-title-color: var(--color-content-secondary); // @presenter Color\n  --schema-require-label-color: var(--color-error-900); // @presenter Color\n  --schema-labels-text-size: 0.9em; // @presenter Spacing\n  --schema-nesting-spacing: 1em; // @presenter Spacing\n  --schema-nested-background-color: var(--color-secondary-200); // @presenter Color\n  --schema-chevron-color: var(--color-content); // @presenter Color\n  --schema-chevron-size: 9px; // @presenter Spacing\n\n  --schema-controls-color: var(--color-emphasis-800); // @presenter Color\n  --schema-controls-background-color: var(--color-secondary-400); // @presenter Color\n  --schema-controls-hover-background-color: var(--color-secondary-500); // @presenter Color\n  --schema-controls-border-color: var(--color-secondary-600); // @presenter Color\n\n  --field-name-font-size: var(--code-font-size); // @presenter FontSize\n  --field-name-font-family: var(--code-font-family); // @presenter FontFamily\n  --field-example-color: var(--color-content); // @presenter Color\n  --field-example-background-color: var(--inline-code-background-color); // @presenter Color\n  --field-constraint-color: var(--color-content); // @presenter Color\n  --field-constraint-background-color: var(--inline-code-background-color); // @presenter Color\n\n  /**\n    * @tokens OpenAPI-GraphQL Search\n    * @presenter Color\n    */\n  --search-input-border-bottom: #e6e6e6;\n  --search-results-background-color: #f2f2f2;\n  --search-results-active-item-background-color: #e6e6e6;\n  --search-marked-background-color: #ffff03;\n  --search-popup-header-background-color: var(--color-secondary-200);\n  --search-clear-button-background-color: var(--color-secondary-400);\n  --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n  /*\n    * @tokens OpenAPI-GraphQL Badge\n    */\n  --badge-color: var(--color-emphasis-100); // @presenter Color\n  --badge-background-color: var(--color-primary-500); // @presenter Color\n  --deprecated-badge-color: var(--color-emphasis-100); // @presenter Color\n  --deprecated-badge-background-color: var(--color-warning-500); // @presenter Color\n\n  --http-badge-font-size: 12px; // @presenter FontSize\n  --http-badge-line-height: 20px; // @presenter LineHeight\n  --http-badge-font-family: var(--code-font-family); // @presenter FontFamily\n  --http-badge-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --http-badge-border-radius: 16px; // @presenter BorderRadius\n  --http-badge-color: var(--color-content-inverse); // @presenter Color\n\n  --http-badge-menu-font-size: 8px; // @presenter FontSize\n  --http-badge-menu-line-height: 14px; // @presenter FontSize\n\n  /**\n    * @tokens OpenAPI-GraphQL Other\n    */\n  --recursive-label-color: var(--color-warning-500); // @presenter Color\n  --spinner-color: var(--color-primary-500); // @presenter Color\n  --linear-progress-color: var(--color-accent-500); // @presenter Color\n  --linear-progress-background-color: var(--color-accent-100); // @presenter Color\n\n  /* Floating action button */\n  --fab-color: #0065fb; // @presenter Color\n  --fab-background-color: #f2f2f2; // @presenter Color\n\n  // @tokens End\n"], ["\n  /* === ref docs and graphql docs specific === */\n\n  /**\n    * @tokens OpenAPI-GraphQL Logo\n    */\n  --logo-max-height: 285px;\n  --logo-max-width: 285px;\n  --logo-padding: 2px;\n\n  /**\n    * @tokens OpenAPI-GraphQL Layout\n    */\n  --layout-buttons-top-offset: 20px; // @presenter Spacing\n  --layout-buttons-height: 36px; // @presenter Spacing\n  --layout-buttons-width: 36px; // @presenter Spacing\n\n  --layout-stacked-small-max-width: 90%;\n  --layout-stacked-medium-max-width: 75%;\n  --layout-stacked-large-max-width: 1200px;\n\n  --layout-three-panel-small-max-width: 100%;\n  --layout-three-panel-medium-max-width: 100%;\n  --layout-three-panel-large-max-width: 1800px;\n\n  --layout-middle-panel-small-max-width: none;\n  --layout-middle-panel-medium-max-width: none;\n  --layout-middle-panel-large-max-width: none;\n\n  /**\n    * @tokens OpenAPI-GraphQL Schema\n    */\n  --schema-lines-color: var(--global-border-color); // @presenter Color\n  --schema-default-details-width: 70%;\n  --schema-type-name-color: var(--color-content-secondary); // @presenter Color\n  --schema-type-title-color: var(--color-content-secondary); // @presenter Color\n  --schema-require-label-color: var(--color-error-900); // @presenter Color\n  --schema-labels-text-size: 0.9em; // @presenter Spacing\n  --schema-nesting-spacing: 1em; // @presenter Spacing\n  --schema-nested-background-color: var(--color-secondary-200); // @presenter Color\n  --schema-chevron-color: var(--color-content); // @presenter Color\n  --schema-chevron-size: 9px; // @presenter Spacing\n\n  --schema-controls-color: var(--color-emphasis-800); // @presenter Color\n  --schema-controls-background-color: var(--color-secondary-400); // @presenter Color\n  --schema-controls-hover-background-color: var(--color-secondary-500); // @presenter Color\n  --schema-controls-border-color: var(--color-secondary-600); // @presenter Color\n\n  --field-name-font-size: var(--code-font-size); // @presenter FontSize\n  --field-name-font-family: var(--code-font-family); // @presenter FontFamily\n  --field-example-color: var(--color-content); // @presenter Color\n  --field-example-background-color: var(--inline-code-background-color); // @presenter Color\n  --field-constraint-color: var(--color-content); // @presenter Color\n  --field-constraint-background-color: var(--inline-code-background-color); // @presenter Color\n\n  /**\n    * @tokens OpenAPI-GraphQL Search\n    * @presenter Color\n    */\n  --search-input-border-bottom: #e6e6e6;\n  --search-results-background-color: #f2f2f2;\n  --search-results-active-item-background-color: #e6e6e6;\n  --search-marked-background-color: #ffff03;\n  --search-popup-header-background-color: var(--color-secondary-200);\n  --search-clear-button-background-color: var(--color-secondary-400);\n  --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n  /*\n    * @tokens OpenAPI-GraphQL Badge\n    */\n  --badge-color: var(--color-emphasis-100); // @presenter Color\n  --badge-background-color: var(--color-primary-500); // @presenter Color\n  --deprecated-badge-color: var(--color-emphasis-100); // @presenter Color\n  --deprecated-badge-background-color: var(--color-warning-500); // @presenter Color\n\n  --http-badge-font-size: 12px; // @presenter FontSize\n  --http-badge-line-height: 20px; // @presenter LineHeight\n  --http-badge-font-family: var(--code-font-family); // @presenter FontFamily\n  --http-badge-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --http-badge-border-radius: 16px; // @presenter BorderRadius\n  --http-badge-color: var(--color-content-inverse); // @presenter Color\n\n  --http-badge-menu-font-size: 8px; // @presenter FontSize\n  --http-badge-menu-line-height: 14px; // @presenter FontSize\n\n  /**\n    * @tokens OpenAPI-GraphQL Other\n    */\n  --recursive-label-color: var(--color-warning-500); // @presenter Color\n  --spinner-color: var(--color-primary-500); // @presenter Color\n  --linear-progress-color: var(--color-accent-500); // @presenter Color\n  --linear-progress-background-color: var(--color-accent-100); // @presenter Color\n\n  /* Floating action button */\n  --fab-color: #0065fb; // @presenter Color\n  --fab-background-color: #f2f2f2; // @presenter Color\n\n  // @tokens End\n"])));
 var footer = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  /**\n    * @tokens Footer\n    */\n  --footer-background-color: var(--color-primary-500); // @presenter Color\n  --footer-text-color: #fff; // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Footer\n    */\n  --footer-background-color: var(--color-primary-500); // @presenter Color\n  --footer-text-color: #fff; // @presenter Color\n\n  // @tokens End\n"])));
 var logo = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  /**\n    * @tokens Logo\n    */\n  --logo-height: 2rem; // @presenter Spacing\n  --logo-margin: var(--sidebar-margin-left); // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Logo\n    */\n  --logo-height: 2rem; // @presenter Spacing\n  --logo-margin: var(--sidebar-margin-left); // @presenter Spacing\n\n  // @tokens End\n"])));
-var navbar = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  /**\n    * @tokens Navbar\n    */\n  --navbar-height: 60px; // @presenter Spacing\n  --navbar-text-color: #fff; // @presenter Color\n  --navbar-background-color: var(--color-primary-500); // @presenter Color\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-margin-horizontal: 0; // @presenter Spacing\n  --navbar-item-margin-vertical: 0; // @presenter Spacing\n  --navbar-item-border-radius: 10px; // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-active-background-color: #1b75fa; // @presenter Color\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Navbar\n    */\n  --navbar-height: 60px; // @presenter Spacing\n  --navbar-text-color: #fff; // @presenter Color\n  --navbar-background-color: var(--color-primary-500); // @presenter Color\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-margin-horizontal: 0; // @presenter Spacing\n  --navbar-item-margin-vertical: 0; // @presenter Spacing\n  --navbar-item-border-radius: 10px; // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-active-background-color: #1b75fa; // @presenter Color\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n\n  // @tokens End\n"])));
+var navbar = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  /**\n    * @tokens Navbar\n    */\n  --navbar-height: 60px; // @presenter Spacing\n  --navbar-text-color: #fff; // @presenter Color\n  --navbar-background-color: var(--color-primary-500); // @presenter Color\n  --navbar-drowpdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5);\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-margin-horizontal: 0; // @presenter Spacing\n  --navbar-item-margin-vertical: 0; // @presenter Spacing\n  --navbar-item-border-radius: 10px; // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-active-background-color: #1b75fa; // @presenter Color\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Navbar\n    */\n  --navbar-height: 60px; // @presenter Spacing\n  --navbar-text-color: #fff; // @presenter Color\n  --navbar-background-color: var(--color-primary-500); // @presenter Color\n  --navbar-drowpdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5);\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-margin-horizontal: 0; // @presenter Spacing\n  --navbar-item-margin-vertical: 0; // @presenter Spacing\n  --navbar-item-border-radius: 10px; // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-active-background-color: #1b75fa; // @presenter Color\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n\n  // @tokens End\n"])));
 var toc = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  /**\n    * @tokens TOC\n    * */\n  --toc-width: 240px;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens TOC\n    * */\n  --toc-width: 240px;\n\n  // @tokens End\n"])));
 var markdown = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  /**\n    * @tokens Markdown\n    * */\n  --content-wrapper-max-width: 910px;\n  --content-wrapper-padding-vertical: 25px; // @presenter Spacing\n  --content-wrapper-padding-horizontal: 0px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Markdown\n    * */\n  --content-wrapper-max-width: 910px;\n  --content-wrapper-padding-vertical: 25px; // @presenter Spacing\n  --content-wrapper-padding-horizontal: 0px; // @presenter Spacing\n\n  // @tokens End\n"])));
 var blockquote = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  /**\n    * @tokens Blockquote\n    * */\n  // TODO: fix typo\n  --bloquote-margin-vertical: 1.5em; // @presenter Spacing\n  --bloquote-margin-horizontal: 0; // @presenter Spacing\n  --bloquote-padding-vertical: 0; // @presenter Spacing\n  --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --bloquote-background-color: transparent; // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Blockquote\n    * */\n  // TODO: fix typo\n  --bloquote-margin-vertical: 1.5em; // @presenter Spacing\n  --bloquote-margin-horizontal: 0; // @presenter Spacing\n  --bloquote-padding-vertical: 0; // @presenter Spacing\n  --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --bloquote-background-color: transparent; // @presenter Color\n\n  // @tokens End\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.17",
+  "version": "0.1.20",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Footer/CustomFooter.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { CustomFooterNavItem } from '@theme/Footer/CustomFooterNavItem';
+import { FooterCopyright } from '@theme/Footer/FooterCopyright';
+import { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
+
+interface FooterProps {
+  data: NavGroupRecord;
+}
+
+export function CustomFooter({ data }: FooterProps): JSX.Element | null {
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <FooterContainer data-component-name="Footer/CustomFooter">
+      {(data.links as ResolvedNavItem[]).map((navItem, index) => {
+        return (
+          <CustomFooterNavItem
+            key={`${navItem.label}_${index}`}
+            data-cy={navItem.label}
+            navItem={navItem}
+          />
+        );
+      })}
+      <FooterCopyright copyrightText={data.copyrightText} />
+    </FooterContainer>
+  );
+}
+
+const FooterContainer = styled.div`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+  background-color: var(--footer-background-color);
+  text-align: center;
+  font-family: var(--font-family-base);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+`;

package/src/Footer/CustomFooterNavItem.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import type { ResolvedNavItem, ResolvedNavLinkItem } from '@theme/types/portal';
+
+interface CustomFooterNavItemProps {
+  navItem: ResolvedNavItem;
+}
+
+export function CustomFooterNavItem({ navItem }: CustomFooterNavItemProps): JSX.Element {
+  const item = navItem as ResolvedNavLinkItem;
+
+  return (
+    <FooterItem data-component-name="Navbar/NavbarItem">
+      <FooterLink to={item.link}>
+        <FooterLabel>{item.label}</FooterLabel>
+      </FooterLink>
+    </FooterItem>
+  );
+}
+
+const FooterItem = styled.li`
+  display: inline-block;
+  text-align: center;
+  line-height: var(--line-height-base);
+  font-size: var(--navbar-item-font-size);
+  margin: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
+  font-weight: var(--font-weight-regular);
+`;
+
+const FooterLink = styled(Link)`
+  color: var(--footer-text-color);
+  text-decoration: none;
+`;
+
+const FooterLabel = styled.span`
+  cursor: pointer;
+  vertical-align: middle;
+`;

package/src/Footer/Footer.tsx

@@ -3,9 +3,13 @@ import styled from 'styled-components';
 
 import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
-import type { FooterConfig } from '@theme/types/portal';
+import type { NavGroupRecord } from '@theme/types/portal';
 
-export function Footer({ columns, copyrightText }: FooterConfig): JSX.Element | null {
+interface FooterProps {
+  data: NavGroupRecord;
+}
+
+export function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null {
   if (!(columns?.length || copyrightText)) {
     return null;
   }

package/src/Footer/FooterColumn.tsx

@@ -2,17 +2,17 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
-import type { FooterColumn as Column } from '@theme/types/portal';
+import type { ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterColumnProps {
-  column: Column;
+  column: ResolvedNavItem;
 }
 
 export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
   return (
     <FooterColumnContainer data-component-name="Footer/FooterColumn">
-      <FooterColumnTitle>{column.group || column.label}</FooterColumnTitle>
-      {column.items.map((columnItem, columnItemIndex) => {
+      <FooterColumnTitle>{column.label}</FooterColumnTitle>
+      {column?.items?.map((columnItem, columnItemIndex) => {
         if (columnItem.type === 'error') {
           return null;
         }

package/src/Footer/FooterColumns.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { FooterColumn } from '@theme/Footer/FooterColumn';
-import type { FooterConfig } from '@theme/types/portal';
-
-export function FooterColumns({
-  columns = [],
-}: {
-  columns?: FooterConfig['columns'];
-}): JSX.Element | null {
-  if (!columns?.length) {
+import type { NavGroup } from '@theme/types/portal';
+
+interface FooterColumnsProps {
+  columns: NavGroup;
+}
+
+export function FooterColumns({ columns }: FooterColumnsProps): JSX.Element | null {
+  if (typeof columns === 'string' || typeof columns === 'undefined' || !columns?.length) {
     return null;
   }
 
@@ -17,7 +17,7 @@ export function FooterColumns({
     <FooterColumnsContainer data-component-name="Footer/FooterColumns">
       <FooterRow>
         {columns.map((column, index) => (
-          <FooterColumn key={index} column={column} />
+          <FooterColumn key={`${column.label}_${index}`} column={column} />
         ))}
       </FooterRow>
     </FooterColumnsContainer>

package/src/Footer/FooterCopyright.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { FooterConfig } from '@theme/types/portal';
+import type { NavGroup } from '@theme/types/portal';
 
-export function FooterCopyright({
-  copyrightText = '',
-}: {
-  copyrightText?: FooterConfig['copyrightText'];
-}): JSX.Element | null {
+interface FooterCopyrightProps {
+  copyrightText: NavGroup;
+}
+
+export function FooterCopyright({ copyrightText = '' }: FooterCopyrightProps): JSX.Element | null {
   return copyrightText ? (
     <Wrapper data-component-name="Footer/FooterCopyright">{copyrightText}</Wrapper>
   ) : null;

package/src/Navbar/Navbar.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { ResolvedConfigLinks } from '@theme/types/portal';
+import { NavbarMenu } from '@theme/Navbar';
+
 interface NavbarProps {
-  menu: React.ReactNode;
+  menu: ResolvedConfigLinks;
   logo: React.ReactNode;
   search: React.ReactNode;
 }
@@ -11,7 +14,7 @@ export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element {
   return (
     <NavbarContainer data-component-name="Navbar/Navbar">
       {logo}
-      {menu}
+      <NavbarMenu menuItems={menu} />
       {search}
     </NavbarContainer>
   );