Replace most of Navbar with styled-components

packages/client/src/components/Flex.tsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+
+export function cond(check: boolean | undefined, style: string) {
+  return cond ? style + ';' : ''
+}
+
+export interface FlexProps {
+  hcenter?: boolean
+  vcenter?: boolean
+}
+
+export const Flex = styled.div<FlexProps>`
+  display: flex;
+  ${props => cond(props.hcenter, 'justify-content: center')}
+  ${props => cond(props.vcenter, 'align-items: center')}
+`
+
+Flex.defaultProps = {
+  hcenter: true,
+  vcenter: true,
+}

packages/client/src/components/Navbar.tsx

@@ -0,0 +1,102 @@
+import styled, { css } from 'styled-components'
+import { NavLink } from 'react-router-dom'
+
+export const Navbar = styled.div`
+  min-height: 3.25rem;
+  display: flex;
+  align-items: stretch;
+`
+
+export const NavbarBrand = styled.div`
+  display: flex;
+`
+
+export interface NavbarMenuProps {
+  isActive?: boolean
+}
+
+export const NavbarMenu = styled.div<NavbarMenuProps>`
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+`
+
+export const NavbarStart = styled.ul`
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  justify-content: flex-start;
+  margin-right: auto;
+`
+
+export const NavbarEnd = styled(NavbarStart)`
+  margin-right: 0;
+  margin-left: auto;
+  justify-content: flex-end;
+`
+
+export interface NavbarDropdownProps {
+  isRight?: boolean
+}
+
+export const NavbarDropdown = styled.div<NavbarDropdownProps>`
+  display: none;
+  box-shadow: 0 0 3px ${props => props.theme.grey.light};
+  position: absolute;
+  top: 100%;
+  min-width: 100px;
+  left: ${props => props.isRight ? 'inherit' : 0}
+  right: ${props => props.isRight ? 0 : 'inherit'}
+  text-align: ${props => props.isRight ? 'right' : 'left'}
+  background-color: white;
+`
+
+export const navbarItemCss = css`
+  display: flex;
+  align-items: center;
+  flex-grow: 0;
+  flex-shrink: 0;
+  padding: 0.5rem 0.75rem;
+  position: relative;
+
+  &:hover {
+    background-color: ${props => props.theme.grey.lighter};
+  }
+
+  &.is-active {
+    color: ${props => props.theme.colors.primary};
+  }
+
+  & img {
+    max-height: 1.75rem;
+  }
+
+  &:hover > ${NavbarDropdown} {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    flex-wrap: wrap;
+
+    // & > * {
+    //   justify-content: flex-end;
+    // }
+  }
+`
+
+export const NavbarRouterLink = styled(NavLink).attrs({
+  activeClassName: 'is-active',
+})`
+  ${navbarItemCss}
+`
+
+export const NavbarItem = styled.span`
+  ${navbarItemCss}
+`
+
+export interface NavbarBurgerProps {
+  isActive?: boolean
+}
+
+export const NavbarBurger = styled.div<NavbarBurgerProps>`
+
+`

packages/client/src/components/Panel.tsx

@@ -6,6 +6,9 @@ export const Panel = styled.div`
 `
 
 export const PanelHeading = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background-color: ${props => props.theme.grey.lighter};
   padding: 1rem;
 `

packages/client/src/components/index.ts

@@ -1,10 +1,12 @@
 export * from './Button'
 export * from './Container'
+export * from './Flex'
 export * from './Heading'
 export * from './Help'
 export * from './Input'
 export * from './Link'
 export * from './Modal'
+export * from './Navbar'
 export * from './Panel'
 export * from './Redirect'
 export * from './ReturnHere'

packages/client/src/team/TeamList.tsx

@@ -1,5 +1,5 @@
 import { ReadonlyRecord, Team, TeamActions } from '@rondo.dev/common'
-import { Button, Panel, PanelBlock, PanelHeading } from '../components'
+import { Button, Flex, Panel, PanelBlock, PanelHeading } from '../components'
 import React from 'react'
 import { FaEdit, FaPlus, FaTimes } from 'react-icons/fa'
 import { Link } from 'react-router-dom'
@@ -18,6 +18,8 @@ export interface TeamProps {
   onRemoveTeam: TeamActions['remove']
 }
 
+export const marginLeft = {marginLeft: 'auto'}
+
 export class TeamRow extends React.PureComponent<TeamProps> {
   handleRemove = async () => {
     const {onRemoveTeam, team: {id}} = this.props
@@ -30,7 +32,7 @@ export class TeamRow extends React.PureComponent<TeamProps> {
         <div className='team-name'>
           {team.name}
         </div>
-        <div className='ml-auto'>
+        <div style={marginLeft}>
           {!!ListButtons && <ListButtons team={team} />}
           &nbsp;
           <Link to={`/teams/${team.id}/users`}>
@@ -59,8 +61,8 @@ export class TeamList extends React.PureComponent<TeamListProps> {
     return (
       <Panel>
         <PanelHeading>
-          <span>
-            <span>Teams</span>
+          <span>Teams</span>
+            <span style={marginLeft}>
             <Link
               className='ml-auto'
               to='/teams/new'