npm - @equinor/cpl-top-bar-react - Versions diffs - 0.4.0 → 0.5.0 - Mend

@equinor/cpl-top-bar-react 0.4.0 → 0.5.0

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 (5) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -16,6 +16,12 @@ interface FeedbackLinkProps {
  */
 declare function FeedbackLink({ link, subject, body }: FeedbackLinkProps): react_jsx_runtime.JSX.Element;
+type MenuHeaderProps = {
+    appName: string;
+    icon: React.ReactNode;
+};
+declare function MenuHeader({ appName, icon }: MenuHeaderProps): react_jsx_runtime.JSX.Element;
 type AppUrls = {
     [appName: string]: {
         dev: string;
@@ -47,8 +53,12 @@ type SideMenuProps = {
     otherMenuItems?: MenuItems[];
     logoElement?: JSX.Element;
     versionInfo?: React__default.ReactNode;
+    /**
+     * supports next/link and react-router-dom, will default to using a regular anchor-element if not provided
+     */
+    linkComponent?: React__default.ElementType;
 };
-declare function SideMenu({ isOpen, onToggle, mainMenuItems, logoElement, versionInfo, currentEnvironment, titleOtherMenuItems, otherMenuItems, appUrls, }: SideMenuProps): react_jsx_runtime.JSX.Element;
+declare function SideMenu({ isOpen, onToggle, mainMenuItems, logoElement, versionInfo, currentEnvironment, titleOtherMenuItems, otherMenuItems, appUrls, linkComponent, }: SideMenuProps): react_jsx_runtime.JSX.Element;
 interface TopBarProps {
     appName: string;
@@ -82,4 +92,4 @@ interface UserMenuProps {
 }
 declare function UserMenu({ user, logout, settingsLink, children }: UserMenuProps): react_jsx_runtime.JSX.Element;
-export { FeedbackLink, SideMenu, StyledLink, TopBar, UserMenu };
+export { type AppUrls, FeedbackLink, MenuHeader, SideMenu, StyledLink, TopBar, UserMenu };

package/dist/index.d.ts CHANGED Viewed

@@ -16,6 +16,12 @@ interface FeedbackLinkProps {
  */
 declare function FeedbackLink({ link, subject, body }: FeedbackLinkProps): react_jsx_runtime.JSX.Element;
+type MenuHeaderProps = {
+    appName: string;
+    icon: React.ReactNode;
+};
+declare function MenuHeader({ appName, icon }: MenuHeaderProps): react_jsx_runtime.JSX.Element;
 type AppUrls = {
     [appName: string]: {
         dev: string;
@@ -47,8 +53,12 @@ type SideMenuProps = {
     otherMenuItems?: MenuItems[];
     logoElement?: JSX.Element;
     versionInfo?: React__default.ReactNode;
+    /**
+     * supports next/link and react-router-dom, will default to using a regular anchor-element if not provided
+     */
+    linkComponent?: React__default.ElementType;
 };
-declare function SideMenu({ isOpen, onToggle, mainMenuItems, logoElement, versionInfo, currentEnvironment, titleOtherMenuItems, otherMenuItems, appUrls, }: SideMenuProps): react_jsx_runtime.JSX.Element;
+declare function SideMenu({ isOpen, onToggle, mainMenuItems, logoElement, versionInfo, currentEnvironment, titleOtherMenuItems, otherMenuItems, appUrls, linkComponent, }: SideMenuProps): react_jsx_runtime.JSX.Element;
 interface TopBarProps {
     appName: string;
@@ -82,4 +92,4 @@ interface UserMenuProps {
 }
 declare function UserMenu({ user, logout, settingsLink, children }: UserMenuProps): react_jsx_runtime.JSX.Element;
-export { FeedbackLink, SideMenu, StyledLink, TopBar, UserMenu };
+export { type AppUrls, FeedbackLink, MenuHeader, SideMenu, StyledLink, TopBar, UserMenu };

package/dist/index.js CHANGED Viewed

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   FeedbackLink: () => FeedbackLink,
+  MenuHeader: () => MenuHeader,
   SideMenu: () => SideMenu,
   StyledLink: () => StyledLink,
   TopBar: () => TopBar,
@@ -135,24 +136,49 @@ function FeedbackLink({ link, subject, body }) {
   );
 }
+// src/SideMenu/components/MenuHeader.tsx
+var import_eds_tokens2 = require("@equinor/eds-tokens");
+var import_styled_components2 = require("styled-components");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function MenuHeader({ appName, icon }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LogoWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(LogoStyle, { children: [
+    icon,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: appName })
+  ] }) });
+}
+var LogoWrapper = import_styled_components2.styled.div`
+  padding: 0 ${import_eds_tokens2.tokens.spacings.comfortable.medium} ${import_eds_tokens2.tokens.spacings.comfortable.small}
+    ${import_eds_tokens2.tokens.spacings.comfortable.medium};
+  text-align: center;
+  font-weight: 500;
+`;
+var LogoStyle = import_styled_components2.styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: ${import_eds_tokens2.tokens.spacings.comfortable.small};
+  justify-content: center;
+  text-align: center;
+`;
 // src/SideMenu/SideMenu.tsx
 var import_eds_core_react5 = require("@equinor/eds-core-react");
 var import_eds_icons4 = require("@equinor/eds-icons");
-var import_eds_tokens4 = require("@equinor/eds-tokens");
+var import_eds_tokens5 = require("@equinor/eds-tokens");
 var import_react = require("react");
-var import_styled_components4 = __toESM(require("styled-components"));
+var import_styled_components5 = __toESM(require("styled-components"));
 // src/SideMenu/components/MenuList.tsx
 var import_eds_core_react4 = require("@equinor/eds-core-react");
-var import_eds_tokens3 = require("@equinor/eds-tokens");
-var import_styled_components3 = require("styled-components");
+var import_eds_tokens4 = require("@equinor/eds-tokens");
+var import_styled_components4 = require("styled-components");
 // src/SideMenu/components/MenuLink.tsx
 var import_eds_core_react3 = require("@equinor/eds-core-react");
 var import_eds_icons3 = require("@equinor/eds-icons");
-var import_eds_tokens2 = require("@equinor/eds-tokens");
+var import_eds_tokens3 = require("@equinor/eds-tokens");
 var import_navigation = require("next/navigation");
-var import_styled_components2 = require("styled-components");
+var import_styled_components3 = require("styled-components");
 // src/SideMenu/useAppUrlByNameAndEnvironment.ts
 function useAppUrlByNameAndEnvironment(appName, currentEnvironment, appUrls) {
@@ -166,7 +192,7 @@ function useAppUrlByNameAndEnvironment(appName, currentEnvironment, appUrls) {
 }
 // src/SideMenu/components/MenuLink.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function MenuLink({
   item,
   environment,
@@ -178,15 +204,15 @@ function MenuLink({
   const url = (_b = item == null ? void 0 : item.url) != null ? _b : urlByNameAndEnvironment;
   const pathName = (0, import_navigation.usePathname)();
   let isActive = !item.external && pathName == item.url;
-  const linkContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+  const linkContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
     item.name,
-    item.external && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_eds_core_react3.Icon, { data: import_eds_icons3.external_link, size: 16 })
+    item.external && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react3.Icon, { data: import_eds_icons3.external_link, size: 16 })
   ] });
   if (item.external) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledLink2, { href: url, target: "_blank", rel: "noopener noreferrer", children: linkContent });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledLink2, { href: url, target: "_blank", rel: "noopener noreferrer", children: linkContent });
   }
   if (LinkComponent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       StyledLink2,
       {
         as: LinkComponent,
@@ -198,16 +224,17 @@ function MenuLink({
     );
   }
   isActive = typeof window !== "undefined" ? window.location.pathname === item.url : false;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledLink2, { href: url, $active: isActive, children: linkContent });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledLink2, { href: url, $active: isActive, children: linkContent });
 }
-var StyledLink2 = import_styled_components2.styled.a`
+var StyledLink2 = import_styled_components3.styled.a`
   text-decoration: none;
   padding: 12px 16px 12px 19px;
   display: inline-block;
   width: 100%;
-  color: ${import_eds_tokens2.tokens.colors.interactive.secondary__resting.rgba};
-  background-color: ${({ $active }) => $active ? import_eds_tokens2.tokens.colors.interactive.primary__selected_highlight.rgba : "transparent"};
+  color: ${import_eds_tokens3.tokens.colors.interactive.secondary__resting.rgba};
+  background-color: ${({ $active }) => $active ? import_eds_tokens3.tokens.colors.interactive.primary__selected_highlight.rgba : "transparent"};
   font-weight: ${({ $active }) => $active ? 700 : 400};
+  font-size: 0.875rem;
   &:hover {
     //TODO: check hover color for dark theme with designer when back
@@ -217,50 +244,69 @@ var StyledLink2 = import_styled_components2.styled.a`
   &:focus-visible {
     outline-offset: -2px;
   }
+  span {
+    align-items: center;
+    display: flex;
+    gap: 1rem;
+    justify-content: space-between;
+    font-size: 0.875rem;
+  }
+  span svg {
+    opacity: 60%;
+  }
 `;
 // src/SideMenu/components/MenuList.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function MenuList({ items, currentEnvironment, appUrls, onToggleMenuGroup }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { children: items.map((menuItem) => {
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function MenuList({
+  items,
+  currentEnvironment,
+  appUrls,
+  onToggleMenuGroup,
+  linkComponent
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { children: items.map((menuItem) => {
     if (isMenuItemGroup(menuItem)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react4.Accordion, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(AccordionItem, { isExpanded: menuItem.isExpanded, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react4.Accordion.Header, { onToggle: onToggleMenuGroup, children: menuItem.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react4.Accordion.Panel, { "aria-label": `Links for ${menuItem.title}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { children: menuItem.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react4.Accordion, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(AccordionItem, { isExpanded: menuItem.isExpanded, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react4.Accordion.Header, { onToggle: onToggleMenuGroup, children: menuItem.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react4.Accordion.Panel, { "aria-label": `Links for ${menuItem.title}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { children: menuItem.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           MenuLink,
           {
             item,
             environment: currentEnvironment,
-            appUrls
+            appUrls,
+            linkComponent
           }
         ) }, menuItem.title + "-" + item.name)) }) })
       ] }, menuItem.title) }, menuItem.title) }, menuItem.title);
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuLink, { item: menuItem, environment: currentEnvironment, appUrls }) }, menuItem.name);
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        MenuLink,
+        {
+          item: menuItem,
+          environment: currentEnvironment,
+          appUrls,
+          linkComponent
+        }
+      ) }, menuItem.name);
     }
   }) });
 }
 function isMenuItemGroup(item) {
   return typeof item === "object" && "title" in item && "items" in item;
 }
-var AccordionItem = (0, import_styled_components3.styled)(import_eds_core_react4.Accordion.Item)`
+var AccordionItem = (0, import_styled_components4.styled)(import_eds_core_react4.Accordion.Item)`
   a {
     display: block;
-    padding: 12px ${import_eds_tokens3.tokens.spacings.comfortable.medium} 12px ${import_eds_tokens3.tokens.spacings.comfortable.x_large};
-  }
-  a span {
-    align-items: center;
-    display: flex;
-    gap: 1rem;
-    justify-content: space-between;
-    font-size: 0.875rem;
+    padding: 12px ${import_eds_tokens4.tokens.spacings.comfortable.medium} 12px ${import_eds_tokens4.tokens.spacings.comfortable.x_large};
   }
   h2 {
     background: transparent;
     border: 0;
-    color: ${import_eds_tokens3.tokens.colors.interactive.secondary__resting.rgba};
+    color: ${import_eds_tokens4.tokens.colors.interactive.secondary__resting.rgba};
   }
   h2 + div {
@@ -273,13 +319,13 @@ var AccordionItem = (0, import_styled_components3.styled)(import_eds_core_react4
   h2 button svg {
     width: 14px;
     height: 14px;
-    margin-right: ${import_eds_tokens3.tokens.spacings.comfortable.x_small};
+    margin-right: ${import_eds_tokens4.tokens.spacings.comfortable.x_small};
     transform: rotate(-90deg);
-    fill: ${import_eds_tokens3.tokens.colors.interactive.secondary__resting.rgba};
+    fill: ${import_eds_tokens4.tokens.colors.interactive.secondary__resting.rgba};
   }
   h2 button span {
-    color: ${import_eds_tokens3.tokens.colors.interactive.secondary__resting.rgba};
+    color: ${import_eds_tokens4.tokens.colors.interactive.secondary__resting.rgba};
     font-weight: 700;
     font-size: 0.875rem;
   }
@@ -288,10 +334,6 @@ var AccordionItem = (0, import_styled_components3.styled)(import_eds_core_react4
     transform: rotate(180deg);
   }
-  li a svg {
-    opacity: 60%;
-  }
   h2 button:hover,
   li a:hover {
     background-color: var(--cpl-sidebar-hover-color);
@@ -303,7 +345,7 @@ var AccordionItem = (0, import_styled_components3.styled)(import_eds_core_react4
 `;
 // src/SideMenu/SideMenu.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function SideMenu({
   isOpen,
   onToggle,
@@ -313,7 +355,8 @@ function SideMenu({
   currentEnvironment,
   titleOtherMenuItems,
   otherMenuItems,
-  appUrls
+  appUrls,
+  linkComponent
 }) {
   var _a;
   const width = "268px";
@@ -347,46 +390,47 @@ function SideMenu({
       return () => element.removeEventListener("scroll", handleScroll);
     }
   }, [handleScroll]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Sidebar, { $isOpen: isOpen, width: isOpen ? width : "", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(InnerWrapper, { ref: containerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StickyCloseButton, { $showBorder: hasOverflow && scrolledDown, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Sidebar, { $isOpen: isOpen, $width: isOpen ? width : "", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(InnerWrapper, { ref: containerRef, $width: width, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StickyCloseButton, { $showBorder: hasOverflow && scrolledDown, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_eds_core_react5.Button,
         {
           variant: "ghost_icon",
           color: "secondary",
           "aria-label": "Toggle side menu",
           onClick: () => onToggle(!isOpen),
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Icon, { data: import_eds_icons4.collapse, size: 24 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react5.Icon, { data: import_eds_icons4.collapse, size: 24 })
         }
       ) }),
       logoElement,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("nav", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("nav", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           MenuList,
           {
             items: mainMenuItems,
             currentEnvironment,
             appUrls,
-            onToggleMenuGroup: checkOverflow
+            onToggleMenuGroup: checkOverflow,
+            linkComponent
           }
         ),
-        otherMenuItems && otherMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledDivider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        otherMenuItems && otherMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledDivider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               import_eds_core_react5.Typography,
               {
                 variant: "label",
                 group: "navigation",
                 as: "h2",
                 style: {
-                  color: import_eds_tokens4.tokens.colors.interactive.secondary__resting.rgba,
+                  color: import_eds_tokens5.tokens.colors.interactive.secondary__resting.rgba,
                   padding: "12px 19px 4px 19px"
                 },
                 children: (_a = titleOtherMenuItems == null ? void 0 : titleOtherMenuItems.toUpperCase()) != null ? _a : "OTHER SOLUTIONS"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               MenuList,
               {
                 items: otherMenuItems,
@@ -398,17 +442,17 @@ function SideMenu({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledDivider, {})
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledDivider, {})
     ] }),
     versionInfo
   ] }) });
 }
-var StyledDivider = (0, import_styled_components4.default)(import_eds_core_react5.Divider)`
+var StyledDivider = (0, import_styled_components5.default)(import_eds_core_react5.Divider)`
   background-color: var(--cpl-divider-color);
   margin: 8px 0;
 `;
-var Sidebar = import_styled_components4.default.div`
-  width: ${(props) => props.$isOpen ? props.width : "0px"};
+var Sidebar = import_styled_components5.default.div`
+  width: ${(props) => props.$isOpen ? props.$width : "0px"};
   opacity: ${(props) => props.$isOpen ? 1 : 0};
   transition:
     width 0.5s,
@@ -430,12 +474,12 @@ var Sidebar = import_styled_components4.default.div`
     box-sizing: border-box;
   }
 `;
-var InnerWrapper = import_styled_components4.default.div`
+var InnerWrapper = import_styled_components5.default.div`
   overflow: auto;
   background: var(--cpl-ui-background-temporary-nav);
   padding: 0;
   height: 100%;
-  width: ${(props) => props.width};
+  width: ${(props) => props.$width};
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -443,13 +487,13 @@ var InnerWrapper = import_styled_components4.default.div`
   border-right: 1px solid var(--cpl-sidebar-border-color);
   border-bottom: 1px solid var(--cpl-sidebar-border-color);
 `;
-var StickyCloseButton = import_styled_components4.default.div`
+var StickyCloseButton = import_styled_components5.default.div`
   z-index: 10;
   position: sticky;
   top: 0;
   display: flex;
   justify-content: flex-end;
-  padding: ${import_eds_tokens4.tokens.spacings.comfortable.xx_small};
+  padding: ${import_eds_tokens5.tokens.spacings.comfortable.xx_small};
   background-color: var(--cpl-ui-background-temporary-nav);
   border-bottom: ${({ $showBorder }) => $showBorder ? "1px solid var(--cpl-divider-color)" : "0"};
 `;
@@ -457,10 +501,10 @@ var StickyCloseButton = import_styled_components4.default.div`
 // src/UserMenu/UserMenu.tsx
 var import_eds_core_react6 = require("@equinor/eds-core-react");
 var import_eds_icons5 = require("@equinor/eds-icons");
-var import_eds_tokens5 = require("@equinor/eds-tokens");
+var import_eds_tokens6 = require("@equinor/eds-tokens");
 var import_react2 = require("react");
-var import_styled_components5 = __toESM(require("styled-components"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_styled_components6 = __toESM(require("styled-components"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function UserMenu({ user, logout, settingsLink, children }) {
   var _a, _b, _c, _d, _e;
   const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
@@ -473,20 +517,20 @@ function UserMenu({ user, logout, settingsLink, children }) {
   };
   const LogOutMenuItem = () => {
     if (typeof logout === "string") {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_eds_core_react6.Menu.Item, { as: "a", href: logout, className: "menu-item", id: "logout-button", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons5.log_out }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Log out" })
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_eds_core_react6.Menu.Item, { as: "a", href: logout, className: "menu-item", id: "logout-button", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons5.log_out }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Log out" })
       ] });
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_eds_core_react6.Menu.Item, { as: "button", onClick: logout, className: "menu-item", id: "logout-button", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons5.log_out }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Log out" })
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_eds_core_react6.Menu.Item, { as: "button", onClick: logout, className: "menu-item", id: "logout-button", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons5.log_out }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Log out" })
       ] });
     }
   };
   const firstLetter = (_c = (_b = (_a = user == null ? void 0 : user.email) == null ? void 0 : _a[0]) == null ? void 0 : _b.toUpperCase()) != null ? _c : "-";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       StyledUserButton,
       {
         id: "user-button",
@@ -499,7 +543,7 @@ function UserMenu({ user, logout, settingsLink, children }) {
         children: firstLetter
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       MenuWrapper,
       {
         id: "user-menu",
@@ -509,16 +553,16 @@ function UserMenu({ user, logout, settingsLink, children }) {
         anchorEl,
         style: { padding: 0, paddingBottom: 2 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(IconAndTextWrapper, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LetterCircle, { children: firstLetter }),
-            isOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontWeight: "bold", lineHeight: 0.9, marginBottom: 2 }, children: (_d = user == null ? void 0 : user.name) != null ? _d : "-" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: (_e = user == null ? void 0 : user.email) != null ? _e : "-" })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(IconAndTextWrapper, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LetterCircle, { children: firstLetter }),
+            isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontWeight: "bold", lineHeight: 0.9, marginBottom: 2 }, children: (_d = user == null ? void 0 : user.name) != null ? _d : "-" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: (_e = user == null ? void 0 : user.email) != null ? _e : "-" })
             ] })
           ] }),
-          settingsLink && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_eds_core_react6.Menu.Item, { as: "a", href: settingsLink, className: "menu-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons5.settings }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Settings" })
+          settingsLink && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_eds_core_react6.Menu.Item, { as: "a", href: settingsLink, className: "menu-item", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons5.settings }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Settings" })
           ] }),
           LogOutMenuItem(),
           children
@@ -527,25 +571,25 @@ function UserMenu({ user, logout, settingsLink, children }) {
     )
   ] });
 }
-var MenuWrapper = (0, import_styled_components5.default)(import_eds_core_react6.Menu)`
-  border-radius: ${import_eds_tokens5.tokens.shape.corners.borderRadius};
-  margin-top: ${import_eds_tokens5.tokens.spacings.comfortable.small};
-  margin-bottom: -${import_eds_tokens5.tokens.spacings.comfortable.small};
-  padding-bottom: ${import_eds_tokens5.tokens.spacings.comfortable.small};
+var MenuWrapper = (0, import_styled_components6.default)(import_eds_core_react6.Menu)`
+  border-radius: ${import_eds_tokens6.tokens.shape.corners.borderRadius};
+  margin-top: ${import_eds_tokens6.tokens.spacings.comfortable.small};
+  margin-bottom: -${import_eds_tokens6.tokens.spacings.comfortable.small};
+  padding-bottom: ${import_eds_tokens6.tokens.spacings.comfortable.small};
   padding-left: 0;
   padding-right: 0;
-  padding-top: ${import_eds_tokens5.tokens.spacings.comfortable.small};
+  padding-top: ${import_eds_tokens6.tokens.spacings.comfortable.small};
   width: 315px;
   background: var(--cpl-ui-background-temporary-nav, #fff);
-  color: ${import_eds_tokens5.tokens.colors.text.static_icons__default.rgba};
+  color: ${import_eds_tokens6.tokens.colors.text.static_icons__default.rgba};
   .menu-item {
     align-items: center;
     display: flex;
-    gap: ${import_eds_tokens5.tokens.spacings.comfortable.medium};
+    gap: ${import_eds_tokens6.tokens.spacings.comfortable.medium};
     opacity: 0.85;
-    padding: ${import_eds_tokens5.tokens.spacings.comfortable.small} ${import_eds_tokens5.tokens.spacings.comfortable.large};
+    padding: ${import_eds_tokens6.tokens.spacings.comfortable.small} ${import_eds_tokens6.tokens.spacings.comfortable.large};
     svg {
       opacity: 0.7;
@@ -560,7 +604,7 @@ var MenuWrapper = (0, import_styled_components5.default)(import_eds_core_react6.
     }
   }
 `;
-var LetterCircle = import_styled_components5.default.span`
+var LetterCircle = import_styled_components6.default.span`
   align-items: center;
   border-radius: 1000px;
   display: flex;
@@ -569,16 +613,16 @@ var LetterCircle = import_styled_components5.default.span`
   height: 32px;
   justify-content: center;
   width: 32px;
-  background-color: ${import_eds_tokens5.tokens.colors.interactive.primary__resting.rgba};
-  color: ${import_eds_tokens5.tokens.colors.text.static_icons__primary_white.rgba};
+  background-color: ${import_eds_tokens6.tokens.colors.interactive.primary__resting.rgba};
+  color: ${import_eds_tokens6.tokens.colors.text.static_icons__primary_white.rgba};
 `;
-var StyledUserButton = (0, import_styled_components5.default)(import_eds_core_react6.Button)`
+var StyledUserButton = (0, import_styled_components6.default)(import_eds_core_react6.Button)`
   margin-left: 12px;
   font-weight: bold;
   width: 32px;
   height: 32px;
 `;
-var IconAndTextWrapper = (0, import_styled_components5.default)(import_eds_core_react6.Menu.Item)`
+var IconAndTextWrapper = (0, import_styled_components6.default)(import_eds_core_react6.Menu.Item)`
   display: flex;
   gap: 12px;
   padding: 12px 20px;
@@ -594,6 +638,7 @@ var IconAndTextWrapper = (0, import_styled_components5.default)(import_eds_core_
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FeedbackLink,
+  MenuHeader,
   SideMenu,
   StyledLink,
   TopBar,

package/dist/index.mjs CHANGED Viewed

@@ -95,24 +95,49 @@ function FeedbackLink({ link, subject, body }) {
   );
 }
+// src/SideMenu/components/MenuHeader.tsx
+import { tokens as tokens2 } from "@equinor/eds-tokens";
+import { styled as styled2 } from "styled-components";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function MenuHeader({ appName, icon }) {
+  return /* @__PURE__ */ jsx3(LogoWrapper, { children: /* @__PURE__ */ jsxs3(LogoStyle, { children: [
+    icon,
+    /* @__PURE__ */ jsx3("span", { children: appName })
+  ] }) });
+}
+var LogoWrapper = styled2.div`
+  padding: 0 ${tokens2.spacings.comfortable.medium} ${tokens2.spacings.comfortable.small}
+    ${tokens2.spacings.comfortable.medium};
+  text-align: center;
+  font-weight: 500;
+`;
+var LogoStyle = styled2.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens2.spacings.comfortable.small};
+  justify-content: center;
+  text-align: center;
+`;
 // src/SideMenu/SideMenu.tsx
 import { Button as Button2, Divider, Icon as Icon4, Typography as Typography2 } from "@equinor/eds-core-react";
 import { collapse } from "@equinor/eds-icons";
-import { tokens as tokens4 } from "@equinor/eds-tokens";
+import { tokens as tokens5 } from "@equinor/eds-tokens";
 import { useCallback, useEffect, useRef, useState } from "react";
-import styled4 from "styled-components";
+import styled5 from "styled-components";
 // src/SideMenu/components/MenuList.tsx
 import { Accordion } from "@equinor/eds-core-react";
-import { tokens as tokens3 } from "@equinor/eds-tokens";
-import { styled as styled3 } from "styled-components";
+import { tokens as tokens4 } from "@equinor/eds-tokens";
+import { styled as styled4 } from "styled-components";
 // src/SideMenu/components/MenuLink.tsx
 import { Icon as Icon3 } from "@equinor/eds-core-react";
 import { external_link as external_link2 } from "@equinor/eds-icons";
-import { tokens as tokens2 } from "@equinor/eds-tokens";
+import { tokens as tokens3 } from "@equinor/eds-tokens";
 import { usePathname } from "next/navigation";
-import { styled as styled2 } from "styled-components";
+import { styled as styled3 } from "styled-components";
 // src/SideMenu/useAppUrlByNameAndEnvironment.ts
 function useAppUrlByNameAndEnvironment(appName, currentEnvironment, appUrls) {
@@ -126,7 +151,7 @@ function useAppUrlByNameAndEnvironment(appName, currentEnvironment, appUrls) {
 }
 // src/SideMenu/components/MenuLink.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function MenuLink({
   item,
   environment,
@@ -138,15 +163,15 @@ function MenuLink({
   const url = (_b = item == null ? void 0 : item.url) != null ? _b : urlByNameAndEnvironment;
   const pathName = usePathname();
   let isActive = !item.external && pathName == item.url;
-  const linkContent = /* @__PURE__ */ jsxs3("span", { children: [
+  const linkContent = /* @__PURE__ */ jsxs4("span", { children: [
     item.name,
-    item.external && /* @__PURE__ */ jsx3(Icon3, { data: external_link2, size: 16 })
+    item.external && /* @__PURE__ */ jsx4(Icon3, { data: external_link2, size: 16 })
   ] });
   if (item.external) {
-    return /* @__PURE__ */ jsx3(StyledLink2, { href: url, target: "_blank", rel: "noopener noreferrer", children: linkContent });
+    return /* @__PURE__ */ jsx4(StyledLink2, { href: url, target: "_blank", rel: "noopener noreferrer", children: linkContent });
   }
   if (LinkComponent) {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       StyledLink2,
       {
         as: LinkComponent,
@@ -158,16 +183,17 @@ function MenuLink({
     );
   }
   isActive = typeof window !== "undefined" ? window.location.pathname === item.url : false;
-  return /* @__PURE__ */ jsx3(StyledLink2, { href: url, $active: isActive, children: linkContent });
+  return /* @__PURE__ */ jsx4(StyledLink2, { href: url, $active: isActive, children: linkContent });
 }
-var StyledLink2 = styled2.a`
+var StyledLink2 = styled3.a`
   text-decoration: none;
   padding: 12px 16px 12px 19px;
   display: inline-block;
   width: 100%;
-  color: ${tokens2.colors.interactive.secondary__resting.rgba};
-  background-color: ${({ $active }) => $active ? tokens2.colors.interactive.primary__selected_highlight.rgba : "transparent"};
+  color: ${tokens3.colors.interactive.secondary__resting.rgba};
+  background-color: ${({ $active }) => $active ? tokens3.colors.interactive.primary__selected_highlight.rgba : "transparent"};
   font-weight: ${({ $active }) => $active ? 700 : 400};
+  font-size: 0.875rem;
   &:hover {
     //TODO: check hover color for dark theme with designer when back
@@ -177,50 +203,69 @@ var StyledLink2 = styled2.a`
   &:focus-visible {
     outline-offset: -2px;
   }
+  span {
+    align-items: center;
+    display: flex;
+    gap: 1rem;
+    justify-content: space-between;
+    font-size: 0.875rem;
+  }
+  span svg {
+    opacity: 60%;
+  }
 `;
 // src/SideMenu/components/MenuList.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function MenuList({ items, currentEnvironment, appUrls, onToggleMenuGroup }) {
-  return /* @__PURE__ */ jsx4("ul", { children: items.map((menuItem) => {
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function MenuList({
+  items,
+  currentEnvironment,
+  appUrls,
+  onToggleMenuGroup,
+  linkComponent
+}) {
+  return /* @__PURE__ */ jsx5("ul", { children: items.map((menuItem) => {
     if (isMenuItemGroup(menuItem)) {
-      return /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(Accordion, { children: /* @__PURE__ */ jsxs4(AccordionItem, { isExpanded: menuItem.isExpanded, children: [
-        /* @__PURE__ */ jsx4(Accordion.Header, { onToggle: onToggleMenuGroup, children: menuItem.title }),
-        /* @__PURE__ */ jsx4(Accordion.Panel, { "aria-label": `Links for ${menuItem.title}`, children: /* @__PURE__ */ jsx4("ul", { children: menuItem.items.map((item) => /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(Accordion, { children: /* @__PURE__ */ jsxs5(AccordionItem, { isExpanded: menuItem.isExpanded, children: [
+        /* @__PURE__ */ jsx5(Accordion.Header, { onToggle: onToggleMenuGroup, children: menuItem.title }),
+        /* @__PURE__ */ jsx5(Accordion.Panel, { "aria-label": `Links for ${menuItem.title}`, children: /* @__PURE__ */ jsx5("ul", { children: menuItem.items.map((item) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(
           MenuLink,
           {
             item,
             environment: currentEnvironment,
-            appUrls
+            appUrls,
+            linkComponent
           }
         ) }, menuItem.title + "-" + item.name)) }) })
       ] }, menuItem.title) }, menuItem.title) }, menuItem.title);
     } else {
-      return /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(MenuLink, { item: menuItem, environment: currentEnvironment, appUrls }) }, menuItem.name);
+      return /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(
+        MenuLink,
+        {
+          item: menuItem,
+          environment: currentEnvironment,
+          appUrls,
+          linkComponent
+        }
+      ) }, menuItem.name);
     }
   }) });
 }
 function isMenuItemGroup(item) {
   return typeof item === "object" && "title" in item && "items" in item;
 }
-var AccordionItem = styled3(Accordion.Item)`
+var AccordionItem = styled4(Accordion.Item)`
   a {
     display: block;
-    padding: 12px ${tokens3.spacings.comfortable.medium} 12px ${tokens3.spacings.comfortable.x_large};
-  }
-  a span {
-    align-items: center;
-    display: flex;
-    gap: 1rem;
-    justify-content: space-between;
-    font-size: 0.875rem;
+    padding: 12px ${tokens4.spacings.comfortable.medium} 12px ${tokens4.spacings.comfortable.x_large};
   }
   h2 {
     background: transparent;
     border: 0;
-    color: ${tokens3.colors.interactive.secondary__resting.rgba};
+    color: ${tokens4.colors.interactive.secondary__resting.rgba};
   }
   h2 + div {
@@ -233,13 +278,13 @@ var AccordionItem = styled3(Accordion.Item)`
   h2 button svg {
     width: 14px;
     height: 14px;
-    margin-right: ${tokens3.spacings.comfortable.x_small};
+    margin-right: ${tokens4.spacings.comfortable.x_small};
     transform: rotate(-90deg);
-    fill: ${tokens3.colors.interactive.secondary__resting.rgba};
+    fill: ${tokens4.colors.interactive.secondary__resting.rgba};
   }
   h2 button span {
-    color: ${tokens3.colors.interactive.secondary__resting.rgba};
+    color: ${tokens4.colors.interactive.secondary__resting.rgba};
     font-weight: 700;
     font-size: 0.875rem;
   }
@@ -248,10 +293,6 @@ var AccordionItem = styled3(Accordion.Item)`
     transform: rotate(180deg);
   }
-  li a svg {
-    opacity: 60%;
-  }
   h2 button:hover,
   li a:hover {
     background-color: var(--cpl-sidebar-hover-color);
@@ -263,7 +304,7 @@ var AccordionItem = styled3(Accordion.Item)`
 `;
 // src/SideMenu/SideMenu.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function SideMenu({
   isOpen,
   onToggle,
@@ -273,7 +314,8 @@ function SideMenu({
   currentEnvironment,
   titleOtherMenuItems,
   otherMenuItems,
-  appUrls
+  appUrls,
+  linkComponent
 }) {
   var _a;
   const width = "268px";
@@ -307,46 +349,47 @@ function SideMenu({
       return () => element.removeEventListener("scroll", handleScroll);
     }
   }, [handleScroll]);
-  return /* @__PURE__ */ jsx5(Sidebar, { $isOpen: isOpen, width: isOpen ? width : "", children: /* @__PURE__ */ jsxs5(InnerWrapper, { ref: containerRef, children: [
-    /* @__PURE__ */ jsxs5("div", { children: [
-      /* @__PURE__ */ jsx5(StickyCloseButton, { $showBorder: hasOverflow && scrolledDown, children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(Sidebar, { $isOpen: isOpen, $width: isOpen ? width : "", children: /* @__PURE__ */ jsxs6(InnerWrapper, { ref: containerRef, $width: width, children: [
+    /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsx6(StickyCloseButton, { $showBorder: hasOverflow && scrolledDown, children: /* @__PURE__ */ jsx6(
         Button2,
         {
           variant: "ghost_icon",
           color: "secondary",
           "aria-label": "Toggle side menu",
           onClick: () => onToggle(!isOpen),
-          children: /* @__PURE__ */ jsx5(Icon4, { data: collapse, size: 24 })
+          children: /* @__PURE__ */ jsx6(Icon4, { data: collapse, size: 24 })
         }
       ) }),
       logoElement,
-      /* @__PURE__ */ jsxs5("nav", { children: [
-        /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsxs6("nav", { children: [
+        /* @__PURE__ */ jsx6(
           MenuList,
           {
             items: mainMenuItems,
             currentEnvironment,
             appUrls,
-            onToggleMenuGroup: checkOverflow
+            onToggleMenuGroup: checkOverflow,
+            linkComponent
           }
         ),
-        otherMenuItems && otherMenuItems.length > 0 && /* @__PURE__ */ jsxs5(Fragment, { children: [
-          /* @__PURE__ */ jsx5(StyledDivider, {}),
-          /* @__PURE__ */ jsxs5("div", { children: [
-            /* @__PURE__ */ jsx5(
+        otherMenuItems && otherMenuItems.length > 0 && /* @__PURE__ */ jsxs6(Fragment, { children: [
+          /* @__PURE__ */ jsx6(StyledDivider, {}),
+          /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsx6(
               Typography2,
               {
                 variant: "label",
                 group: "navigation",
                 as: "h2",
                 style: {
-                  color: tokens4.colors.interactive.secondary__resting.rgba,
+                  color: tokens5.colors.interactive.secondary__resting.rgba,
                   padding: "12px 19px 4px 19px"
                 },
                 children: (_a = titleOtherMenuItems == null ? void 0 : titleOtherMenuItems.toUpperCase()) != null ? _a : "OTHER SOLUTIONS"
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               MenuList,
               {
                 items: otherMenuItems,
@@ -358,17 +401,17 @@ function SideMenu({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsx5(StyledDivider, {})
+      /* @__PURE__ */ jsx6(StyledDivider, {})
     ] }),
     versionInfo
   ] }) });
 }
-var StyledDivider = styled4(Divider)`
+var StyledDivider = styled5(Divider)`
   background-color: var(--cpl-divider-color);
   margin: 8px 0;
 `;
-var Sidebar = styled4.div`
-  width: ${(props) => props.$isOpen ? props.width : "0px"};
+var Sidebar = styled5.div`
+  width: ${(props) => props.$isOpen ? props.$width : "0px"};
   opacity: ${(props) => props.$isOpen ? 1 : 0};
   transition:
     width 0.5s,
@@ -390,12 +433,12 @@ var Sidebar = styled4.div`
     box-sizing: border-box;
   }
 `;
-var InnerWrapper = styled4.div`
+var InnerWrapper = styled5.div`
   overflow: auto;
   background: var(--cpl-ui-background-temporary-nav);
   padding: 0;
   height: 100%;
-  width: ${(props) => props.width};
+  width: ${(props) => props.$width};
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -403,13 +446,13 @@ var InnerWrapper = styled4.div`
   border-right: 1px solid var(--cpl-sidebar-border-color);
   border-bottom: 1px solid var(--cpl-sidebar-border-color);
 `;
-var StickyCloseButton = styled4.div`
+var StickyCloseButton = styled5.div`
   z-index: 10;
   position: sticky;
   top: 0;
   display: flex;
   justify-content: flex-end;
-  padding: ${tokens4.spacings.comfortable.xx_small};
+  padding: ${tokens5.spacings.comfortable.xx_small};
   background-color: var(--cpl-ui-background-temporary-nav);
   border-bottom: ${({ $showBorder }) => $showBorder ? "1px solid var(--cpl-divider-color)" : "0"};
 `;
@@ -417,10 +460,10 @@ var StickyCloseButton = styled4.div`
 // src/UserMenu/UserMenu.tsx
 import { Button as Button3, Icon as Icon5, Menu } from "@equinor/eds-core-react";
 import { log_out, settings } from "@equinor/eds-icons";
-import { tokens as tokens5 } from "@equinor/eds-tokens";
+import { tokens as tokens6 } from "@equinor/eds-tokens";
 import { useState as useState2 } from "react";
-import styled5 from "styled-components";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import styled6 from "styled-components";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function UserMenu({ user, logout, settingsLink, children }) {
   var _a, _b, _c, _d, _e;
   const [isOpen, setIsOpen] = useState2(false);
@@ -433,20 +476,20 @@ function UserMenu({ user, logout, settingsLink, children }) {
   };
   const LogOutMenuItem = () => {
     if (typeof logout === "string") {
-      return /* @__PURE__ */ jsxs6(Menu.Item, { as: "a", href: logout, className: "menu-item", id: "logout-button", children: [
-        /* @__PURE__ */ jsx6(Icon5, { data: log_out }),
-        /* @__PURE__ */ jsx6("span", { children: "Log out" })
+      return /* @__PURE__ */ jsxs7(Menu.Item, { as: "a", href: logout, className: "menu-item", id: "logout-button", children: [
+        /* @__PURE__ */ jsx7(Icon5, { data: log_out }),
+        /* @__PURE__ */ jsx7("span", { children: "Log out" })
       ] });
     } else {
-      return /* @__PURE__ */ jsxs6(Menu.Item, { as: "button", onClick: logout, className: "menu-item", id: "logout-button", children: [
-        /* @__PURE__ */ jsx6(Icon5, { data: log_out }),
-        /* @__PURE__ */ jsx6("span", { children: "Log out" })
+      return /* @__PURE__ */ jsxs7(Menu.Item, { as: "button", onClick: logout, className: "menu-item", id: "logout-button", children: [
+        /* @__PURE__ */ jsx7(Icon5, { data: log_out }),
+        /* @__PURE__ */ jsx7("span", { children: "Log out" })
       ] });
     }
   };
   const firstLetter = (_c = (_b = (_a = user == null ? void 0 : user.email) == null ? void 0 : _a[0]) == null ? void 0 : _b.toUpperCase()) != null ? _c : "-";
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx7(
       StyledUserButton,
       {
         id: "user-button",
@@ -459,7 +502,7 @@ function UserMenu({ user, logout, settingsLink, children }) {
         children: firstLetter
       }
     ),
-    /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsxs7(
       MenuWrapper,
       {
         id: "user-menu",
@@ -469,16 +512,16 @@ function UserMenu({ user, logout, settingsLink, children }) {
         anchorEl,
         style: { padding: 0, paddingBottom: 2 },
         children: [
-          /* @__PURE__ */ jsxs6(IconAndTextWrapper, { children: [
-            /* @__PURE__ */ jsx6(LetterCircle, { children: firstLetter }),
-            isOpen && /* @__PURE__ */ jsxs6("div", { children: [
-              /* @__PURE__ */ jsx6("div", { style: { fontWeight: "bold", lineHeight: 0.9, marginBottom: 2 }, children: (_d = user == null ? void 0 : user.name) != null ? _d : "-" }),
-              /* @__PURE__ */ jsx6("div", { children: (_e = user == null ? void 0 : user.email) != null ? _e : "-" })
+          /* @__PURE__ */ jsxs7(IconAndTextWrapper, { children: [
+            /* @__PURE__ */ jsx7(LetterCircle, { children: firstLetter }),
+            isOpen && /* @__PURE__ */ jsxs7("div", { children: [
+              /* @__PURE__ */ jsx7("div", { style: { fontWeight: "bold", lineHeight: 0.9, marginBottom: 2 }, children: (_d = user == null ? void 0 : user.name) != null ? _d : "-" }),
+              /* @__PURE__ */ jsx7("div", { children: (_e = user == null ? void 0 : user.email) != null ? _e : "-" })
             ] })
           ] }),
-          settingsLink && /* @__PURE__ */ jsxs6(Menu.Item, { as: "a", href: settingsLink, className: "menu-item", children: [
-            /* @__PURE__ */ jsx6(Icon5, { data: settings }),
-            /* @__PURE__ */ jsx6("span", { children: "Settings" })
+          settingsLink && /* @__PURE__ */ jsxs7(Menu.Item, { as: "a", href: settingsLink, className: "menu-item", children: [
+            /* @__PURE__ */ jsx7(Icon5, { data: settings }),
+            /* @__PURE__ */ jsx7("span", { children: "Settings" })
           ] }),
           LogOutMenuItem(),
           children
@@ -487,25 +530,25 @@ function UserMenu({ user, logout, settingsLink, children }) {
     )
   ] });
 }
-var MenuWrapper = styled5(Menu)`
-  border-radius: ${tokens5.shape.corners.borderRadius};
-  margin-top: ${tokens5.spacings.comfortable.small};
-  margin-bottom: -${tokens5.spacings.comfortable.small};
-  padding-bottom: ${tokens5.spacings.comfortable.small};
+var MenuWrapper = styled6(Menu)`
+  border-radius: ${tokens6.shape.corners.borderRadius};
+  margin-top: ${tokens6.spacings.comfortable.small};
+  margin-bottom: -${tokens6.spacings.comfortable.small};
+  padding-bottom: ${tokens6.spacings.comfortable.small};
   padding-left: 0;
   padding-right: 0;
-  padding-top: ${tokens5.spacings.comfortable.small};
+  padding-top: ${tokens6.spacings.comfortable.small};
   width: 315px;
   background: var(--cpl-ui-background-temporary-nav, #fff);
-  color: ${tokens5.colors.text.static_icons__default.rgba};
+  color: ${tokens6.colors.text.static_icons__default.rgba};
   .menu-item {
     align-items: center;
     display: flex;
-    gap: ${tokens5.spacings.comfortable.medium};
+    gap: ${tokens6.spacings.comfortable.medium};
     opacity: 0.85;
-    padding: ${tokens5.spacings.comfortable.small} ${tokens5.spacings.comfortable.large};
+    padding: ${tokens6.spacings.comfortable.small} ${tokens6.spacings.comfortable.large};
     svg {
       opacity: 0.7;
@@ -520,7 +563,7 @@ var MenuWrapper = styled5(Menu)`
     }
   }
 `;
-var LetterCircle = styled5.span`
+var LetterCircle = styled6.span`
   align-items: center;
   border-radius: 1000px;
   display: flex;
@@ -529,16 +572,16 @@ var LetterCircle = styled5.span`
   height: 32px;
   justify-content: center;
   width: 32px;
-  background-color: ${tokens5.colors.interactive.primary__resting.rgba};
-  color: ${tokens5.colors.text.static_icons__primary_white.rgba};
+  background-color: ${tokens6.colors.interactive.primary__resting.rgba};
+  color: ${tokens6.colors.text.static_icons__primary_white.rgba};
 `;
-var StyledUserButton = styled5(Button3)`
+var StyledUserButton = styled6(Button3)`
   margin-left: 12px;
   font-weight: bold;
   width: 32px;
   height: 32px;
 `;
-var IconAndTextWrapper = styled5(Menu.Item)`
+var IconAndTextWrapper = styled6(Menu.Item)`
   display: flex;
   gap: 12px;
   padding: 12px 20px;
@@ -553,6 +596,7 @@ var IconAndTextWrapper = styled5(Menu.Item)`
 `;
 export {
   FeedbackLink,
+  MenuHeader,
   SideMenu,
   StyledLink,
   TopBar,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/cpl-top-bar-react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -11,7 +11,7 @@
   "dependencies": {
     "@equinor/eds-icons": "^0.21.0",
     "@equinor/eds-tokens": "^0.9.2",
-    "@equinor/cpl-env-meta-bar-react": "0.1.0"
+    "@equinor/cpl-env-meta-bar-react": "0.1.1"
   },
   "devDependencies": {
     "@equinor/eds-core-react": "^0.42.5",