Merge pull request #271 from kronostechnologies/dev/fix-app-menu

fix(ApplicationMenu): fix positioning of content

Author: meriouma

packages/react/src/components/application-menu/application-menu-content.tsx

@@ -17,7 +17,13 @@ const BurgerButton = styled.button`
 `;
 
 const Container = styled.div`
+    align-items: center;
     color: ${(props) => props.theme.greys.white};
+    display: flex;
+
+    > * + * {
+        margin-left: var(--spacing-1x);
+    }
 `;
 
 interface Props {

packages/react/src/components/application-menu/application-menu.test.tsx.snap

@@ -24,7 +24,6 @@ const Header = styled.header<{ device: DeviceType }>`
     display: flex;
     height: ${({ device }) => (device === 'desktop' ? 48 : 56)}px;
     justify-content: space-between;
-    overflow: hidden;
     padding: ${({ device }) => getPadding(device)};
     position: relative;
 `;
@@ -50,7 +49,7 @@ const StyledSkipLink = styled(SkipLink)<ComponentProps<typeof SkipLink> & { isMo
     &:not(:focus) {
         clip: unset;
         height: auto;
-        top: -50%;
+        top: -100%;
         width: auto;
     }
 

packages/react/src/components/application-menu/application-menu.tsx

@@ -1,4 +1,4 @@
-import { ApplicationMenu } from '@equisoft/design-elements-react';
+import { ApplicationMenu, UserProfile } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
 import React, { ReactElement, VoidFunctionComponent } from 'react';
 import CustomLogoSvg from './assets/customLogo.svg';
@@ -54,3 +54,17 @@ export const WithSkipLink: Story = () => (
         <p>Hello world</p>
     </ApplicationMenu>
 );
+
+export const WithSkipLinkAndUserProfile: Story = () => (
+    <ApplicationMenu skipLinkHref="#">
+        <p>Hello world</p>
+        <UserProfile
+            username=""
+            options={[{
+                value: 'Something',
+                href: '#',
+            },
+            ]}
+        />
+    </ApplicationMenu>
+);