From f7af0a9a1243fd6c977bd3b85b320e2fe0348ab2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Wedell?= <bjorwe@axis.com>
Date: Mon, 18 Mar 2024 09:52:34 +0100
Subject: [PATCH] Bjorwe/update profile menu (#229)

* feat(topbar): add property to hide top divider when adding custom content to profile menu

* feat(topbar): add activation ring on profile menu trigger button
---
 components/topbar/src/profile-menu.tsx      | 6 +++++-
 components/topbar/src/profile-menu.types.ts | 1 +
 examples/src/components/top-bar.tsx         | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/topbar/src/profile-menu.tsx b/components/topbar/src/profile-menu.tsx
index f0fe485d..fc298ff2 100644
--- a/components/topbar/src/profile-menu.tsx
+++ b/components/topbar/src/profile-menu.tsx
@@ -27,6 +27,7 @@ const NotificationIcon = bundleIcon(CircleRegular, CircleFilled);
 
 export const ProfileMenu = ({
   customContent,
+  showCustomContentTopDivider = true,
   language,
   name,
   email,
@@ -49,6 +50,7 @@ export const ProfileMenu = ({
             <Avatar
               name={name}
               size={24}
+              active={hasNotification ? "active" : "unset"}
               badge={hasNotification
                 ? {
                   icon: notificationIcon !== undefined
@@ -72,7 +74,9 @@ export const ProfileMenu = ({
       <MenuPopover>
         <MenuList>
           <UserInformation name={name} email={email} tag={tag} />
-          <MenuDivider />
+          {(customContent === undefined || showCustomContentTopDivider) && (
+            <MenuDivider />
+          )}
           {customContent !== undefined && (
             <>
               {customContent}
diff --git a/components/topbar/src/profile-menu.types.ts b/components/topbar/src/profile-menu.types.ts
index 87f72651..8e913885 100644
--- a/components/topbar/src/profile-menu.types.ts
+++ b/components/topbar/src/profile-menu.types.ts
@@ -31,6 +31,7 @@ export type UserInformationProps = {
 
 export type ProfileMenuProps = UserInformationProps & {
   readonly customContent?: JSX.Element;
+  readonly showCustomContentTopDivider?: boolean;
   readonly hasNotification?: boolean;
   readonly notificationIcon?: ReactElement;
   readonly language: LanguageSubmenuProps;
diff --git a/examples/src/components/top-bar.tsx b/examples/src/components/top-bar.tsx
index 61705e1d..f8b18837 100644
--- a/examples/src/components/top-bar.tsx
+++ b/examples/src/components/top-bar.tsx
@@ -220,6 +220,7 @@ export const Navbar = () => {
           value: currentOrganizationId,
         }}
         profileMenu={{
+          // showCustomContentTopDivider: false,
           customContent: (
             <MenuItem
               icon={<OpenRegular />}