add drawer on big screen

web-ridge · Jun 6, 2023 · 2069383 · 2069383
1 parent 541adc5
commit 2069383
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 34 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -92,15 +92,24 @@ const navigationRoot = {
   [NavigationRoots.RootHome]: createBottomTabsRoot(
     [BottomRoot.Home, BottomRoot.Posts, BottomRoot.Account],
     {
-      breakingPointWidth: 500,
+      breakingPointWidth: 600,
       components: {
         // override: HeaderWeb,
         start: ({ orientation }) => {
           if (orientation === 'vertical') {
             return null;
           }
           return (
-            <View>
+            <View
+              style={{
+                marginTop: 24,
+                marginBottom: 24,
+                alignItems: 'center',
+                justifyContent: 'center',
+                // alignSelf: 'center',
+                paddingHorizontal: 16,
+              }}
+            >
               <Image
                 source={{
                   uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2008px-Google_%22G%22_Logo.svg.png',

diff --git a/src/web/BottomTabWeb.tsx b/src/web/BottomTabWeb.tsx
@@ -18,11 +18,13 @@ function BottomTabWeb({
   bottomTab,
   count,
   orientation,
+  aboveDrawerBreakingPoint,
 }: {
   orientation: Orientation;
   isSelected: boolean;
   bottomTab: BottomTabType;
   count?: string | number | undefined;
+  aboveDrawerBreakingPoint: boolean;
 }) {
   const { theme } = React.useContext(RidgeNavigationContext);
 
@@ -31,7 +33,10 @@ function BottomTabWeb({
       {(linkProps) => (
         <Pressable
           {...linkProps}
-          style={styles.touchable}
+          style={[
+            styles.touchable,
+            aboveDrawerBreakingPoint && styles.touchableBig,
+          ]}
           accessibilityRole="button"
           accessibilityLabel={bottomTab.title()}
         >
@@ -41,6 +46,7 @@ function BottomTabWeb({
                 <View
                   style={[
                     styles.iconWrapper,
+                    aboveDrawerBreakingPoint && styles.iconWrapperBig,
                     {
                       backgroundColor:
                         (isSelected || hovered || pressed) &&
@@ -55,37 +61,62 @@ function BottomTabWeb({
                       : undefined,
                   ]}
                 >
-                  <View style={styles.badge}>
-                    <BottomTabBadge visible={!!count}>{count}</BottomTabBadge>
+                  {!aboveDrawerBreakingPoint && (
+                    <View style={styles.badge}>
+                      <BottomTabBadge visible={!!count}>{count}</BottomTabBadge>
+                    </View>
+                  )}
+                  <View style={styles.leftWrapper}>
+                    <Image
+                      source={
+                        isSelected ? bottomTab.selectedIcon : bottomTab.icon
+                      }
+                      style={[
+                        orientation === 'horizontal' && styles.horizontalIcon,
+                        orientation === 'vertical' && styles.verticalIcon,
+                        {
+                          tintColor: isSelected
+                            ? theme.bottomBar.selectedTextColor
+                            : theme.bottomBar.textColor,
+                        },
+                      ]}
+                    />
+                    {aboveDrawerBreakingPoint && (
+                      <Text
+                        style={[
+                          styles.title,
+                          {
+                            color: isSelected
+                              ? theme.bottomBar.selectedTextColor
+                              : theme.bottomBar.textColor,
+                          },
+                        ]}
+                      >
+                        {bottomTab.title()}
+                      </Text>
+                    )}
                   </View>
-                  <Image
-                    source={
-                      isSelected ? bottomTab.selectedIcon : bottomTab.icon
-                    }
+                  {aboveDrawerBreakingPoint && (
+                    <View style={styles.badgeRight}>
+                      <Text>443</Text>
+                    </View>
+                  )}
+                </View>
+                <View style={styles.spacer} />
+                {!aboveDrawerBreakingPoint && (
+                  <Text
                     style={[
-                      orientation === 'horizontal' && styles.horizontalIcon,
-                      orientation === 'vertical' && styles.verticalIcon,
+                      styles.title,
                       {
-                        tintColor: isSelected
+                        color: isSelected
                           ? theme.bottomBar.selectedTextColor
                           : theme.bottomBar.textColor,
                       },
                     ]}
-                  />
-                </View>
-                <View style={styles.spacer} />
-                <Text
-                  style={[
-                    styles.title,
-                    {
-                      color: isSelected
-                        ? theme.bottomBar.selectedTextColor
-                        : theme.bottomBar.textColor,
-                    },
-                  ]}
-                >
-                  {bottomTab.title()}
-                </Text>
+                  >
+                    {bottomTab.title()}
+                  </Text>
+                )}
               </View>
             );
           }}
@@ -106,16 +137,38 @@ const styles = StyleSheet.create({
     paddingBottom: 16,
     // margin: 3,
   },
+  leftWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 0,
+  },
+  badgeRight: {
+    flex: 1,
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+  touchableBig: {
+    maxWidth: '100%',
+    maxHeight: 64,
+  },
   spacer: {
     height: 4,
   },
   iconWrapper: {
-    borderRadius: 16,
+    borderRadius: 360,
     width: 64,
     height: 32,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  iconWrapperBig: {
+    height: 56,
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    paddingLeft: 6,
+    paddingRight: 16,
+  },
   touchableHovered: {
     backgroundColor: 'rgba(0, 0, 0, 0.04)',
   },

diff --git a/src/web/BottomTabsWrapperWeb.tsx b/src/web/BottomTabsWrapperWeb.tsx
@@ -16,13 +16,19 @@ function BottomTabsWrapperWeb({ children }: { children: any }) {
   const aboveBreakingPoint = useAboveBreakingPoint(
     getBreakingPointFromRoot(currentRoot)
   );
+
+  const aboveDrawerBreakingPoint = useAboveBreakingPoint(1240);
+
   const orientation = aboveBreakingPoint ? 'horizontal' : 'vertical';
 
   if (currentRoot?.type !== 'bottomTabs') {
     return children;
   }
   const inner = (
-    <OriginalBottomTabs orientation={orientation}>
+    <OriginalBottomTabs
+      orientation={orientation}
+      aboveDrawerBreakingPoint={aboveDrawerBreakingPoint}
+    >
       {children}
     </OriginalBottomTabs>
   );
@@ -42,9 +48,11 @@ function BottomTabsWrapperWeb({ children }: { children: any }) {
 export function OriginalBottomTabs({
   children,
   orientation,
+  aboveDrawerBreakingPoint,
 }: {
   children: any;
   orientation: 'horizontal' | 'vertical';
+  aboveDrawerBreakingPoint: boolean;
 }) {
   const { currentRoot } = useCurrentRoot();
   const { theme } = React.useContext(OptimizedContext);
@@ -64,15 +72,16 @@ export function OriginalBottomTabs({
             backgroundColor: theme.bottomBar.backgroundColor,
           },
           bottomStyles[orientation],
+          aboveDrawerBreakingPoint && bottomStyles.horizontalBig,
         ]}
       >
         {currentRoot?.components?.start ? (
           <currentRoot.components.start orientation={orientation} />
         ) : null}
-        <View style={styles.spacer} />
         {currentRoot.children.map((child, index) => (
           <BottomTab
             orientation={orientation}
+            aboveDrawerBreakingPoint={aboveDrawerBreakingPoint}
             key={child.path}
             bottomTab={child}
             isSelected={bottomTabIndex === index}
@@ -99,9 +108,7 @@ const styles = StyleSheet.create({
     zIndex: 100,
     alignItems: 'center',
   },
-  spacer: {
-    height: 24,
-  },
+
   horizontal: { flexDirection: 'row-reverse' },
   vertical: { flexDirection: 'column' },
 });
@@ -124,12 +131,15 @@ const bottomStyles = StyleSheet.create({
   horizontal: {
     flexDirection: 'column',
     justifyContent: 'flex-start',
-    paddingTop: 24,
   },
   vertical: {
     flexDirection: 'row',
     justifyContent: 'center',
   },
+  horizontalBig: {
+    width: 320,
+    alignItems: 'flex-start',
+  },
 });
 
 export default React.memo(BottomTabsWrapperWeb);