@redocly/theme 0.9.10 → 0.9.11

package/lib/Profile/Profile.js

@@ -52,7 +52,13 @@ const ProfileWrapper = styled_components_1.default.div.attrs(() => ({
   padding: 0 var(--navbar-item-padding-horizontal);
 `;
 const StyledUserName = styled_components_1.default.span `
-  color: ${({ color }) => color || 'var(--navbar-text-color)'};
+  font-family: var(--profile-name-font-family);
+  font-size: var(--profile-name-font-size);
+  font-weight: var(--profile-name-font-weight);
+  color: var(--profile-name-text-color);
+  padding: var(--profile-name-padding-vertical) var(--profile-name-padding-horizontal);
+  margin: 0 var(--profile-name-margin-horizontal);
+
   display: none;
 
   ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.medium; }} {
@@ -60,19 +66,23 @@ const StyledUserName = styled_components_1.default.span `
   }
 `;
 const AvatarWrapper = styled_components_1.default.div `
-  width: 40px;
-  height: 40px;
+  width: var(--profile-avatar-width);
+  height: var(--profile-avatar-height);
   display: flex;
   overflow: hidden;
   position: relative;
-  font-size: 1.25rem;
   align-items: center;
   flex-shrink: 0;
-  line-height: 1;
-  user-select: none;
-  border-radius: 50%;
   justify-content: center;
-  margin-left: 16px;
+  user-select: none;
+
+  font-family: var(--profile-avatar-font-family);
+  font-size: var(--profile-avatar-font-size);
+  line-height: var(--profile-avatar-line-height);
+  font-weight: var(--profile-avatar-font-weight);
+
+  border-radius: var(--profile-avatar-border-radius);
+  margin-left: var(--profile-avatar-margin-left);
 
   ${({ background }) => (0, styled_components_1.css) `
     background-color: ${background};

package/lib/Profile/UserProfile.d.ts

@@ -6,7 +6,7 @@ export interface UserProfileProps {
         picture: string;
         logoutDisabled?: boolean;
     };
-    handleLogout: (logoutRedirect?: string) => void;
+    handleLogout: () => void;
     hasDeveloperOnboarding?: boolean;
 }
 export declare function UserProfile({ userInfo, handleLogout, hasDeveloperOnboarding, }: UserProfileProps): JSX.Element;

package/lib/Profile/UserProfile.js

@@ -29,18 +29,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserProfile = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Link_1 = require("../mocks/Link");
 const Profile_1 = require("../Profile/Profile");
 const Tooltip_1 = require("../Tooltip/Tooltip");
-const useThemeConfig_1 = require("../hooks/useThemeConfig");
+const UserProfileMenu_1 = require("./UserProfileMenu");
 function UserProfile({ userInfo, handleLogout, hasDeveloperOnboarding = false, }) {
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
-    const { userProfile: userProfileSettings } = (0, useThemeConfig_1.useThemeConfig)();
-    const logoutRedirect = (userProfileSettings === null || userProfileSettings === void 0 ? void 0 : userProfileSettings.logoutRedirect) || '/';
-    return (react_1.default.createElement(StyledTooltip, { isOpen: isOpened, withArrow: false, className: "copy-button", placement: "bottom", width: "100%", tip: react_1.default.createElement(StyledUl, { onClick: () => setIsOpened(false) },
-            hasDeveloperOnboarding ? (react_1.default.createElement(Link_1.Link, { to: "/apps" },
-                react_1.default.createElement(StyledLi, null, "My Apps"))) : null,
-            react_1.default.createElement(StyledLi, { onClick: () => handleLogout(logoutRedirect) }, (userProfileSettings === null || userProfileSettings === void 0 ? void 0 : userProfileSettings.logoutLabel) || 'Log out')) },
+    return (react_1.default.createElement(StyledTooltip, { isOpen: isOpened, withArrow: false, className: "copy-button", placement: "bottom", width: "100%", tip: react_1.default.createElement(UserProfileMenu_1.UserProfileMenu, { hasDeveloperOnboarding: hasDeveloperOnboarding, handleLogout: handleLogout, setIsOpened: setIsOpened }) },
         react_1.default.createElement(Profile_1.Profile, { name: userInfo.name, imageUrl: userInfo.picture, onClick: userInfo.logoutDisabled ? undefined : () => setIsOpened(!isOpened) })));
 }
 exports.UserProfile = UserProfile;
@@ -49,32 +43,4 @@ const StyledTooltip = (0, styled_components_1.default)(Tooltip_1.Tooltip) `
     padding: 0;
   }
 `;
-const StyledUl = styled_components_1.default.ul `
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  text-align: left;
-  background-color: var(--search-modal-background);
-  color: var(--search-modal-text-color);
-  min-width: 100px;
-  a {
-    text-decoration: none;
-    &:hover {
-      color: inherit;
-    }
-    &:visited {
-      color: inherit;
-    }
-  }
-`;
-const StyledLi = styled_components_1.default.li `
-  cursor: pointer;
-  font-size: 16px;
-  list-style: none;
-  padding: 15px 20px;
-  transition: background-color 0.25s ease 0s;
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-`;
 //# sourceMappingURL=UserProfile.js.map

package/lib/Profile/UserProfileMenu.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface UserProfileMenuProps {
+    setIsOpened: (isOpen: boolean) => void;
+    handleLogout: () => void;
+    hasDeveloperOnboarding: boolean;
+}
+export declare function UserProfileMenu({ hasDeveloperOnboarding, setIsOpened, handleLogout, }: UserProfileMenuProps): JSX.Element;
+export {};

package/lib/Profile/UserProfileMenu.js

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserProfileMenu = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const Link_1 = require("../mocks/Link");
+const hooks_1 = require("../hooks");
+function UserProfileMenu({ hasDeveloperOnboarding, setIsOpened, handleLogout, }) {
+    var _a;
+    const { userProfile } = (0, hooks_1.useThemeConfig)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StyledUl, { onClick: () => setIsOpened(false) },
+            hasDeveloperOnboarding ? (react_1.default.createElement(Link_1.Link, { to: "/apps" },
+                react_1.default.createElement(StyledLi, null, "My Apps"))) : null, (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.menu) === null || _a === void 0 ? void 0 :
+            _a.map((item) => (react_1.default.createElement(Link_1.Link, { external: item.external, key: item.label, to: item.link || '' },
+                react_1.default.createElement(StyledLi, { separatorLine: item === null || item === void 0 ? void 0 : item.separatorLine }, item.label)))),
+            react_1.default.createElement(StyledLi, { onClick: () => handleLogout() }, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out'))));
+}
+exports.UserProfileMenu = UserProfileMenu;
+const StyledUl = styled_components_1.default.ul `
+  margin: var(--profile-menu-margin);
+  padding: var(--profile-menu-padding);
+  list-style: none;
+  background-color: var(--profile-menu-background-color);
+  min-width: 100px;
+  a {
+    text-decoration: none;
+  }
+`;
+const StyledLi = styled_components_1.default.li `
+  cursor: pointer;
+  font-size: var(--profile-menu-item-font-size);
+  font-family: var(--profile-menu-item-font-family);
+  font-weight: var(--profile-menu-item-font-weight);
+  line-height: var(--profile-menu-item-line-height);
+  color: var(--profile-menu-item-text-color);
+  text-align: var(--profile-menu-item-text-align);
+
+  list-style: none;
+
+  padding: var(--profile-menu-item-padding-vertical) var(--profile-menu-item-padding-horizontal);
+
+  transition: background-color 0.25s ease 0s;
+
+  &:hover {
+    color: var(--profile-menu-item-hover-text-color);
+    background-color: var(--profile-menu-item-hover-background-color);
+    text-decoration: var(--profile-menu-item-hover-text-decoration);
+  }
+  &:active {
+    color: var(--profile-menu-item-active-text-color);
+    background-color: var(--profile-menu-item-active-background-color);
+    text-decoration: var(--profile-menu-item-active-text-decoration);
+  }
+
+  ${({ separatorLine }) => separatorLine &&
+    (0, styled_components_1.css) `
+      border-bottom: 1px solid var(--profile-menu-item-separator-line-color);
+    `}
+`;
+//# sourceMappingURL=UserProfileMenu.js.map

package/lib/config.d.ts

@@ -648,17 +648,17 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     userProfile: z.ZodDefault<z.ZodOptional<z.ZodObject<{
         loginLabel: z.ZodOptional<z.ZodDefault<z.ZodString>>;
         logoutLabel: z.ZodOptional<z.ZodDefault<z.ZodString>>;
-        logoutRedirect: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+        menu: z.ZodOptional<z.ZodArray<z.ZodAny, "many">>;
         hide: z.ZodOptional<z.ZodBoolean>;
     }, "strip", z.ZodTypeAny, {
         loginLabel?: string | undefined;
         logoutLabel?: string | undefined;
-        logoutRedirect?: string | undefined;
+        menu?: any[] | undefined;
         hide?: boolean | undefined;
     }, {
         loginLabel?: string | undefined;
         logoutLabel?: string | undefined;
-        logoutRedirect?: string | undefined;
+        menu?: any[] | undefined;
         hide?: boolean | undefined;
     }>>>;
 }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
@@ -1229,17 +1229,17 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     userProfile: z.ZodDefault<z.ZodOptional<z.ZodObject<{
         loginLabel: z.ZodOptional<z.ZodDefault<z.ZodString>>;
         logoutLabel: z.ZodOptional<z.ZodDefault<z.ZodString>>;
-        logoutRedirect: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+        menu: z.ZodOptional<z.ZodArray<z.ZodAny, "many">>;
         hide: z.ZodOptional<z.ZodBoolean>;
     }, "strip", z.ZodTypeAny, {
         loginLabel?: string | undefined;
         logoutLabel?: string | undefined;
-        logoutRedirect?: string | undefined;
+        menu?: any[] | undefined;
         hide?: boolean | undefined;
     }, {
         loginLabel?: string | undefined;
         logoutLabel?: string | undefined;
-        logoutRedirect?: string | undefined;
+        menu?: any[] | undefined;
         hide?: boolean | undefined;
     }>>>;
 }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
@@ -1810,17 +1810,17 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     userProfile: z.ZodDefault<z.ZodOptional<z.ZodObject<{
         loginLabel: z.ZodOptional<z.ZodDefault<z.ZodString>>;
         logoutLabel: z.ZodOptional<z.ZodDefault<z.ZodString>>;
-        logoutRedirect: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+        menu: z.ZodOptional<z.ZodArray<z.ZodAny, "many">>;
         hide: z.ZodOptional<z.ZodBoolean>;
     }, "strip", z.ZodTypeAny, {
         loginLabel?: string | undefined;
         logoutLabel?: string | undefined;
-        logoutRedirect?: string | undefined;
+        menu?: any[] | undefined;
         hide?: boolean | undefined;
     }, {
         loginLabel?: string | undefined;
         logoutLabel?: string | undefined;
-        logoutRedirect?: string | undefined;
+        menu?: any[] | undefined;
         hide?: boolean | undefined;
     }>>>;
 }, z.ZodTypeAny, "passthrough">>>;

package/lib/config.js

@@ -205,7 +205,7 @@ exports.ThemeConfig = zod_1.z
         .object({
         loginLabel: zod_1.z.string().default('Login').optional(),
         logoutLabel: zod_1.z.string().default('Logout').optional(),
-        logoutRedirect: zod_1.z.string().default('/').optional(),
+        menu: zod_1.z.array(zod_1.z.any()).optional(), // should be same as navbar items type
     })
         .extend(HideConfig.shape)
         .optional()

package/lib/globalStyle.js

@@ -1939,6 +1939,66 @@ const pages = (0, styled_components_1.css) `
 
    // @tokens End
 `;
+const userProfile = (0, styled_components_1.css) `
+
+  /**
+  * @tokens User Profile 
+  */
+
+   --profile-name-font-family: var(--navbar-item-font-family); // @presenter FontFamily
+   --profile-name-font-size: var(--navbar-item-font-size); // @presenter FontSize
+   --profile-name-font-weight: var(--font-weight-regular); // @presenter FontWeight
+   --profile-name-line-height: var(--line-height-base); // @presenter LineHeight
+   --profile-name-text-color: var(--navbar-text-color); // @presenter Color
+   
+   --profile-name-padding-horizontal: 0; // @presenter Spacing
+   --profile-name-padding-vertical: 0; // @presenter Spacing
+   --profile-name-margin-horizontal: 0; // @presenter Spacing
+
+   --profile-avatar-width: 40px; 
+   --profile-avatar-height: 40px;
+   --profile-avatar-border-radius: 50%; // @presenter BorderRadius
+
+   --profile-avatar-font-family: var(--navbar-item-font-family); // @presenter FontFamily
+   --profile-avatar-font-size: var(--navbar-item-font-size) // @presenter FontSize
+   --profile-avatar-font-weight: var(--font-weight-regular); // @presenter FontWeight
+   --profile-avatar-line-height: var(--line-height-base); // @presenter LineHeight
+
+   --profile-avatar-margin-left: 16px; // @presenter Spacing
+   --profile-avatar-padding-vertical: 16px; // @presenter Spacing
+   --profile-avatar-padding-horizontal: 16px; // @presenter Spacing
+
+
+  /**
+  * @tokens User Profile Menu
+  */
+
+   --profile-menu-background-color: var(--background-color); // @presenter Color
+   --profile-menu-padding: 0px; // @presenter Spacing
+   --profile-menu-margin: 0px; // @presenter Spacing
+
+   --profile-menu-item-font-family: var(--navbar-item-font-family); // @presenter FontFamily
+   --profile-menu-item-text-color: var(--text-color); // @presenter Color
+   --profile-menu-item-font-size: var(--navbar-item-font-size); // @presenter FontSize
+   --profile-menu-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
+   --profile-menu-item-line-height: var(--line-height-base);  // @presenter LineHeight
+   --profile-menu-item-text-align: left;
+ 
+   --profile-menu-item-padding-horizontal: 15px; // @presenter Spacing
+   --profile-menu-item-padding-vertical: 20px; // @presenter Spacing
+
+   --profile-menu-item-hover-background-color: var(--color-primary-300); // @presenter Color
+   --profile-menu-item-active-background-color: var(--color-primary-300); // @presenter Color
+   --profile-menu-item-hover-text-color: var(--navbar-text-color); // @presenter Color
+   --profile-menu-item-hover-text-decoration: none;
+   --profile-menu-item-active-text-color: var(--navbar-text-color); // @presenter Color
+   --profile-menu-item-active-text-decoration: none;
+
+   --profile-menu-item-separator-line-color: var(--border-color); // @presenter Color
+
+   // @tokens End
+ 
+`;
 const modal = (0, styled_components_1.css) `
   body:has(.modal) {
     overflow: hidden;
@@ -1978,6 +2038,7 @@ exports.styles = (0, styled_components_1.css) `
     ${loadProgressBar}
     ${pages}
     ${modal}
+    ${userProfile}
 
     --api-onboarding-table-text-color: #4e5356;
     --api-catalog-card-min-width: 250px;

package/lib/hooks/useActiveSectionId.d.ts

@@ -1,3 +1,3 @@
-import type { Location } from 'history';
+import type { Location } from 'react-router-dom';
 export type UseActiveSectionIdReturnType = string;
-export declare function useActiveSectionId(location: Location, hasOverviewPage?: boolean): UseActiveSectionIdReturnType;
+export declare function useActiveSectionId(location: Location, hasOverviewPage?: boolean, withNavbar?: boolean): UseActiveSectionIdReturnType;

package/lib/hooks/useActiveSectionId.js

@@ -7,9 +7,10 @@ exports.useActiveSectionId = void 0;
 const react_1 = require("react");
 const lodash_throttle_1 = __importDefault(require("lodash.throttle"));
 const useNavbarHeight_1 = require("../hooks/useNavbarHeight");
-function useActiveSectionId(location, hasOverviewPage = false) {
+function useActiveSectionId(location, hasOverviewPage = false, withNavbar = true) {
     const [itemId, setItemId] = (0, react_1.useState)('');
     const navbarHeight = (0, useNavbarHeight_1.useNavbarHeight)(location);
+    const heightOffset = (withNavbar ? navbarHeight : 0) + 5; // use small padding 5px to account for rounding;
     const scrollListener = (0, react_1.useMemo)(() => (0, lodash_throttle_1.default)(() => {
         const sections = document.querySelectorAll('[data-section-id]');
         if (sections.length < 2) {
@@ -19,8 +20,7 @@ function useActiveSectionId(location, hasOverviewPage = false) {
         for (let i = 0; i < sections.length; i++) {
             const section = sections[i];
             const rect = section.getBoundingClientRect();
-            if (rect.y < navbarHeight + 5 && rect.bottom > navbarHeight + 5) {
-                // use small padding 5px to account for rounding
+            if (rect.y < heightOffset && rect.bottom > heightOffset) {
                 setItemId(section.getAttribute('data-section-id') || '');
                 return;
             }
@@ -28,7 +28,7 @@ function useActiveSectionId(location, hasOverviewPage = false) {
         if (hasOverviewPage) {
             setItemId('');
         }
-    }, 150), [navbarHeight, hasOverviewPage]);
+    }, 150), [heightOffset, hasOverviewPage]);
     (0, react_1.useEffect)(() => {
         window.addEventListener('scroll', scrollListener, { capture: false });
         setTimeout(() => {
@@ -37,7 +37,7 @@ function useActiveSectionId(location, hasOverviewPage = false) {
         return () => {
             window.removeEventListener('scroll', scrollListener);
         };
-    }, [location, navbarHeight, scrollListener]);
+    }, [location, heightOffset, scrollListener]);
     return itemId;
 }
 exports.useActiveSectionId = useActiveSectionId;

package/lib/hooks/useNavbarHeight.d.ts

@@ -1,3 +1,3 @@
-import type { Location } from 'history';
+import type { Location } from 'react-router-dom';
 export type UseNavbarHeightReturnType = number;
 export declare function useNavbarHeight(location: Location): UseNavbarHeightReturnType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -15,25 +15,6 @@
     "./*": "./lib/index.js",
     "./src/": "./src/"
   },
-  "scripts": {
-    "start": "npm-run-all --parallel storybook storybook:tokens:watch",
-    "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
-    "ts:check": "tsc --noEmit --skipLibCheck",
-    "clean": "rm -rf lib",
-    "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "build": "npm run clean && npm run compile",
-    "test": "jest",
-    "test:update": "jest -u",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "test:coverage:html": "jest --coverage --coverageReporters html",
-    "e2e": "npx chromatic -b storybook:build --auto-accept-changes main --exit-once-uploaded",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "npm run storybook:tokens && build-storybook",
-    "storybook:tokens": "ts-node scripts/generate-css-tokens.ts",
-    "storybook:tokens:watch": "ts-node-dev --respawn scripts/generate-css-tokens.ts",
-    "chromatic": "chromatic --exit-zero-on-changes"
-  },
   "peerDependencies": {
     "lodash.throttle": "^4.1.1",
     "prismjs": "^1.28.0",
@@ -72,6 +53,7 @@
     "@types/react-dom": "^17.0.11",
     "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.13",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
     "chromatic": "^6.10.2",
@@ -86,7 +68,7 @@
     "react-refresh": "^0.14.0",
     "react-router-dom": "^6.4.4",
     "storybook-addon-pseudo-states": "^1.15.1",
-    "storybook-design-token": "^2.7.1",
+    "storybook-design-token": "^2.9.0",
     "styled-components": "^5.3.6",
     "styled-system": "^5.1.5",
     "ts-jest": "^29.0.3",
@@ -124,5 +106,24 @@
         ]
       }
     }
+  },
+  "scripts": {
+    "start": "npm-run-all --parallel storybook storybook:tokens:watch",
+    "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
+    "ts:check": "tsc --noEmit --skipLibCheck",
+    "clean": "rm -rf lib",
+    "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build": "npm run clean && npm run compile",
+    "test": "jest",
+    "test:update": "jest -u",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "test:coverage:html": "jest --coverage --coverageReporters html",
+    "e2e": "npx chromatic -b storybook:build --auto-accept-changes main --exit-once-uploaded",
+    "storybook": "start-storybook -p 6006",
+    "storybook:build": "npm run storybook:tokens && build-storybook",
+    "storybook:tokens": "ts-node scripts/generate-css-tokens.ts",
+    "storybook:tokens:watch": "ts-node-dev --respawn scripts/generate-css-tokens.ts",
+    "chromatic": "chromatic --exit-zero-on-changes"
   }
-}
+}

package/src/Catalog/Catalog.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedNavItem } from '@redocly/theme/src/types/portal';
+import type { ResolvedNavItem } from '../types/portal';
 
 import type { CatalogConfig } from '@theme/types/portal/src/shared/types/catalog';
 import { usePageSharedData } from '@portal/hooks/index.js';

package/src/Profile/Profile.tsx

@@ -55,7 +55,13 @@ const ProfileWrapper = styled.div.attrs(() => ({
 `;
 
 const StyledUserName = styled.span`
-  color: ${({ color }) => color || 'var(--navbar-text-color)'};
+  font-family: var(--profile-name-font-family);
+  font-size: var(--profile-name-font-size);
+  font-weight: var(--profile-name-font-weight);
+  color: var(--profile-name-text-color);
+  padding: var(--profile-name-padding-vertical) var(--profile-name-padding-horizontal);
+  margin: 0 var(--profile-name-margin-horizontal);
+
   display: none;
 
   ${({ theme }) => theme.mediaQueries?.medium} {
@@ -64,19 +70,23 @@ const StyledUserName = styled.span`
 `;
 
 const AvatarWrapper = styled.div<{ background?: string }>`
-  width: 40px;
-  height: 40px;
+  width: var(--profile-avatar-width);
+  height: var(--profile-avatar-height);
   display: flex;
   overflow: hidden;
   position: relative;
-  font-size: 1.25rem;
   align-items: center;
   flex-shrink: 0;
-  line-height: 1;
-  user-select: none;
-  border-radius: 50%;
   justify-content: center;
-  margin-left: 16px;
+  user-select: none;
+
+  font-family: var(--profile-avatar-font-family);
+  font-size: var(--profile-avatar-font-size);
+  line-height: var(--profile-avatar-line-height);
+  font-weight: var(--profile-avatar-font-weight);
+
+  border-radius: var(--profile-avatar-border-radius);
+  margin-left: var(--profile-avatar-margin-left);
 
   ${({ background }) => css`
     background-color: ${background};

package/src/Profile/UserProfile.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 
-import { Link } from '@portal/Link';
 import { Profile } from '@theme/Profile/Profile';
 import { Tooltip } from '@theme/Tooltip/Tooltip';
-import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+
+import { UserProfileMenu } from './UserProfileMenu';
 
 export interface UserProfileProps {
   userInfo: {
@@ -13,7 +13,7 @@ export interface UserProfileProps {
     picture: string;
     logoutDisabled?: boolean;
   };
-  handleLogout: (logoutRedirect?: string) => void;
+  handleLogout: () => void;
   hasDeveloperOnboarding?: boolean;
 }
 
@@ -24,10 +24,6 @@ export function UserProfile({
 }: UserProfileProps): JSX.Element {
   const [isOpened, setIsOpened] = useState<boolean>(false);
 
-  const { userProfile: userProfileSettings } = useThemeConfig();
-
-  const logoutRedirect = userProfileSettings?.logoutRedirect || '/';
-
   return (
     <StyledTooltip
       isOpen={isOpened}
@@ -36,16 +32,11 @@ export function UserProfile({
       placement="bottom"
       width="100%"
       tip={
-        <StyledUl onClick={() => setIsOpened(false)}>
-          {hasDeveloperOnboarding ? (
-            <Link to="/apps">
-              <StyledLi>My Apps</StyledLi>
-            </Link>
-          ) : null}
-          <StyledLi onClick={() => handleLogout(logoutRedirect)}>
-            {userProfileSettings?.logoutLabel || 'Log out'}
-          </StyledLi>
-        </StyledUl>
+        <UserProfileMenu
+          hasDeveloperOnboarding={hasDeveloperOnboarding}
+          handleLogout={handleLogout}
+          setIsOpened={setIsOpened}
+        />
       }
     >
       <Profile
@@ -62,33 +53,3 @@ const StyledTooltip = styled(Tooltip)`
     padding: 0;
   }
 `;
-
-const StyledUl = styled.ul`
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  text-align: left;
-  background-color: var(--search-modal-background);
-  color: var(--search-modal-text-color);
-  min-width: 100px;
-  a {
-    text-decoration: none;
-    &:hover {
-      color: inherit;
-    }
-    &:visited {
-      color: inherit;
-    }
-  }
-`;
-
-const StyledLi = styled.li`
-  cursor: pointer;
-  font-size: 16px;
-  list-style: none;
-  padding: 15px 20px;
-  transition: background-color 0.25s ease 0s;
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-`;

package/src/Profile/UserProfileMenu.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import { Link } from '@portal/Link';
+import { useThemeConfig } from '@theme/hooks';
+
+interface UserProfileMenuProps {
+  setIsOpened: (isOpen: boolean) => void;
+  handleLogout: () => void;
+  hasDeveloperOnboarding: boolean;
+}
+
+export function UserProfileMenu({
+  hasDeveloperOnboarding,
+  setIsOpened,
+  handleLogout,
+}: UserProfileMenuProps): JSX.Element {
+  const { userProfile } = useThemeConfig();
+
+  return (
+    <>
+      <StyledUl onClick={() => setIsOpened(false)}>
+        {hasDeveloperOnboarding ? (
+          <Link to="/apps">
+            <StyledLi>My Apps</StyledLi>
+          </Link>
+        ) : null}
+
+        {userProfile?.menu?.map((item) => (
+          <Link external={item.external} key={item.label} to={item.link || ''}>
+            <StyledLi separatorLine={item?.separatorLine}>{item.label}</StyledLi>
+          </Link>
+        ))}
+
+        <StyledLi onClick={() => handleLogout()}>{userProfile?.logoutLabel || 'Log out'}</StyledLi>
+      </StyledUl>
+    </>
+  );
+}
+
+const StyledUl = styled.ul`
+  margin: var(--profile-menu-margin);
+  padding: var(--profile-menu-padding);
+  list-style: none;
+  background-color: var(--profile-menu-background-color);
+  min-width: 100px;
+  a {
+    text-decoration: none;
+  }
+`;
+
+const StyledLi = styled.li<{ separatorLine?: boolean }>`
+  cursor: pointer;
+  font-size: var(--profile-menu-item-font-size);
+  font-family: var(--profile-menu-item-font-family);
+  font-weight: var(--profile-menu-item-font-weight);
+  line-height: var(--profile-menu-item-line-height);
+  color: var(--profile-menu-item-text-color);
+  text-align: var(--profile-menu-item-text-align);
+
+  list-style: none;
+
+  padding: var(--profile-menu-item-padding-vertical) var(--profile-menu-item-padding-horizontal);
+
+  transition: background-color 0.25s ease 0s;
+
+  &:hover {
+    color: var(--profile-menu-item-hover-text-color);
+    background-color: var(--profile-menu-item-hover-background-color);
+    text-decoration: var(--profile-menu-item-hover-text-decoration);
+  }
+  &:active {
+    color: var(--profile-menu-item-active-text-color);
+    background-color: var(--profile-menu-item-active-background-color);
+    text-decoration: var(--profile-menu-item-active-text-decoration);
+  }
+
+  ${({ separatorLine }) =>
+    separatorLine &&
+    css`
+      border-bottom: 1px solid var(--profile-menu-item-separator-line-color);
+    `}
+`;

package/src/config.ts

@@ -215,7 +215,7 @@ export const ThemeConfig = z
       .object({
         loginLabel: z.string().default('Login').optional(),
         logoutLabel: z.string().default('Logout').optional(),
-        logoutRedirect: z.string().default('/').optional(),
+        menu: z.array(z.any()).optional(), // should be same as navbar items type
       })
       .extend(HideConfig.shape)
       .optional()

package/src/globalStyle.ts

@@ -1965,6 +1965,67 @@ const pages = css`
    // @tokens End
 `
 
+const userProfile = css`
+
+  /**
+  * @tokens User Profile 
+  */
+
+   --profile-name-font-family: var(--navbar-item-font-family); // @presenter FontFamily
+   --profile-name-font-size: var(--navbar-item-font-size); // @presenter FontSize
+   --profile-name-font-weight: var(--font-weight-regular); // @presenter FontWeight
+   --profile-name-line-height: var(--line-height-base); // @presenter LineHeight
+   --profile-name-text-color: var(--navbar-text-color); // @presenter Color
+   
+   --profile-name-padding-horizontal: 0; // @presenter Spacing
+   --profile-name-padding-vertical: 0; // @presenter Spacing
+   --profile-name-margin-horizontal: 0; // @presenter Spacing
+
+   --profile-avatar-width: 40px; 
+   --profile-avatar-height: 40px;
+   --profile-avatar-border-radius: 50%; // @presenter BorderRadius
+
+   --profile-avatar-font-family: var(--navbar-item-font-family); // @presenter FontFamily
+   --profile-avatar-font-size: var(--navbar-item-font-size) // @presenter FontSize
+   --profile-avatar-font-weight: var(--font-weight-regular); // @presenter FontWeight
+   --profile-avatar-line-height: var(--line-height-base); // @presenter LineHeight
+
+   --profile-avatar-margin-left: 16px; // @presenter Spacing
+   --profile-avatar-padding-vertical: 16px; // @presenter Spacing
+   --profile-avatar-padding-horizontal: 16px; // @presenter Spacing
+
+
+  /**
+  * @tokens User Profile Menu
+  */
+
+   --profile-menu-background-color: var(--background-color); // @presenter Color
+   --profile-menu-padding: 0px; // @presenter Spacing
+   --profile-menu-margin: 0px; // @presenter Spacing
+
+   --profile-menu-item-font-family: var(--navbar-item-font-family); // @presenter FontFamily
+   --profile-menu-item-text-color: var(--text-color); // @presenter Color
+   --profile-menu-item-font-size: var(--navbar-item-font-size); // @presenter FontSize
+   --profile-menu-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
+   --profile-menu-item-line-height: var(--line-height-base);  // @presenter LineHeight
+   --profile-menu-item-text-align: left;
+ 
+   --profile-menu-item-padding-horizontal: 15px; // @presenter Spacing
+   --profile-menu-item-padding-vertical: 20px; // @presenter Spacing
+
+   --profile-menu-item-hover-background-color: var(--color-primary-300); // @presenter Color
+   --profile-menu-item-active-background-color: var(--color-primary-300); // @presenter Color
+   --profile-menu-item-hover-text-color: var(--navbar-text-color); // @presenter Color
+   --profile-menu-item-hover-text-decoration: none;
+   --profile-menu-item-active-text-color: var(--navbar-text-color); // @presenter Color
+   --profile-menu-item-active-text-decoration: none;
+
+   --profile-menu-item-separator-line-color: var(--border-color); // @presenter Color
+
+   // @tokens End
+ 
+`;
+
 const modal = css`
   body:has(.modal) {
     overflow: hidden;
@@ -2005,6 +2066,7 @@ export const styles = css`
     ${loadProgressBar}
     ${pages}
     ${modal}
+    ${userProfile}
 
     --api-onboarding-table-text-color: #4e5356;
     --api-catalog-card-min-width: 250px;

package/src/hooks/useActiveSectionId.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState, useMemo } from 'react';
 import throttle from 'lodash.throttle';
 
-import type { Location } from 'history';
+import type { Location } from 'react-router-dom';
 
 import { useNavbarHeight } from '@theme/hooks/useNavbarHeight';
 
@@ -10,9 +10,12 @@ export type UseActiveSectionIdReturnType = string;
 export function useActiveSectionId(
   location: Location,
   hasOverviewPage = false,
+  withNavbar = true,
 ): UseActiveSectionIdReturnType {
   const [itemId, setItemId] = useState<string>('');
   const navbarHeight = useNavbarHeight(location);
+  const heightOffset = (withNavbar ? navbarHeight : 0) + 5; // use small padding 5px to account for rounding;
+
   const scrollListener = useMemo(
     () =>
       throttle(() => {
@@ -24,8 +27,7 @@ export function useActiveSectionId(
         for (let i = 0; i < sections.length; i++) {
           const section = sections[i];
           const rect = section.getBoundingClientRect();
-          if (rect.y < navbarHeight + 5 && rect.bottom > navbarHeight + 5) {
-            // use small padding 5px to account for rounding
+          if (rect.y < heightOffset && rect.bottom > heightOffset) {
             setItemId(section.getAttribute('data-section-id') || '');
             return;
           }
@@ -34,7 +36,7 @@ export function useActiveSectionId(
           setItemId('');
         }
       }, 150),
-    [navbarHeight, hasOverviewPage],
+    [heightOffset, hasOverviewPage],
   );
 
   useEffect(() => {
@@ -46,7 +48,7 @@ export function useActiveSectionId(
     return () => {
       window.removeEventListener('scroll', scrollListener);
     };
-  }, [location, navbarHeight, scrollListener]);
+  }, [location, heightOffset, scrollListener]);
 
   return itemId;
 }

package/src/hooks/useNavbarHeight.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import type { Location } from 'history';
+import type { Location } from 'react-router-dom';
 
 import { getNavbarElement } from '@theme/utils/getNavbarElement';