fix: remove unused SideMenu dependency and add SideMenuSection

package.json

@@ -48,7 +48,6 @@
     "react-native-safe-area-context": "^3.0.5",
     "react-native-screens": "^2.9.0",
     "react-native-search-box": "standardnotes/react-native-search-box#f61a2b5",
-    "react-native-side-menu-updated": "^1.2.1",
     "react-native-sodium": "standardnotes/react-native-sodium#c548383",
     "react-native-store-review": "^0.1.5",
     "react-native-vector-icons": "6.6.0",

src/screens/SideMenu/SideMenuSection.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useMemo } from 'react';
+import { Root, Header, Title, CollapsedLabel } from './SideMenuSection.styled';
+import { SideMenuCell } from './SideMenuCell';
+
+export type SideMenuOption = {
+  text: string;
+  subtext?: string;
+  textClass?: 'info' | 'danger' | 'warning';
+  key?: string;
+  iconDesc?: {
+    type: string;
+    side?: 'left' | 'right';
+    name?: string;
+    value?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    size?: number;
+  };
+  dimmed?: boolean;
+  selected?: boolean;
+  onSelect?: () => void;
+  onLongPress?: () => void;
+};
+
+type Props = {
+  title: string;
+  collapsed?: boolean;
+  options?: SideMenuOption[];
+};
+
+export const SideMenuSection: React.FC<Props> = props => {
+  const [collapsed, setCollapsed] = useState(Boolean(props.collapsed));
+  const options = useMemo(() => {
+    return props.options || [];
+  }, [props.options]);
+  const collapsedLabel =
+    options.length > 0 ? options.length + ' Options' : 'Hidden';
+  return (
+    <Root>
+      <Header collapsed={collapsed} onPress={() => setCollapsed(!collapsed)}>
+        <>
+          <Title>{props.title}</Title>
+          {collapsed && <CollapsedLabel>{collapsedLabel}</CollapsedLabel>}
+        </>
+      </Header>
+
+      {!collapsed && (
+        <>
+          {options.map(option => {
+            return (
+              <SideMenuCell
+                text={option.text}
+                textClass={option.textClass}
+                subtext={option.subtext}
+                key={option.text + option.subtext + option.key}
+                iconDesc={option.iconDesc}
+                dimmed={option.dimmed}
+                selected={option.selected}
+                onSelect={option.onSelect}
+                onLongPress={option.onLongPress}
+              />
+            );
+          })}
+          {props.children}
+        </>
+      )}
+    </Root>
+  );
+};

yarn.lock

@@ -6288,13 +6288,6 @@ react-native-search-box@standardnotes/react-native-search-box#f61a2b5:
   dependencies:
     prop-types "^15.5.10"
 
-react-native-side-menu-updated@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/react-native-side-menu-updated/-/react-native-side-menu-updated-1.2.1.tgz#5513b0b40b7f4ce098c72b23617f07aed609fee7"
-  integrity sha512-ARslMh8Zwax+BvIWOOuxOR1Bq4Hc1d9FzbLk02uaxP0cXKH2RPlsMITJpCvLZuybKF0JuatrGEtWt6mxLv6tmA==
-  dependencies:
-    prop-types "^15.5.10"
-
 react-native-sodium@standardnotes/react-native-sodium#c548383:
   version "0.4.0"
   resolved "https://codeload.github.com/standardnotes/react-native-sodium/tar.gz/c548383e9076a33420e571c337061776f84d9991"