Merge pull request #641 from streamplace/natb/a-href-in-sidebar

fix: add proper web link behavior in sidebar

js/app/components/aqlink.tsx

···
   Link,
   NavigationProp,
   ParamListBase,
+  useLinkBuilder,
   useNavigation,
 } from "@react-navigation/native";
 import usePlatform from "hooks/usePlatform";
···
   }, []);
   return <Loading />;
 }
+
+// generates the proper href for a given LinkParams object, for better web support
+export function useAQLinkHref(to: LinkParams): { href?: string } {
+  const { isWeb } = usePlatform();
+  const buildLink = useLinkBuilder();
+
+  if (!isWeb) {
+    return { href: undefined };
+  }
+
+  try {
+    const href = buildLink(to.screen, to.params);
+    return { href };
+  } catch (e) {
+    console.warn("Failed to build link for", to, e);
+    return { href: undefined };
+  }
+}

js/app/components/sidebar/sidebar-item.tsx

···
-import { Text, useTheme } from "@streamplace/components";
+import { DrawerNavigationState, ParamListBase } from "@react-navigation/native";
+import { Text, useTheme, zero } from "@streamplace/components";
+import { useAQLinkHref } from "components/aqlink";
 import React, { ReactNode, useState } from "react";
 import {
+  GestureResponderEvent,
+  Pressable,
   PressableStateCallbackType,
   StyleProp,
   View,
   ViewStyle,
 } from "react-native";
-import { Pressable } from "react-native-gesture-handler";
 
 export default function SidebarItem({
   icon,
···
   collapsed,
   active,
   onPress,
+  route,
   style = null,
   tint = "rgba(189, 110, 134)",
 }: {
···
   label: string | ReactNode;
   collapsed: boolean;
   active: boolean;
-  onPress: () => void;
+  onPress: (event: GestureResponderEvent) => void;
+  route?: DrawerNavigationState<ParamListBase>["routes"][number];
   style?:
     | StyleProp<ViewStyle>
     | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
···
 }) {
   const [hover, setHover] = useState<boolean>(false);
   const theme = useTheme();
+  const { href } = useAQLinkHref({
+    screen: route?.name || "Home",
+    params: route?.params as any,
+  });
 
   // Handle different icon types - component, JSX element, or function returning JSX
   const renderIcon = () => {
···
     }
 
     // Fallback
-    console.log("tried to render item, but couldn't", (icon as any).$$typeof);
+    console.log(
+      "tried to render item for route",
+      label,
+      href,
+      ", but couldn't",
+      (icon as any).$$typeof,
+    );
 
     return <Text>📄</Text>;
   };
···
       style={style}
       onHoverIn={() => setHover(true)}
       onHoverOut={() => setHover(false)}
+      role="link"
+      accessibilityLabel={typeof label === "string" ? label : "Link to " + href}
+      // @ts-ignore This makes it render as <a> on web!
+      href={href}
     >
       <View
         style={[
+          zero.r.md,
+          zero.layout.flex.row,
+          zero.layout.flex.alignCenter,
+          zero.px[3],
+          zero.gap.all[2],
           {
             backgroundColor:
               hover || active
···
                     ", " + (active && !hover ? "0.1" : "0.25") + ")",
                   )
                 : undefined,
-            borderRadius: 12,
-            flexDirection: "row",
-            justifyContent: "flex-start",
-            alignItems: "center",
-            paddingHorizontal: 12,
-            gap: 8,
             overflow: "hidden",
           },
         ]}
       >
-        <View style={[{ width: 32, paddingVertical: 12 }]}>{renderIcon()}</View>
+        <View style={[zero.w[8], zero.py[3]]}>{renderIcon()}</View>
         {!collapsed && (
           <View
             style={[

js/app/components/sidebar/sidebar.tsx

···
   ParamListBase,
   useNavigation,
 } from "@react-navigation/native";
-import { Text, useTheme } from "@streamplace/components";
+import { Text, zero } from "@streamplace/components";
 import React from "react";
 import { Image, Platform, View } from "react-native";
 import Animated, {
···
   widthAnim,
   externalItems = [],
 }: SidebarProps) {
-  const theme = useTheme();
   const navigation = useNavigation();
-  // Apply the defined type to the component props
   const animatedSidebarStyle = useAnimatedStyle(() => {
     return {
       minWidth: widthAnim.value,
···
   return (
     <Animated.View
       style={[
-        animatedSidebarStyle, // Apply the animated style
-        { padding: 8, gap: 8, flexDirection: "column" },
+        animatedSidebarStyle,
+        zero.p[2],
+        zero.gap.all[2],
+        zero.layout.flex.column,
       ]}
     >
       <View
         style={[
+          zero.layout.flex.row,
+          zero.layout.flex.alignCenter,
+          zero.gap.all[3],
           {
-            marginTop: Platform.OS === "ios" ? 29 : 12,
+            marginTop: Platform.OS === "ios" ? 29 : 8,
             marginBottom: 20,
-            paddingLeft: 10,
-            gap: 12,
-            flexDirection: "row",
-            justifyContent: "flex-start",
-            alignItems: "center",
+            paddingLeft: 11,
           },
         ]}
       >
         <Image
           source={require("../../assets/images/cube.png")}
-          style={[{ height: 30, width: 28 }]}
+          height={30}
+          width={28}
+          style={{ width: 28, height: 30, resizeMode: "contain" }}
         />
         {!collapsed && <Text size="2xl">Streamplace</Text>}
       </View>
···
           | React.ComponentType<any>
           | undefined;
 
+        // if we have style display: none on the drawer item, completely skip rendering it
+        const drawerItemStyle = options.drawerItemStyle;
+        let isHidden = false;
+        if (
+          drawerItemStyle &&
+          typeof drawerItemStyle === "object" &&
+          "display" in drawerItemStyle &&
+          (drawerItemStyle as any).display === "none"
+        ) {
+          isHidden = true;
+        }
+        if (isHidden) {
+          return null;
+        }
+
         return (
           <SidebarItem
             key={route.key}
···
             label={label}
             active={descriptor.navigation.isFocused()}
             collapsed={collapsed}
-            onPress={() => {
+            route={route}
+            onPress={(ev) => {
+              ev.preventDefault();
               if (route.name === "Home") {
-                // copy logic for 'Home' to reset the stack
+                // reset the stack (b/c streamlist is in the same stack as home)
                 navigation.dispatch(
                   CommonActions.reset({
                     index: 0,
···
               }
             }}
             style={options.drawerItemStyle}
-            tint={options.drawerActiveTintColor as string} // Assuming tint is a string color or undefined
+            tint={options.drawerActiveTintColor as string}
           />
         );
       })}