Fix Profile link from drawer on Mobile Web (#1437)

* 🗺️ fix an issue where web devices that see the Drawer couldn't access Profile from said Drawer

* fix routes on web

* handle profile button active state

* add hack for web navigation

* fix comment

---------

Co-authored-by: Micah Maligie <kerosuppi@gmail.com>

3 files changed, 30 insertions, 12 deletions

diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index dac70dfc7..c16ff3a8c 100644
--- a/src/Navigation.tsx
+++ b/src/Navigation.tsx
@@ -348,7 +348,6 @@ const MyProfileTabNavigator = observer(function MyProfileTabNavigatorImpl() {
         component={ProfileScreen}
         initialParams={{
           name: store.me.did,
-          hideBackButton: true,
         }}
       />
       {commonScreens(MyProfileTab as typeof HomeTab)}
@@ -362,7 +361,9 @@ const MyProfileTabNavigator = observer(function MyProfileTabNavigatorImpl() {
  */
 const FlatNavigator = observer(function FlatNavigatorImpl() {
   const pal = usePalette('default')
-  const unreadCountLabel = useStores().me.notifications.unreadCountLabel
+  const store = useStores()
+  const unreadCountLabel = store.me.notifications.unreadCountLabel
+
   const title = (page: string) => bskyTitle(page, unreadCountLabel)
   return (
     <Flat.Navigator
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index 3379d0501..67092938e 100644
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -64,8 +64,13 @@ export const DrawerContent = observer(function DrawerContentImpl() {
       const state = navigation.getState()
       store.shell.closeDrawer()
       if (isWeb) {
-        // @ts-ignore must be Home, Search, Notifications, or MyProfile
-        navigation.navigate(tab)
+        // hack because we have flat navigator for web and MyProfile does not exist on the web navigator -ansh
+        if (tab === 'MyProfile') {
+          navigation.navigate('Profile', {name: store.me.handle})
+        } else {
+          // @ts-ignore must be Home, Search, Notifications, or MyProfile
+          navigation.navigate(tab)
+        }
       } else {
         const tabState = getTabState(state, tab)
         if (tabState === TabState.InsideAtRoot) {
diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx
index ee575c217..af70d3364 100644
--- a/src/view/shell/bottom-bar/BottomBarWeb.tsx
+++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx
@@ -18,10 +18,12 @@ import {
   SatelliteDishIcon,
   SatelliteDishIconSolid,
   UserIcon,
+  UserIconSolid,
 } from 'lib/icons'
 import {Link} from 'view/com/util/Link'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {makeProfileLink} from 'lib/routes/links'
+import {CommonNavigatorParams} from 'lib/routes/types'
 
 export const BottomBarWeb = observer(function BottomBarWebImpl() {
   const store = useStores()
@@ -89,13 +91,16 @@ export const BottomBarWeb = observer(function BottomBarWebImpl() {
         }}
       </NavItem>
       <NavItem routeName="Profile" href={makeProfileLink(store.me)}>
-        {() => (
-          <UserIcon
-            size={28}
-            strokeWidth={1.5}
-            style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
-          />
-        )}
+        {({isActive}) => {
+          const Icon = isActive ? UserIconSolid : UserIcon
+          return (
+            <Icon
+              size={28}
+              strokeWidth={1.5}
+              style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
+            />
+          )
+        }}
       </NavItem>
     </Animated.View>
   )
@@ -107,7 +112,14 @@ const NavItem: React.FC<{
   routeName: string
 }> = ({children, href, routeName}) => {
   const currentRoute = useNavigationState(getCurrentRoute)
-  const isActive = isTab(currentRoute.name, routeName)
+  const store = useStores()
+  const isActive =
+    currentRoute.name === 'Profile'
+      ? isTab(currentRoute.name, routeName) &&
+        (currentRoute.params as CommonNavigatorParams['Profile']).name ===
+          store.me.handle
+      : isTab(currentRoute.name, routeName)
+
   return (
     <Link href={href} style={styles.ctrl}>
       {children({isActive})}