Replace chevron with hamburger menu for app selector

src/client/components/AppDetail.tsx

@@ -6,9 +6,10 @@ import { openAppSelectorModal, openDeleteAppModal, openRenameAppModal } from '..
 import { apps, getSelectedTab, isNarrow } from '../state'
 import {
   ActionBar,
-  AppSelectorChevron,
   Button,
   ClickableAppName,
+  HamburgerButton,
+  HamburgerLine,
   HeaderActions,
   InfoLabel,
   InfoRow,
@@ -56,9 +57,11 @@ export function AppDetail({ app, render }: { app: App, render: () => void }) {
            
           <ClickableAppName onClick={() => openRenameAppModal(app)}>{app.name}</ClickableAppName>
           {isNarrow && (
-            <AppSelectorChevron onClick={() => openAppSelectorModal(render)}>
-              ▼
-            </AppSelectorChevron>
+            <HamburgerButton onClick={() => openAppSelectorModal(render)} title="Show apps">
+              <HamburgerLine />
+              <HamburgerLine />
+              <HamburgerLine />
+            </HamburgerButton>
           )}
         </MainTitle>
         <HeaderActions>

src/client/components/DashboardLanding.tsx

@@ -3,7 +3,8 @@ import { openAppSelectorModal } from '../modals'
 import { navigate } from '../router'
 import { dashboardTab, isNarrow } from '../state'
 import {
-  AppSelectorChevron,
+  HamburgerButton,
+  HamburgerLine,
   DashboardContainer,
   DashboardHeader,
   DashboardTitle,
@@ -47,9 +48,11 @@ export function DashboardLanding({ render }: { render: () => void }) {
         <DashboardTitle narrow={narrow}>
           🐾 Toes
           {isNarrow && (
-            <AppSelectorChevron onClick={() => openAppSelectorModal(render)}>
-              ▼
-            </AppSelectorChevron>
+            <HamburgerButton onClick={() => openAppSelectorModal(render)} title="Show apps">
+              <HamburgerLine />
+              <HamburgerLine />
+              <HamburgerLine />
+            </HamburgerButton>
           )}
         </DashboardTitle>
       </DashboardHeader>

src/client/styles/index.ts

@@ -29,7 +29,6 @@ export { Form, FormActions, FormCheckbox, FormCheckboxField, FormCheckboxLabel,
 export {
   AppItem,
   AppList,
-  AppSelectorChevron,
   ClickableAppName,
   DashboardContainer,
   DashboardHeader,

src/client/styles/layout.ts

@@ -170,20 +170,6 @@ export const MainTitle = define('MainTitle', {
   margin: 0,
 })
 
-export const AppSelectorChevron = define('AppSelectorChevron', {
-  base: 'button',
-  background: 'none',
-  border: 'none',
-  cursor: 'pointer',
-  padding: '4px 8px',
-  marginLeft: 4,
-  fontSize: 14,
-  color: theme('colors-textMuted'),
-  selectors: {
-    '&:hover': { color: theme('colors-text') },
-  },
-})
-
 export const ClickableAppName = define('ClickableAppName', {
   cursor: 'pointer',
   borderRadius: theme('radius-md'),