Move all of the web left-nav shell into the header

2023-02-23 10:19:21 -06:00 · 2023-02-23 10:19:21 -06:00 · 5f92180058
parent 9bf48ed595
commit 5f92180058
3 changed files with 154 additions and 190 deletions
--- a/src/view/shell/web/DesktopHeader.tsx
+++ b/src/view/shell/web/DesktopHeader.tsx
@ -1,12 +1,88 @@
 import React from 'react'
 import {observer} from 'mobx-react-lite'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {Text} from 'view/com/util/text/Text'
 import {Link} from 'view/com/util/Link'
+import {UserAvatar} from 'view/com/util/UserAvatar'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {useStores} from 'state/index'
-import {ComposeIcon, MagnifyingGlassIcon} from 'lib/icons'
 import {colors} from 'lib/styles'
+import {
+  ComposeIcon,
+  HomeIcon,
+  HomeIconSolid,
+  BellIcon,
+  BellIconSolid,
+  MagnifyingGlassIcon,
+  CogIcon,
+} from 'lib/icons'
+
+interface NavItemProps {
+  count?: number
+  href: string
+  icon: JSX.Element
+  iconFilled: JSX.Element
+  isProfile?: boolean
+}
+export const NavItem = observer(
+  ({count, href, icon, iconFilled}: NavItemProps) => {
+    const store = useStores()
+    const hoverBg = useColorSchemeStyle(
+      styles.navItemHoverBgLight,
+      styles.navItemHoverBgDark,
+    )
+    const isCurrent = store.nav.tab.current.url === href
+    const onPress = () => store.nav.navigate(href)
+    return (
+      <Pressable
+        style={state => [
+          styles.navItem,
+          // @ts-ignore Pressable state differs for RNW -prf
+          (state.hovered || isCurrent) && hoverBg,
+        ]}
+        onPress={onPress}>
+        <View style={[styles.navItemIconWrapper]}>
+          {isCurrent ? iconFilled : icon}
+          {typeof count === 'number' && count > 0 && (
+            <Text type="button" style={styles.navItemCount}>
+              {count}
+            </Text>
+          )}
+        </View>
+      </Pressable>
+    )
+  },
+)
+
+export const ProfileItem = observer(() => {
+  const store = useStores()
+  const hoverBg = useColorSchemeStyle(
+    styles.navItemHoverBgLight,
+    styles.navItemHoverBgDark,
+  )
+  const href = `/profile/${store.me.handle}`
+  const isCurrent = store.nav.tab.current.url === href
+  const onPress = () => store.nav.navigate(href)
+  return (
+    <Pressable
+      style={state => [
+        styles.navItem,
+        // @ts-ignore Pressable state differs for RNW -prf
+        (state.hovered || isCurrent) && hoverBg,
+      ]}
+      onPress={onPress}>
+      <View style={[styles.navItemIconWrapper]}>
+        <UserAvatar
+          handle={store.me.handle}
+          displayName={store.me.displayName}
+          avatar={store.me.avatar}
+          size={28}
+        />
+      </View>
+    </Pressable>
+  )
+})

 export const DesktopHeader = observer(function DesktopHeader({}: {
  canGoBack?: boolean
@ -16,11 +92,29 @@ export const DesktopHeader = observer(function DesktopHeader({}: {
  const onPressCompose = () => store.shell.openComposer({})
  return (
    <View style={[styles.header, pal.borderDark, pal.view]}>
-      <View style={styles.titleContainer} pointerEvents="none">
      <Text type="title-2xl" style={[pal.text, styles.title]}>
        Bluesky
      </Text>
-      </View>
+      <View style={styles.space30} />
+      <NavItem
+        href="/"
+        icon={<HomeIcon size={28} />}
+        iconFilled={<HomeIconSolid size={28} />}
+      />
+      <View style={styles.space15} />
+      <NavItem
+        href="/search"
+        icon={<MagnifyingGlassIcon size={28} />}
+        iconFilled={<MagnifyingGlassIcon strokeWidth={3} size={28} />}
+      />
+      <View style={styles.space15} />
+      <NavItem
+        href="/notifications"
+        count={store.me.notifications.unreadCount}
+        icon={<BellIcon size={28} />}
+        iconFilled={<BellIconSolid size={28} />}
+      />
+      <View style={styles.spaceFlex} />
      <TouchableOpacity style={[styles.newPostBtn]} onPress={onPressCompose}>
        <View style={styles.newPostBtnIconWrapper}>
          <ComposeIcon
@ -33,6 +127,7 @@ export const DesktopHeader = observer(function DesktopHeader({}: {
          New Post
        </Text>
      </TouchableOpacity>
+      <View style={styles.space20} />
      <Link href="/search" style={[pal.view, pal.borderDark, styles.search]}>
        <MagnifyingGlassIcon
          size={18}
@ -42,6 +137,13 @@ export const DesktopHeader = observer(function DesktopHeader({}: {
          Search
        </Text>
      </Link>
+      <View style={styles.space15} />
+      <ProfileItem />
+      <NavItem
+        href="/settings"
+        icon={<CogIcon strokeWidth={2} size={28} />}
+        iconFilled={<CogIcon strokeWidth={2.5} size={28} />}
+      />
    </View>
  )
 })
@ -50,18 +152,59 @@ const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
-    paddingTop: 18,
-    paddingBottom: 18,
+    // paddingTop: 18,
+    // paddingBottom: 18,
    paddingLeft: 30,
    paddingRight: 40,
    borderBottomWidth: 1,
  },

-  titleContainer: {
-    marginRight: 'auto',
+  spaceFlex: {
+    flex: 1,
  },
+  space15: {
+    width: 15,
+  },
+  space20: {
+    width: 20,
+  },
+  space30: {
+    width: 30,
+  },
+
  title: {},

+  navItem: {
+    paddingTop: 14,
+    paddingBottom: 10,
+    paddingHorizontal: 10,
+    alignItems: 'center',
+    borderBottomWidth: 2,
+    borderBottomColor: 'transparent',
+  },
+  navItemHoverBgLight: {
+    borderBottomWidth: 2,
+    borderBottomColor: colors.blue3,
+  },
+  navItemHoverBgDark: {
+    borderBottomWidth: 2,
+    backgroundColor: colors.blue3,
+  },
+  navItemIconWrapper: {
+    marginBottom: 2,
+  },
+  navItemCount: {
+    position: 'absolute',
+    top: -5,
+    left: 15,
+    backgroundColor: colors.red3,
+    color: colors.white,
+    fontSize: 12,
+    fontWeight: 'bold',
+    paddingHorizontal: 4,
+    borderRadius: 6,
+  },
+
  search: {
    flexDirection: 'row',
    alignItems: 'center',
@ -87,7 +230,6 @@ const styles = StyleSheet.create({
    paddingBottom: 9,
    paddingHorizontal: 18,
    backgroundColor: colors.blue3,
-    marginRight: 10,
  },
  newPostBtnIconWrapper: {
    marginRight: 8,
--- a/src/view/shell/web/DesktopLeftColumn.tsx
+++ b/src/view/shell/web/DesktopLeftColumn.tsx
@ -1,177 +0,0 @@
-import React from 'react'
-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 {UserAvatar} from '../../com/util/UserAvatar'
-import {colors} from 'lib/styles'
-import {useStores} from 'state/index'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
-import {
-  HomeIcon,
-  HomeIconSolid,
-  BellIcon,
-  BellIconSolid,
-  MagnifyingGlassIcon,
-  CogIcon,
-} from 'lib/icons'
-
-interface NavItemProps {
-  label: string
-  count?: number
-  href: string
-  icon: JSX.Element
-  iconFilled: JSX.Element
-  isProfile?: boolean
-}
-export const NavItem = observer(
-  ({label, count, href, icon, iconFilled, isProfile}: NavItemProps) => {
-    const store = useStores()
-    const hoverBg = useColorSchemeStyle(
-      styles.navItemHoverBgLight,
-      styles.navItemHoverBgDark,
-    )
-    const isCurrent = store.nav.tab.current.url === href
-    return (
-      <Pressable
-        style={state => [
-          // @ts-ignore Pressable state differs for RNW -prf
-          state.hovered && hoverBg,
-        ]}>
-        <Link style={[styles.navItem]} href={href}>
-          <View
-            style={[
-              styles.navItemIconWrapper,
-              isProfile && styles.navItemProfile,
-            ]}>
-            {isCurrent ? iconFilled : icon}
-            {typeof count === 'number' && count > 0 && (
-              <Text type="button" style={styles.navItemCount}>
-                {count}
-              </Text>
-            )}
-          </View>
-          <Text
-            type={isCurrent || isProfile ? 'xl' : 'xl-thin'}
-            numberOfLines={1}>
-            {label}
-          </Text>
-        </Link>
-      </Pressable>
-    )
-  },
-)
-
-export const DesktopLeftColumn = observer(() => {
-  const store = useStores()
-  const pal = usePalette('default')
-  const avi = (
-    <UserAvatar
-      handle={store.me.handle}
-      displayName={store.me.displayName}
-      avatar={store.me.avatar}
-      size={30}
-    />
-  )
-  return (
-    <View style={[styles.container]}>
-      <View style={styles.main}>
-        <NavItem
-          href="/"
-          label="Home"
-          icon={<HomeIcon size={21} />}
-          iconFilled={<HomeIconSolid size={21} />}
-        />
-        <NavItem
-          href="/search"
-          label="Explore"
-          icon={<MagnifyingGlassIcon size={21} />}
-          iconFilled={<MagnifyingGlassIcon strokeWidth={3} size={21} />}
-        />
-        <NavItem
-          href="/notifications"
-          label="Notifications"
-          count={store.me.notifications.unreadCount}
-          icon={<BellIcon size={21} />}
-          iconFilled={<BellIconSolid size={21} />}
-        />
-        <NavItem
-          href="/settings"
-          label="Settings"
-          icon={<CogIcon strokeWidth={2} size={21} />}
-          iconFilled={<CogIcon strokeWidth={2.5} size={21} />}
-        />
-        <View style={[styles.separator, pal.borderDark]} />
-        <NavItem
-          isProfile
-          href={`/profile/${store.me.handle}`}
-          label={store.me.displayName || store.me.handle}
-          icon={avi}
-          iconFilled={avi}
-        />
-      </View>
-    </View>
-  )
-})
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    left: 5,
-    top: 100,
-    width: '300px',
-  },
-  main: {
-    flex: 1,
-    paddingHorizontal: 16,
-  },
-  footer: {
-    borderTopWidth: 1,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-  },
-  separator: {
-    borderTopWidth: 1,
-    marginVertical: 12,
-    marginHorizontal: 8,
-  },
-
-  navItem: {
-    paddingVertical: 8,
-    paddingHorizontal: 6,
-    marginBottom: 2,
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderRadius: 6,
-  },
-  navItemHoverBgLight: {
-    backgroundColor: '#ebebf0',
-    borderRadius: 6,
-  },
-  navItemHoverBgDark: {
-    backgroundColor: colors.gray2, // TODO
-    borderRadius: 6,
-  },
-  navItemIconWrapper: {
-    flexDirection: 'row',
-    width: 30,
-    justifyContent: 'center',
-    marginRight: 8,
-  },
-  navItemProfile: {
-    width: 30,
-    marginRight: 10,
-  },
-  navItemCount: {
-    position: 'absolute',
-    top: -5,
-    left: 15,
-    backgroundColor: colors.red3,
-    color: colors.white,
-    fontSize: 12,
-    fontWeight: 'bold',
-    paddingHorizontal: 4,
-    borderRadius: 6,
-  },
-})
--- a/src/view/shell/web/index.tsx
+++ b/src/view/shell/web/index.tsx
@ -53,7 +53,6 @@ export const WebShell: React.FC = observer(() => {
          </ErrorBoundary>
        </View>
      ))}
-      <DesktopLeftColumn />
      <DesktopRightColumn />
      <Composer
        active={store.shell.isComposerActive}