From 5f921800580b69a52b23d211b19c72d5d7ee0ef7 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Thu, 23 Feb 2023 10:19:21 -0600 Subject: Move all of the web left-nav shell into the header --- src/view/shell/web/DesktopLeftColumn.tsx | 177 ------------------------------- 1 file changed, 177 deletions(-) delete mode 100644 src/view/shell/web/DesktopLeftColumn.tsx (limited to 'src/view/shell/web/DesktopLeftColumn.tsx') diff --git a/src/view/shell/web/DesktopLeftColumn.tsx b/src/view/shell/web/DesktopLeftColumn.tsx deleted file mode 100644 index 28c867582..000000000 --- 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, - }, -}) -- cgit 1.4.1