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

fix(ApplicationMenu): fix positioning of content
kronostechnologies · Jul 20, 2021 · 5d94b55 · 5d94b55
2 parents d8f8cce + 617dfeb
commit 5d94b55
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 6 deletions.
diff --git a/packages/react/src/components/application-menu/application-menu-content.tsx b/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 {

diff --git a/packages/react/src/components/application-menu/application-menu.test.tsx.snap b/packages/react/src/components/application-menu/application-menu.test.tsx.snap
diff --git a/packages/react/src/components/application-menu/application-menu.tsx b/packages/react/src/components/application-menu/application-menu.tsx
@@ -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;
     }
 

diff --git a/packages/storybook/stories/application-menu.stories.tsx b/packages/storybook/stories/application-menu.stories.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>
+);