Add custom content possibility to left side of topbar and top of application menu (#91)

* feat(topbar): add possibility to show custom content on left side of topbar

* feat(topbar): allow custom content in top of application menu

---------

Co-authored-by: Prisoners of Azkaban <healthmonitoring@axis.com>

Author: NiklasRamstrom

components/topbar/src/application-menu.tsx

@@ -2,6 +2,7 @@ import {
   Badge,
   Menu,
   MenuButton,
+  MenuDivider,
   MenuItem,
   MenuList,
   MenuPopover,
@@ -33,6 +34,7 @@ function appIcon(id: string): JSX.Element {
 }
 
 export const ApplicationMenu = ({
+  customContent,
   options,
   value,
   onChange,
@@ -43,6 +45,8 @@ export const ApplicationMenu = ({
   const currentSelection = options?.find(({ id }) => id === value);
   const isStandalone = options?.length === 1;
 
+  const onlyCustomContent = !options?.length && !!customContent;
+
   return (
     <Menu>
       <MenuTrigger>
@@ -69,6 +73,12 @@ export const ApplicationMenu = ({
       </MenuTrigger>
       <MenuPopover>
         <MenuList>
+          {customContent !== undefined && (
+            <>
+              {customContent}
+              {!onlyCustomContent && <MenuDivider />}
+            </>
+          )}
           {options?.map(({ id, icon, label, beta }) => (
             <MenuItem
               data-testid={`application-menu-item-${id}`}

components/topbar/src/application-menu.types.ts

@@ -7,6 +7,7 @@ export type ApplicationOption = {
 };
 
 export type ApplicationMenuProps = {
+  customContent?: JSX.Element;
   options?: ApplicationOption[];
   value: string;
   onChange: (id: string) => void;

components/topbar/src/top-bar.styles.ts

@@ -16,6 +16,7 @@ export const useTopBarStyles = makeStyles({
     gridTemplateColumns: "[left] auto [right] minmax(auto, max-content)",
     gridColumnGap: tokens.spacingHorizontalS,
     alignItems: "center",
+    justifyContent: "space-between",
     boxSizing: "border-box",
     height: "46px",
     backgroundColor: tokens.colorNeutralBackground4,

components/topbar/src/top-bar.tsx

@@ -9,7 +9,8 @@ import { TranslationProvider } from "./translation-provider";
 
 export const TopBar = forwardRef(
   (props: TopBarProps, ref: ForwardedRef<HTMLDivElement>) => {
-    const { appMenu, orgMenu, profileMenu, customContent } = props;
+    const { appMenu, orgMenu, profileMenu, customContent, leftCustomContent } =
+      props;
     const styles = useTopBarStyles();
 
     const rootStyle = mergeClasses(topBarClassNames.root, styles.root);
@@ -23,14 +24,23 @@ export const TopBar = forwardRef(
     );
 
     const language = profileMenu?.language;
-    const locale = language?.options?.find(({ id }) => id === language.value)
-      ?.id;
+    const locale = language?.options?.find(
+      ({ id }) => id === language.value
+    )?.id;
 
     return (
       <TranslationProvider locale={locale}>
         <div className={rootStyle} ref={ref}>
           <div className={leftSectionStyle}>
             {appMenu !== undefined && <ApplicationMenu {...appMenu} />}
+            {leftCustomContent !== undefined && (
+              <>
+                {appMenu !== undefined && (
+                  <Divider vertical style={{ padding: "0 4px" }} />
+                )}
+                {leftCustomContent}
+              </>
+            )}
           </div>
           <div className={rightSectionStyle}>
             {orgMenu !== undefined && <OrganizationMenu {...orgMenu} />}

components/topbar/src/top-bar.types.ts

@@ -6,6 +6,7 @@ export type TopBarProps = {
   readonly appMenu?: ApplicationMenuProps;
   readonly children?: ReadonlyArray<never>;
   readonly customContent?: JSX.Element;
+  readonly leftCustomContent?: JSX.Element;
   readonly orgMenu?: OrganizationMenuProps;
   readonly profileMenu?: ProfileMenuProps;
 };

examples/src/components/top-bar.tsx

@@ -10,6 +10,7 @@ import {
   TopBar,
 } from "@axiscommunications/fluent-topbar";
 import {
+  Button,
   makeStyles,
   Menu,
   MenuButton,
@@ -23,8 +24,10 @@ import {
   BoxFilled,
   BoxRegular,
   bundleIcon,
+  FoodApple24Regular,
   MailFilled,
   MailRegular,
+  Megaphone24Filled,
   OpenRegular,
   QuestionCircleRegular,
 } from "@fluentui/react-icons";
@@ -94,19 +97,40 @@ export const Navbar = () => {
     alert("sign me in");
   }, []);
 
-  const onNavigateToApplication = React.useCallback((appid: string) => {
-    setSelectedApp(appid);
-    alert("lets navigate! => " + appid);
-  }, [setSelectedApp]);
+  const onNavigateToApplication = React.useCallback(
+    (appid: string) => {
+      setSelectedApp(appid);
+      alert("lets navigate! => " + appid);
+    },
+    [setSelectedApp]
+  );
+
+  const [megaman, setMegaman] = useState("Megaman");
 
   return (
     <div className={styles.topBar}>
       <TopBar
         appMenu={{
+          customContent: (
+            <MenuItem icon={<FoodApple24Regular />}>
+              Custom app menu item
+            </MenuItem>
+          ),
           options: applications,
           value: selectedApp,
           onChange: onNavigateToApplication,
         }}
+        leftCustomContent={
+          <Button
+            appearance="subtle"
+            icon={<Megaphone24Filled />}
+            iconPosition="before"
+            onClick={() =>
+              setMegaman(megaman === "Megaman" ? "Rockman" : "Megaman")}
+          >
+            {megaman}
+          </Button>
+        }
         customContent={
           <Menu>
             <MenuTrigger>