feat: added first version of popover dialog

src/components/Popover/Info/PopoverInfo.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Popover } from '@ui5/webcomponents-react/lib/Popover';
+import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
+import { FlexBoxDirection, Title } from '@ui5/webcomponents-react';
+import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
+import { spacing } from '@ui5/webcomponents-react-base';
+
+export default function PopoverInfo({ popoverRef, placementType, title, children }) {
+  return (
+    <Popover ref={popoverRef} placementType={placementType && PlacementType.Bottom}>
+      <FlexBox direction={FlexBoxDirection.Column}>
+        <div className="popover-header">
+          <Title style={spacing.sapUiContentPadding}>{title}</Title>
+        </div>
+        <div className="popover-content">{children}</div>
+      </FlexBox>
+    </Popover>
+  );
+}

src/components/Popover/List/PopoverListItems.js

@@ -0,0 +1,19 @@
+import { List, StandardListItem } from '@ui5/webcomponents-react';
+import React from 'react';
+import PopoverInfo from '../Info/PopoverInfo';
+
+export default function PopoverListItems({ popoverRef, title, items }) {
+  return (
+    <PopoverInfo popoverRef={popoverRef} title={title}>
+      <List>
+        {items.map((item, index) => {
+          return (
+            <StandardListItem key={index} selected={item.selected} info={item.info} icon={item.icon} description={item.description} onClick={item.onClick}>
+              {item.children}
+            </StandardListItem>
+          );
+        })}
+      </List>
+    </PopoverInfo>
+  );
+}

src/components/Shell/Shell.js

@@ -1,9 +1,13 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 
 import { ShellBar } from '@ui5/webcomponents-react/lib/ShellBar';
+import { Avatar } from '@ui5/webcomponents-react/lib/Avatar';
+import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape';
+import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
 import BrowserProvider from '../../util/URL/BrowserProvider';
+import PopoverListItems from '../Popover/List/PopoverListItems';
 
 const style = {
   shell: {
@@ -19,18 +23,34 @@ const style = {
 const Shell = ({ title, ...props }) => {
   const { t } = useTranslation();
   const history = useHistory();
+  const popoverConfigItemsRef = useRef(null);
+  const popoverItemsInterface = [
+    {
+      children: t('shell.button.user.settings.item.languageSwitch'),
+      icon: 'user-settings',
+      onClick: () => alert('activate language switch dialog'),
+    },
+    {
+      children: t('shell.button.user.settings.item.themeSwitch'),
+      icon: 'customize',
+      onClick: () => alert('activate theme switch dialog'),
+    },
+  ];
 
   return (
     <>
       <ShellBar
         data-testid="shell-wrapper"
-        style={style.shell}
-        onLogoClick={() => history.push(BrowserProvider.HOME)}
         primaryTitle={title}
+        style={style.shell}
         logo={<img alt={t('shell.logo.alt')} src="https://sap.github.io/ui5-webcomponents/assets/images/sap-logo-svg.svg" />}
+        onLogoClick={() => history.push(BrowserProvider.HOME)}
+        profile={<Avatar icon="customer" shape={AvatarShape.Circle} size={AvatarSize.S} />}
+        onProfileClick={(e) => popoverConfigItemsRef.current.openBy(e.detail.targetRef)}
         {...props}
       />
       <div style={style.emptySpace} />
+      <PopoverListItems popoverRef={popoverConfigItemsRef} title={t('shell.button.user.settings')} items={popoverItemsInterface} />
     </>
   );
 };

src/locales/en/translation.json

@@ -4,6 +4,9 @@
   "helmet.title.notfound": "NotFound - TodoList App",
   "shell.title": "TodoList Application",
   "shell.logo.alt": "SAP Logo",
+  "shell.button.user.settings": "User Settings",
+  "shell.button.user.settings.item.languageSwitch": "Language Switch",
+  "shell.button.user.settings.item.themeSwitch": "Theme Switch",
   "page.error.text": "Ops! There was an error in loading this page",
   "page.error.alt": "Error",
   "page.notfound.text": "Hmmm, we could find this URL",