Fix mobile nav menu styles in web-components (#373)

- the close icon should be on the left, not right
- also remove extra margin for titles that aren't separated by a divider, this no-separator option was added for funder portal but style wasn't adjusted
- does not affect the terraware use-case

Author: Karthik B

src/components/Navbar/NavSection.tsx

@@ -12,7 +12,7 @@ export default function NavSection(props: Props): JSX.Element {
   return (
     <div className='nav-section'>
       {separator && <div className='divider' />}
-      {title && <span className='nav-section--title'>{title}</span>}
+      {title && <span className={`nav-section--title ${separator ? '' : 'no-separator'}`}>{title}</span>}
     </div>
   );
 }

src/components/Navbar/Navbar.tsx

@@ -25,7 +25,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   navBarTop: {
     display: 'flex',
-    justifyContent: 'end',
+    justifyContent: 'start',
   },
 }));
 

src/components/Navbar/styles.scss

@@ -37,6 +37,10 @@
       color: $tw-clr-txt;
       display: block;
       margin-top: $tw-spc-base-small;
+
+      &.no-separator {
+        margin-top: 0;
+      }
     }
   }
 

src/stories/Navbar.stories.tsx

@@ -14,14 +14,15 @@ export default {
   },
 };
 
-const Template: Story<NavbarProps> = (args) => {
+const Template = (args: NavbarProps & { title?: boolean }) => {
   const [selectedItem, setSelectedItem] = React.useState('accessions');
 
   // tslint:disable-next-line:no-empty
   const showNavbar = (show: any) => {};
 
   return (
     <Navbar setShowNavBar={showNavbar} backgroundTransparent={args.backgroundTransparent}>
+      {args.title && <NavSection title='Account' separator={false} />}
       <NavItem label='Home' icon='home' selected={selectedItem === 'home'} onClick={() => setSelectedItem('home')} />
       <NavItem label='Species' icon='species' selected={selectedItem === 'species'} onClick={() => setSelectedItem('species')} />
       <NavSection />
@@ -55,4 +56,9 @@ const Template: Story<NavbarProps> = (args) => {
   );
 };
 
-export const Default = Template.bind({});
+const WithoutTitle: Story<NavbarProps> = (args) => (<Template {...args} />);
+const WithTitle: Story<NavbarProps> = (args) => (<Template {...args} title={true} />);
+
+export const Default = WithoutTitle.bind({});
+
+export const Title = WithTitle.bind({});