diff --git a/src/view/shell/web/DesktopHeader.tsx b/src/view/shell/web/DesktopHeader.tsx
index 75acb8da..acef3d9b 100644
--- 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 (
+ [
+ styles.navItem,
+ // @ts-ignore Pressable state differs for RNW -prf
+ (state.hovered || isCurrent) && hoverBg,
+ ]}
+ onPress={onPress}>
+
+ {isCurrent ? iconFilled : icon}
+ {typeof count === 'number' && count > 0 && (
+
+ {count}
+
+ )}
+
+
+ )
+ },
+)
+
+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 (
+ [
+ styles.navItem,
+ // @ts-ignore Pressable state differs for RNW -prf
+ (state.hovered || isCurrent) && hoverBg,
+ ]}
+ onPress={onPress}>
+
+
+
+
+ )
+})
export const DesktopHeader = observer(function DesktopHeader({}: {
canGoBack?: boolean
@@ -16,11 +92,29 @@ export const DesktopHeader = observer(function DesktopHeader({}: {
const onPressCompose = () => store.shell.openComposer({})
return (
-
-
- Bluesky
-
-
+
+ Bluesky
+
+
+ }
+ iconFilled={}
+ />
+
+ }
+ iconFilled={}
+ />
+
+ }
+ iconFilled={}
+ />
+
+
+
+
+ }
+ iconFilled={}
+ />
)
})
@@ -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,
diff --git a/src/view/shell/web/DesktopLeftColumn.tsx b/src/view/shell/web/DesktopLeftColumn.tsx
deleted file mode 100644
index 28c86758..00000000
--- a/src/view/shell/web/DesktopLeftColumn.tsx
+++ /dev/null
@@ -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 (
- [
- // @ts-ignore Pressable state differs for RNW -prf
- state.hovered && hoverBg,
- ]}>
-
-
- {isCurrent ? iconFilled : icon}
- {typeof count === 'number' && count > 0 && (
-
- {count}
-
- )}
-
-
- {label}
-
-
-
- )
- },
-)
-
-export const DesktopLeftColumn = observer(() => {
- const store = useStores()
- const pal = usePalette('default')
- const avi = (
-
- )
- return (
-
-
- }
- iconFilled={}
- />
- }
- iconFilled={}
- />
- }
- iconFilled={}
- />
- }
- iconFilled={}
- />
-
-
-
-
- )
-})
-
-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,
- },
-})
diff --git a/src/view/shell/web/index.tsx b/src/view/shell/web/index.tsx
index 44f958be..4a4bde81 100644
--- a/src/view/shell/web/index.tsx
+++ b/src/view/shell/web/index.tsx
@@ -53,7 +53,6 @@ export const WebShell: React.FC = observer(() => {
))}
-