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>

1 files changed, 20 insertions, 8 deletions

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})}