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

package/dist/index.d.mts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default from 'react';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import * as styled_components from 'styled-components';
-import * as react from 'react';
 
 interface FeedbackLinkProps {
     link: string;
@@ -15,6 +16,40 @@ interface FeedbackLinkProps {
  */
 declare function FeedbackLink({ link, subject, body }: FeedbackLinkProps): react_jsx_runtime.JSX.Element;
 
+type AppUrls = {
+    [appName: string]: {
+        dev: string;
+        test: string;
+        prod: string;
+    };
+};
+
+type MenuItems = MenuItem | MenuItemGroup;
+type MenuItem = {
+    name: string;
+    url?: string;
+    external?: boolean;
+    appName?: string;
+};
+type MenuItemGroup = {
+    title: string;
+    items: MenuItem[];
+    isExpanded?: boolean;
+};
+
+type SideMenuProps = {
+    isOpen: boolean;
+    onToggle: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    mainMenuItems: MenuItems[];
+    currentEnvironment: string;
+    appUrls: AppUrls;
+    titleOtherMenuItems?: string;
+    otherMenuItems?: MenuItems[];
+    logoElement?: JSX.Element;
+    versionInfo?: React__default.ReactNode;
+};
+declare function SideMenu({ isOpen, onToggle, mainMenuItems, logoElement, versionInfo, currentEnvironment, titleOtherMenuItems, otherMenuItems, appUrls, }: SideMenuProps): react_jsx_runtime.JSX.Element;
+
 interface TopBarProps {
     appName: string;
     logoLink: string;
@@ -34,7 +69,7 @@ interface TopBarProps {
  * and set the theme to 'dark'.
  */
 declare function TopBar({ appName, logoLink, sideMenuOpen, setSideMenuOpen, feedbackLink, documentationLink, documentationName, userMenu, logoPath, logoAlt, }: TopBarProps): react_jsx_runtime.JSX.Element;
-declare const StyledLink: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
+declare const StyledLink: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React$1.DetailedHTMLProps<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
 
 interface UserMenuProps {
     logout: string | (() => void);
@@ -47,4 +82,4 @@ interface UserMenuProps {
 }
 declare function UserMenu({ user, logout, settingsLink, children }: UserMenuProps): react_jsx_runtime.JSX.Element;
 
-export { FeedbackLink, StyledLink, TopBar, UserMenu };
+export { FeedbackLink, SideMenu, StyledLink, TopBar, UserMenu };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default from 'react';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import * as styled_components from 'styled-components';
-import * as react from 'react';
 
 interface FeedbackLinkProps {
     link: string;
@@ -15,6 +16,40 @@ interface FeedbackLinkProps {
  */
 declare function FeedbackLink({ link, subject, body }: FeedbackLinkProps): react_jsx_runtime.JSX.Element;
 
+type AppUrls = {
+    [appName: string]: {
+        dev: string;
+        test: string;
+        prod: string;
+    };
+};
+
+type MenuItems = MenuItem | MenuItemGroup;
+type MenuItem = {
+    name: string;
+    url?: string;
+    external?: boolean;
+    appName?: string;
+};
+type MenuItemGroup = {
+    title: string;
+    items: MenuItem[];
+    isExpanded?: boolean;
+};
+
+type SideMenuProps = {
+    isOpen: boolean;
+    onToggle: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    mainMenuItems: MenuItems[];
+    currentEnvironment: string;
+    appUrls: AppUrls;
+    titleOtherMenuItems?: string;
+    otherMenuItems?: MenuItems[];
+    logoElement?: JSX.Element;
+    versionInfo?: React__default.ReactNode;
+};
+declare function SideMenu({ isOpen, onToggle, mainMenuItems, logoElement, versionInfo, currentEnvironment, titleOtherMenuItems, otherMenuItems, appUrls, }: SideMenuProps): react_jsx_runtime.JSX.Element;
+
 interface TopBarProps {
     appName: string;
     logoLink: string;
@@ -34,7 +69,7 @@ interface TopBarProps {
  * and set the theme to 'dark'.
  */
 declare function TopBar({ appName, logoLink, sideMenuOpen, setSideMenuOpen, feedbackLink, documentationLink, documentationName, userMenu, logoPath, logoAlt, }: TopBarProps): react_jsx_runtime.JSX.Element;
-declare const StyledLink: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
+declare const StyledLink: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React$1.DetailedHTMLProps<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
 
 interface UserMenuProps {
     logout: string | (() => void);
@@ -47,4 +82,4 @@ interface UserMenuProps {
 }
 declare function UserMenu({ user, logout, settingsLink, children }: UserMenuProps): react_jsx_runtime.JSX.Element;
 
-export { FeedbackLink, StyledLink, TopBar, UserMenu };
+export { FeedbackLink, SideMenu, StyledLink, TopBar, UserMenu };

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   FeedbackLink: () => FeedbackLink,
+  SideMenu: () => SideMenu,
   StyledLink: () => StyledLink,
   TopBar: () => TopBar,
   UserMenu: () => UserMenu
@@ -63,7 +64,7 @@ function TopBar({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledEDSTopBar, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_eds_core_react.TopBar.Header, { style: { padding: 0 }, children: [
       hasSideMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        ThemedButton,
+        import_eds_core_react.Button,
         {
           variant: "ghost_icon",
           "aria-label": "menu action",
@@ -96,6 +97,10 @@ var AppNameContainer = import_styled_components.default.div`
   display: flex;
   gap: 1rem;
   align-items: center;
+
+  a {
+    text-decoration: none;
+  }
 `;
 var StyledTypography = (0, import_styled_components.default)(import_eds_core_react.Typography)`
   color: ${import_eds_tokens.tokens.colors.text.static_icons__default.rgba};
@@ -110,16 +115,7 @@ var StyledLink = import_styled_components.default.a`
   display: flex;
   align-items: center;
   gap: 0.3rem;
-  text-decoration: none;
   color: ${import_eds_tokens.tokens.colors.text.static_icons__default.rgba};
-`;
-var ThemedButton = (0, import_styled_components.default)(import_eds_core_react.Button)`
-  &:hover {
-    color: var(--button-hover);
-  }
-
-
-
 `;
 
 // src/FeedbackLink/FeedbackLink.tsx
@@ -139,17 +135,336 @@ function FeedbackLink({ link, subject, body }) {
   );
 }
 
-// src/UserMenu/UserMenu.tsx
+// 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_react = require("react");
+var import_styled_components4 = __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");
+
+// 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_react = require("react");
-var import_styled_components2 = __toESM(require("styled-components"));
+var import_navigation = require("next/navigation");
+var import_styled_components2 = require("styled-components");
+
+// src/SideMenu/useAppUrlByNameAndEnvironment.ts
+function useAppUrlByNameAndEnvironment(appName, currentEnvironment, appUrls) {
+  if (!currentEnvironment || !appName) return "";
+  if (currentEnvironment === "local") {
+    currentEnvironment = "dev";
+  }
+  const configByEnvironment = appUrls[appName];
+  const appUrlInCurrentEnvironment = configByEnvironment[currentEnvironment];
+  return appUrlInCurrentEnvironment || "";
+}
+
+// src/SideMenu/components/MenuLink.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function MenuLink({
+  item,
+  environment,
+  appUrls,
+  linkComponent: LinkComponent
+}) {
+  var _a, _b;
+  const urlByNameAndEnvironment = (_a = useAppUrlByNameAndEnvironment(item.appName, environment, appUrls)) != null ? _a : "";
+  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: [
+    item.name,
+    item.external && /* @__PURE__ */ (0, import_jsx_runtime3.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 });
+  }
+  if (LinkComponent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      StyledLink2,
+      {
+        as: LinkComponent,
+        to: url,
+        href: url,
+        $active: isActive,
+        children: linkContent
+      }
+    );
+  }
+  isActive = typeof window !== "undefined" ? window.location.pathname === item.url : false;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledLink2, { href: url, $active: isActive, children: linkContent });
+}
+var StyledLink2 = import_styled_components2.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"};
+  font-weight: ${({ $active }) => $active ? 700 : 400};
+
+  &:hover {
+    //TODO: check hover color for dark theme with designer when back
+    background: var(--cpl-sidebar-hover-color);
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`;
+
+// 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) => {
+    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)(
+          MenuLink,
+          {
+            item,
+            environment: currentEnvironment,
+            appUrls
+          }
+        ) }, 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);
+    }
+  }) });
+}
+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)`
+  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;
+  }
+
+  h2 {
+    background: transparent;
+    border: 0;
+    color: ${import_eds_tokens3.tokens.colors.interactive.secondary__resting.rgba};
+  }
+
+  h2 + div {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    min-height: 3.5rem;
+  }
+
+  h2 button svg {
+    width: 14px;
+    height: 14px;
+    margin-right: ${import_eds_tokens3.tokens.spacings.comfortable.x_small};
+    transform: rotate(-90deg);
+    fill: ${import_eds_tokens3.tokens.colors.interactive.secondary__resting.rgba};
+  }
+
+  h2 button span {
+    color: ${import_eds_tokens3.tokens.colors.interactive.secondary__resting.rgba};
+    font-weight: 700;
+    font-size: 0.875rem;
+  }
+
+  h2 button[aria-expanded='true'] svg {
+    transform: rotate(180deg);
+  }
+
+  li a svg {
+    opacity: 60%;
+  }
+
+  h2 button:hover,
+  li a:hover {
+    background-color: var(--cpl-sidebar-hover-color);
+  }
+
+  h2 button:focus-visible {
+    outline-offset: -2px;
+  }
+`;
+
+// src/SideMenu/SideMenu.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function SideMenu({
+  isOpen,
+  onToggle,
+  mainMenuItems,
+  logoElement,
+  versionInfo,
+  currentEnvironment,
+  titleOtherMenuItems,
+  otherMenuItems,
+  appUrls
+}) {
+  var _a;
+  const width = "268px";
+  const [hasOverflow, setHasOverflow] = (0, import_react.useState)(false);
+  const [scrolledDown, setScrolledDown] = (0, import_react.useState)(false);
+  const containerRef = (0, import_react.useRef)(null);
+  const checkOverflow = (0, import_react.useCallback)(() => {
+    requestAnimationFrame(() => {
+      const element = containerRef.current;
+      if (element) {
+        setHasOverflow(element.scrollHeight > element.clientHeight);
+      }
+    });
+  }, []);
+  const handleScroll = (0, import_react.useCallback)(() => {
+    const element = containerRef.current;
+    if (element) {
+      setScrolledDown(element.scrollTop > 0);
+    }
+  }, []);
+  (0, import_react.useEffect)(() => {
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => window.removeEventListener("resize", checkOverflow);
+  }, [checkOverflow]);
+  (0, import_react.useEffect)(() => {
+    const element = containerRef.current;
+    if (element) {
+      element.addEventListener("scroll", handleScroll);
+      handleScroll();
+      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)(
+        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 })
+        }
+      ) }),
+      logoElement,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("nav", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          MenuList,
+          {
+            items: mainMenuItems,
+            currentEnvironment,
+            appUrls,
+            onToggleMenuGroup: checkOverflow
+          }
+        ),
+        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)(
+              import_eds_core_react5.Typography,
+              {
+                variant: "label",
+                group: "navigation",
+                as: "h2",
+                style: {
+                  color: import_eds_tokens4.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)(
+              MenuList,
+              {
+                items: otherMenuItems,
+                currentEnvironment,
+                appUrls,
+                onToggleMenuGroup: checkOverflow
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledDivider, {})
+    ] }),
+    versionInfo
+  ] }) });
+}
+var StyledDivider = (0, import_styled_components4.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"};
+  opacity: ${(props) => props.$isOpen ? 1 : 0};
+  transition:
+    width 0.5s,
+    opacity 0.5s;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+`;
+var InnerWrapper = import_styled_components4.default.div`
+  overflow: auto;
+  background: var(--cpl-ui-background-temporary-nav);
+  padding: 0;
+  height: 100%;
+  width: ${(props) => props.width};
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  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`
+  z-index: 10;
+  position: sticky;
+  top: 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: ${import_eds_tokens4.tokens.spacings.comfortable.xx_small};
+  background-color: var(--cpl-ui-background-temporary-nav);
+  border-bottom: ${({ $showBorder }) => $showBorder ? "1px solid var(--cpl-divider-color)" : "0"};
+`;
+
+// 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_react2 = require("react");
+var import_styled_components5 = __toESM(require("styled-components"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function UserMenu({ user, logout, settingsLink, children }) {
   var _a, _b, _c, _d, _e;
-  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-  const [anchorEl, setAnchorEl] = (0, import_react.useState)(null);
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const [anchorEl, setAnchorEl] = (0, import_react2.useState)(null);
   const openMenu = () => {
     setIsOpen(true);
   };
@@ -158,20 +473,20 @@ function UserMenu({ user, logout, settingsLink, children }) {
   };
   const LogOutMenuItem = () => {
     if (typeof logout === "string") {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_eds_core_react3.Menu.Item, { as: "a", href: logout, className: "menu-item", id: "logout-button", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_eds_core_react3.Icon, { data: import_eds_icons3.log_out }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Log out" })
+      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" })
       ] });
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_eds_core_react3.Menu.Item, { as: "button", onClick: logout, className: "menu-item", id: "logout-button", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_eds_core_react3.Icon, { data: import_eds_icons3.log_out }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Log out" })
+      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" })
       ] });
     }
   };
   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_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       StyledUserButton,
       {
         id: "user-button",
@@ -184,7 +499,7 @@ function UserMenu({ user, logout, settingsLink, children }) {
         children: firstLetter
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       MenuWrapper,
       {
         id: "user-menu",
@@ -194,16 +509,16 @@ function UserMenu({ user, logout, settingsLink, children }) {
         anchorEl,
         style: { padding: 0, paddingBottom: 2 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(IconAndTextWrapper, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LetterCircle, { children: firstLetter }),
-            isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: "bold", lineHeight: 0.9, marginBottom: 2 }, children: (_d = user == null ? void 0 : user.name) != null ? _d : "-" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: (_e = user == null ? void 0 : user.email) != null ? _e : "-" })
+          /* @__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 : "-" })
             ] })
           ] }),
-          settingsLink && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_eds_core_react3.Menu.Item, { as: "a", href: settingsLink, className: "menu-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_eds_core_react3.Icon, { data: import_eds_icons3.settings }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Settings" })
+          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" })
           ] }),
           LogOutMenuItem(),
           children
@@ -212,25 +527,25 @@ function UserMenu({ user, logout, settingsLink, children }) {
     )
   ] });
 }
-var MenuWrapper = (0, import_styled_components2.default)(import_eds_core_react3.Menu)`
-  border-radius: ${import_eds_tokens2.tokens.shape.corners.borderRadius};
-  margin-top: ${import_eds_tokens2.tokens.spacings.comfortable.small};
-  margin-bottom: -${import_eds_tokens2.tokens.spacings.comfortable.small};
-  padding-bottom: ${import_eds_tokens2.tokens.spacings.comfortable.small};
+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};
   padding-left: 0;
   padding-right: 0;
-  padding-top: ${import_eds_tokens2.tokens.spacings.comfortable.small};
+  padding-top: ${import_eds_tokens5.tokens.spacings.comfortable.small};
   width: 315px;
 
-  background: var(--ui-background-temporary-nav, #fff);
-  color: ${import_eds_tokens2.tokens.colors.text.static_icons__default.rgba};
+  background: var(--cpl-ui-background-temporary-nav, #fff);
+  color: ${import_eds_tokens5.tokens.colors.text.static_icons__default.rgba};
 
   .menu-item {
     align-items: center;
     display: flex;
-    gap: ${import_eds_tokens2.tokens.spacings.comfortable.medium};
+    gap: ${import_eds_tokens5.tokens.spacings.comfortable.medium};
     opacity: 0.85;
-    padding: ${import_eds_tokens2.tokens.spacings.comfortable.small} ${import_eds_tokens2.tokens.spacings.comfortable.large};
+    padding: ${import_eds_tokens5.tokens.spacings.comfortable.small} ${import_eds_tokens5.tokens.spacings.comfortable.large};
 
     svg {
       opacity: 0.7;
@@ -238,14 +553,14 @@ var MenuWrapper = (0, import_styled_components2.default)(import_eds_core_react3.
     &:hover {
       opacity: 1;
       background-color: transparent;
-     
+
       svg {
         opacity: 1;
       }
     }
   }
 `;
-var LetterCircle = import_styled_components2.default.span`
+var LetterCircle = import_styled_components5.default.span`
   align-items: center;
   border-radius: 1000px;
   display: flex;
@@ -254,20 +569,16 @@ var LetterCircle = import_styled_components2.default.span`
   height: 32px;
   justify-content: center;
   width: 32px;
-  background-color: ${import_eds_tokens2.tokens.colors.interactive.primary__resting.rgba};
-  color: ${import_eds_tokens2.tokens.colors.text.static_icons__primary_white.rgba};
+  background-color: ${import_eds_tokens5.tokens.colors.interactive.primary__resting.rgba};
+  color: ${import_eds_tokens5.tokens.colors.text.static_icons__primary_white.rgba};
 `;
-var StyledUserButton = (0, import_styled_components2.default)(import_eds_core_react3.Button)`
+var StyledUserButton = (0, import_styled_components5.default)(import_eds_core_react6.Button)`
   margin-left: 12px;
   font-weight: bold;
   width: 32px;
   height: 32px;
-
-  &:hover {
-    background-color: var(--button-hover, rgba(0, 79, 85, 1));
-  }
 `;
-var IconAndTextWrapper = (0, import_styled_components2.default)(import_eds_core_react3.Menu.Item)`
+var IconAndTextWrapper = (0, import_styled_components5.default)(import_eds_core_react6.Menu.Item)`
   display: flex;
   gap: 12px;
   padding: 12px 20px;
@@ -283,6 +594,7 @@ var IconAndTextWrapper = (0, import_styled_components2.default)(import_eds_core_
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FeedbackLink,
+  SideMenu,
   StyledLink,
   TopBar,
   UserMenu

package/dist/index.mjs

@@ -24,7 +24,7 @@ function TopBar({
   return /* @__PURE__ */ jsxs(StyledEDSTopBar, { children: [
     /* @__PURE__ */ jsxs(EDSTopBar.Header, { style: { padding: 0 }, children: [
       hasSideMenu && /* @__PURE__ */ jsx(
-        ThemedButton,
+        Button,
         {
           variant: "ghost_icon",
           "aria-label": "menu action",
@@ -57,6 +57,10 @@ var AppNameContainer = styled.div`
   display: flex;
   gap: 1rem;
   align-items: center;
+
+  a {
+    text-decoration: none;
+  }
 `;
 var StyledTypography = styled(Typography)`
   color: ${tokens.colors.text.static_icons__default.rgba};
@@ -71,16 +75,7 @@ var StyledLink = styled.a`
   display: flex;
   align-items: center;
   gap: 0.3rem;
-  text-decoration: none;
   color: ${tokens.colors.text.static_icons__default.rgba};
-`;
-var ThemedButton = styled(Button)`
-  &:hover {
-    color: var(--button-hover);
-  }
-
-
-
 `;
 
 // src/FeedbackLink/FeedbackLink.tsx
@@ -100,17 +95,336 @@ function FeedbackLink({ link, subject, body }) {
   );
 }
 
+// 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 { useCallback, useEffect, useRef, useState } from "react";
+import styled4 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";
+
+// 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 { usePathname } from "next/navigation";
+import { styled as styled2 } from "styled-components";
+
+// src/SideMenu/useAppUrlByNameAndEnvironment.ts
+function useAppUrlByNameAndEnvironment(appName, currentEnvironment, appUrls) {
+  if (!currentEnvironment || !appName) return "";
+  if (currentEnvironment === "local") {
+    currentEnvironment = "dev";
+  }
+  const configByEnvironment = appUrls[appName];
+  const appUrlInCurrentEnvironment = configByEnvironment[currentEnvironment];
+  return appUrlInCurrentEnvironment || "";
+}
+
+// src/SideMenu/components/MenuLink.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function MenuLink({
+  item,
+  environment,
+  appUrls,
+  linkComponent: LinkComponent
+}) {
+  var _a, _b;
+  const urlByNameAndEnvironment = (_a = useAppUrlByNameAndEnvironment(item.appName, environment, appUrls)) != null ? _a : "";
+  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: [
+    item.name,
+    item.external && /* @__PURE__ */ jsx3(Icon3, { data: external_link2, size: 16 })
+  ] });
+  if (item.external) {
+    return /* @__PURE__ */ jsx3(StyledLink2, { href: url, target: "_blank", rel: "noopener noreferrer", children: linkContent });
+  }
+  if (LinkComponent) {
+    return /* @__PURE__ */ jsx3(
+      StyledLink2,
+      {
+        as: LinkComponent,
+        to: url,
+        href: url,
+        $active: isActive,
+        children: linkContent
+      }
+    );
+  }
+  isActive = typeof window !== "undefined" ? window.location.pathname === item.url : false;
+  return /* @__PURE__ */ jsx3(StyledLink2, { href: url, $active: isActive, children: linkContent });
+}
+var StyledLink2 = styled2.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"};
+  font-weight: ${({ $active }) => $active ? 700 : 400};
+
+  &:hover {
+    //TODO: check hover color for dark theme with designer when back
+    background: var(--cpl-sidebar-hover-color);
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`;
+
+// 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) => {
+    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(
+          MenuLink,
+          {
+            item,
+            environment: currentEnvironment,
+            appUrls
+          }
+        ) }, 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);
+    }
+  }) });
+}
+function isMenuItemGroup(item) {
+  return typeof item === "object" && "title" in item && "items" in item;
+}
+var AccordionItem = styled3(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;
+  }
+
+  h2 {
+    background: transparent;
+    border: 0;
+    color: ${tokens3.colors.interactive.secondary__resting.rgba};
+  }
+
+  h2 + div {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    min-height: 3.5rem;
+  }
+
+  h2 button svg {
+    width: 14px;
+    height: 14px;
+    margin-right: ${tokens3.spacings.comfortable.x_small};
+    transform: rotate(-90deg);
+    fill: ${tokens3.colors.interactive.secondary__resting.rgba};
+  }
+
+  h2 button span {
+    color: ${tokens3.colors.interactive.secondary__resting.rgba};
+    font-weight: 700;
+    font-size: 0.875rem;
+  }
+
+  h2 button[aria-expanded='true'] svg {
+    transform: rotate(180deg);
+  }
+
+  li a svg {
+    opacity: 60%;
+  }
+
+  h2 button:hover,
+  li a:hover {
+    background-color: var(--cpl-sidebar-hover-color);
+  }
+
+  h2 button:focus-visible {
+    outline-offset: -2px;
+  }
+`;
+
+// src/SideMenu/SideMenu.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function SideMenu({
+  isOpen,
+  onToggle,
+  mainMenuItems,
+  logoElement,
+  versionInfo,
+  currentEnvironment,
+  titleOtherMenuItems,
+  otherMenuItems,
+  appUrls
+}) {
+  var _a;
+  const width = "268px";
+  const [hasOverflow, setHasOverflow] = useState(false);
+  const [scrolledDown, setScrolledDown] = useState(false);
+  const containerRef = useRef(null);
+  const checkOverflow = useCallback(() => {
+    requestAnimationFrame(() => {
+      const element = containerRef.current;
+      if (element) {
+        setHasOverflow(element.scrollHeight > element.clientHeight);
+      }
+    });
+  }, []);
+  const handleScroll = useCallback(() => {
+    const element = containerRef.current;
+    if (element) {
+      setScrolledDown(element.scrollTop > 0);
+    }
+  }, []);
+  useEffect(() => {
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => window.removeEventListener("resize", checkOverflow);
+  }, [checkOverflow]);
+  useEffect(() => {
+    const element = containerRef.current;
+    if (element) {
+      element.addEventListener("scroll", handleScroll);
+      handleScroll();
+      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(
+        Button2,
+        {
+          variant: "ghost_icon",
+          color: "secondary",
+          "aria-label": "Toggle side menu",
+          onClick: () => onToggle(!isOpen),
+          children: /* @__PURE__ */ jsx5(Icon4, { data: collapse, size: 24 })
+        }
+      ) }),
+      logoElement,
+      /* @__PURE__ */ jsxs5("nav", { children: [
+        /* @__PURE__ */ jsx5(
+          MenuList,
+          {
+            items: mainMenuItems,
+            currentEnvironment,
+            appUrls,
+            onToggleMenuGroup: checkOverflow
+          }
+        ),
+        otherMenuItems && otherMenuItems.length > 0 && /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx5(StyledDivider, {}),
+          /* @__PURE__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsx5(
+              Typography2,
+              {
+                variant: "label",
+                group: "navigation",
+                as: "h2",
+                style: {
+                  color: tokens4.colors.interactive.secondary__resting.rgba,
+                  padding: "12px 19px 4px 19px"
+                },
+                children: (_a = titleOtherMenuItems == null ? void 0 : titleOtherMenuItems.toUpperCase()) != null ? _a : "OTHER SOLUTIONS"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              MenuList,
+              {
+                items: otherMenuItems,
+                currentEnvironment,
+                appUrls,
+                onToggleMenuGroup: checkOverflow
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx5(StyledDivider, {})
+    ] }),
+    versionInfo
+  ] }) });
+}
+var StyledDivider = styled4(Divider)`
+  background-color: var(--cpl-divider-color);
+  margin: 8px 0;
+`;
+var Sidebar = styled4.div`
+  width: ${(props) => props.$isOpen ? props.width : "0px"};
+  opacity: ${(props) => props.$isOpen ? 1 : 0};
+  transition:
+    width 0.5s,
+    opacity 0.5s;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+`;
+var InnerWrapper = styled4.div`
+  overflow: auto;
+  background: var(--cpl-ui-background-temporary-nav);
+  padding: 0;
+  height: 100%;
+  width: ${(props) => props.width};
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-right: 1px solid var(--cpl-sidebar-border-color);
+  border-bottom: 1px solid var(--cpl-sidebar-border-color);
+`;
+var StickyCloseButton = styled4.div`
+  z-index: 10;
+  position: sticky;
+  top: 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: ${tokens4.spacings.comfortable.xx_small};
+  background-color: var(--cpl-ui-background-temporary-nav);
+  border-bottom: ${({ $showBorder }) => $showBorder ? "1px solid var(--cpl-divider-color)" : "0"};
+`;
+
 // src/UserMenu/UserMenu.tsx
-import { Button as Button2, Icon as Icon3, Menu } from "@equinor/eds-core-react";
+import { Button as Button3, Icon as Icon5, Menu } from "@equinor/eds-core-react";
 import { log_out, settings } from "@equinor/eds-icons";
-import { tokens as tokens2 } from "@equinor/eds-tokens";
-import { useState } from "react";
-import styled2 from "styled-components";
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { tokens as tokens5 } 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";
 function UserMenu({ user, logout, settingsLink, children }) {
   var _a, _b, _c, _d, _e;
-  const [isOpen, setIsOpen] = useState(false);
-  const [anchorEl, setAnchorEl] = useState(null);
+  const [isOpen, setIsOpen] = useState2(false);
+  const [anchorEl, setAnchorEl] = useState2(null);
   const openMenu = () => {
     setIsOpen(true);
   };
@@ -119,20 +433,20 @@ function UserMenu({ user, logout, settingsLink, children }) {
   };
   const LogOutMenuItem = () => {
     if (typeof logout === "string") {
-      return /* @__PURE__ */ jsxs3(Menu.Item, { as: "a", href: logout, className: "menu-item", id: "logout-button", children: [
-        /* @__PURE__ */ jsx3(Icon3, { data: log_out }),
-        /* @__PURE__ */ jsx3("span", { children: "Log out" })
+      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" })
       ] });
     } else {
-      return /* @__PURE__ */ jsxs3(Menu.Item, { as: "button", onClick: logout, className: "menu-item", id: "logout-button", children: [
-        /* @__PURE__ */ jsx3(Icon3, { data: log_out }),
-        /* @__PURE__ */ jsx3("span", { children: "Log out" })
+      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" })
       ] });
     }
   };
   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__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx6(
       StyledUserButton,
       {
         id: "user-button",
@@ -145,7 +459,7 @@ function UserMenu({ user, logout, settingsLink, children }) {
         children: firstLetter
       }
     ),
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs6(
       MenuWrapper,
       {
         id: "user-menu",
@@ -155,16 +469,16 @@ function UserMenu({ user, logout, settingsLink, children }) {
         anchorEl,
         style: { padding: 0, paddingBottom: 2 },
         children: [
-          /* @__PURE__ */ jsxs3(IconAndTextWrapper, { children: [
-            /* @__PURE__ */ jsx3(LetterCircle, { children: firstLetter }),
-            isOpen && /* @__PURE__ */ jsxs3("div", { children: [
-              /* @__PURE__ */ jsx3("div", { style: { fontWeight: "bold", lineHeight: 0.9, marginBottom: 2 }, children: (_d = user == null ? void 0 : user.name) != null ? _d : "-" }),
-              /* @__PURE__ */ jsx3("div", { children: (_e = user == null ? void 0 : user.email) != null ? _e : "-" })
+          /* @__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 : "-" })
             ] })
           ] }),
-          settingsLink && /* @__PURE__ */ jsxs3(Menu.Item, { as: "a", href: settingsLink, className: "menu-item", children: [
-            /* @__PURE__ */ jsx3(Icon3, { data: settings }),
-            /* @__PURE__ */ jsx3("span", { children: "Settings" })
+          settingsLink && /* @__PURE__ */ jsxs6(Menu.Item, { as: "a", href: settingsLink, className: "menu-item", children: [
+            /* @__PURE__ */ jsx6(Icon5, { data: settings }),
+            /* @__PURE__ */ jsx6("span", { children: "Settings" })
           ] }),
           LogOutMenuItem(),
           children
@@ -173,25 +487,25 @@ function UserMenu({ user, logout, settingsLink, children }) {
     )
   ] });
 }
-var MenuWrapper = styled2(Menu)`
-  border-radius: ${tokens2.shape.corners.borderRadius};
-  margin-top: ${tokens2.spacings.comfortable.small};
-  margin-bottom: -${tokens2.spacings.comfortable.small};
-  padding-bottom: ${tokens2.spacings.comfortable.small};
+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};
   padding-left: 0;
   padding-right: 0;
-  padding-top: ${tokens2.spacings.comfortable.small};
+  padding-top: ${tokens5.spacings.comfortable.small};
   width: 315px;
 
-  background: var(--ui-background-temporary-nav, #fff);
-  color: ${tokens2.colors.text.static_icons__default.rgba};
+  background: var(--cpl-ui-background-temporary-nav, #fff);
+  color: ${tokens5.colors.text.static_icons__default.rgba};
 
   .menu-item {
     align-items: center;
     display: flex;
-    gap: ${tokens2.spacings.comfortable.medium};
+    gap: ${tokens5.spacings.comfortable.medium};
     opacity: 0.85;
-    padding: ${tokens2.spacings.comfortable.small} ${tokens2.spacings.comfortable.large};
+    padding: ${tokens5.spacings.comfortable.small} ${tokens5.spacings.comfortable.large};
 
     svg {
       opacity: 0.7;
@@ -199,14 +513,14 @@ var MenuWrapper = styled2(Menu)`
     &:hover {
       opacity: 1;
       background-color: transparent;
-     
+
       svg {
         opacity: 1;
       }
     }
   }
 `;
-var LetterCircle = styled2.span`
+var LetterCircle = styled5.span`
   align-items: center;
   border-radius: 1000px;
   display: flex;
@@ -215,20 +529,16 @@ var LetterCircle = styled2.span`
   height: 32px;
   justify-content: center;
   width: 32px;
-  background-color: ${tokens2.colors.interactive.primary__resting.rgba};
-  color: ${tokens2.colors.text.static_icons__primary_white.rgba};
+  background-color: ${tokens5.colors.interactive.primary__resting.rgba};
+  color: ${tokens5.colors.text.static_icons__primary_white.rgba};
 `;
-var StyledUserButton = styled2(Button2)`
+var StyledUserButton = styled5(Button3)`
   margin-left: 12px;
   font-weight: bold;
   width: 32px;
   height: 32px;
-
-  &:hover {
-    background-color: var(--button-hover, rgba(0, 79, 85, 1));
-  }
 `;
-var IconAndTextWrapper = styled2(Menu.Item)`
+var IconAndTextWrapper = styled5(Menu.Item)`
   display: flex;
   gap: 12px;
   padding: 12px 20px;
@@ -243,6 +553,7 @@ var IconAndTextWrapper = styled2(Menu.Item)`
 `;
 export {
   FeedbackLink,
+  SideMenu,
   StyledLink,
   TopBar,
   UserMenu

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/cpl-top-bar-react",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -10,7 +10,8 @@
   ],
   "dependencies": {
     "@equinor/eds-icons": "^0.21.0",
-    "@equinor/eds-tokens": "^0.9.2"
+    "@equinor/eds-tokens": "^0.9.2",
+    "@equinor/cpl-env-meta-bar-react": "0.1.0"
   },
   "devDependencies": {
     "@equinor/eds-core-react": "^0.42.5",
@@ -30,7 +31,8 @@
     "@equinor/eds-core-react": ">=0.42.1",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
-    "styled-components": ">=5.3.11"
+    "styled-components": ">=5.3.11",
+    "next": ">15.0.0"
   },
   "publishConfig": {
     "access": "public"