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
AxisCommunications · Mar 18, 2024 · f7af0a9 · f7af0a9
1 parent 97f8a71
commit f7af0a9
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git 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
@@ -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
@@ -220,6 +220,7 @@ export const Navbar = () => {
           value: currentOrganizationId,
         }}
         profileMenu={{
+          // showCustomContentTopDivider: false,
           customContent: (
             <MenuItem
               icon={<OpenRegular />}