Add left column of web shell

src/view/shell/web/index.tsx

@@ -3,7 +3,7 @@ import {observer} from 'mobx-react-lite'
 import {View, StyleSheet, Text} from 'react-native'
 import {useStores} from '../../../state'
 import {match, MatchResult} from '../../routes'
-// import {DesktopLeftColumn} from './left-column'
+import {DesktopLeftColumn} from './left-column'
 // import {DesktopRightColumn} from './right-column'
 import {Login} from '../../screens/Login'
 import {ErrorBoundary} from '../../com/util/ErrorBoundary'
@@ -34,6 +34,7 @@ export const WebShell: React.FC = observer(() => {
           </ErrorBoundary>
         </View>
       ))}
+      <DesktopLeftColumn />
     </View>
   )
   // TODO

src/view/shell/web/left-column.tsx

@@ -1,57 +1,115 @@
 import React from 'react'
-import {View} from 'react-native'
+import {Pressable, StyleSheet, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {Link} from '../../com/util/Link'
+import {Text} from '../../com/util/text/Text'
+import {colors} from '../../lib/styles'
+import {useStores} from '../../../state'
+import {usePalette} from '../../lib/hooks/usePalette'
+import {
+  HomeIcon,
+  HomeIconSolid,
+  BellIcon,
+  BellIconSolid,
+  MagnifyingGlassIcon,
+  CogIcon,
+} from '../../lib/icons'
 
-// export const NavItem: React.FC<{label: string; screen: string}> = ({
-//   label,
-//   screen,
-// }) => {
-//   const Link = <></> // TODO
-//   return (
-//     <View>
-//       <Pressable
-//         style={state => [
-//           // @ts-ignore it does exist! (react-native-web) -prf
-//           state.hovered && styles.navItemHovered,
-//         ]}>
-//         <Link
-//           style={[
-//             styles.navItemLink,
-//             false /* TODO route.name === screen*/ && styles.navItemLinkSelected,
-//           ]}
-//           to={{screen, params: {}}}>
-//           {label}
-//         </Link>
-//       </Pressable>
-//     </View>
-//   )
-// }
-
-export const DesktopLeftColumn: React.FC = () => {
-  // TODO
-  return <View />
-  // return (
-  //   <View style={styles.container}>
-  //     <NavItem screen="Home" label="Home" />
-  //     <NavItem screen="Search" label="Search" />
-  //     <NavItem screen="Notifications" label="Notifications" />
-  //   </View>
-  // )
+interface NavItemProps {
+  label: string
+  count?: number
+  href: string
+  icon: JSX.Element
+  iconFilled: JSX.Element
 }
+export const NavItem = observer(
+  ({label, count, href, icon, iconFilled}: NavItemProps) => {
+    const store = useStores()
+    const pal = usePalette('default')
+    const isCurrent = store.nav.tab.current.url === href
+    return (
+      <Pressable
+        style={state => [
+          // @ts-ignore Pressable state differs for RNW -prf
+          state.hovered && {backgroundColor: pal.colors.backgroundLight},
+        ]}>
+        <Link style={styles.navItem} href={href}>
+          <View style={styles.navItemIconWrapper}>
+            {isCurrent ? iconFilled : icon}
+            {typeof count === 'number' && count > 0 && (
+              <Text type="button" style={styles.navItemCount}>
+                {count}
+              </Text>
+            )}
+          </View>
+          <Text type={isCurrent ? 'xl-bold' : 'xl-medium'}>{label}</Text>
+        </Link>
+      </Pressable>
+    )
+  },
+)
 
-// const styles = StyleSheet.create({
-//   container: {
-//     position: 'absolute',
-//     left: 'calc(50vw - 500px)',
-//     width: '200px',
-//     height: '100%',
-//   },
-//   navItemHovered: {
-//     backgroundColor: 'gray',
-//   },
-//   navItemLink: {
-//     padding: '1rem',
-//   },
-//   navItemLinkSelected: {
-//     color: 'blue',
-//   },
-// })
+export const DesktopLeftColumn = observer(() => {
+  const store = useStores()
+  const pal = usePalette('default')
+  return (
+    <View style={[styles.container, pal.border]}>
+      <NavItem
+        href="/"
+        label="Home"
+        icon={<HomeIcon />}
+        iconFilled={<HomeIconSolid />}
+      />
+      <NavItem
+        href="/search"
+        label="Search"
+        icon={<MagnifyingGlassIcon />}
+        iconFilled={<MagnifyingGlassIcon strokeWidth={4} />}
+      />
+      <NavItem
+        href="/notifications"
+        label="Notifications"
+        count={store.me.notificationCount}
+        icon={<BellIcon />}
+        iconFilled={<BellIconSolid />}
+      />
+      <NavItem
+        href="/settings"
+        label="Settings"
+        icon={<CogIcon strokeWidth={1.5} />}
+        iconFilled={<CogIcon strokeWidth={2} />}
+      />
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 'calc(50vw - 500px)',
+    width: '200px',
+    height: '100%',
+    borderRightWidth: 1,
+  },
+  navItem: {
+    padding: '1rem',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  navItemIconWrapper: {
+    flexDirection: 'row',
+    width: 30,
+    justifyContent: 'center',
+    marginRight: 5,
+  },
+  navItemCount: {
+    position: 'absolute',
+    top: -5,
+    left: 15,
+    backgroundColor: colors.red3,
+    color: colors.white,
+    fontSize: 12,
+    paddingHorizontal: 4,
+    borderRadius: 4,
+  },
+})