diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/Menu/index.js
index eb5ce203e..37cf6bf7d 100644
--- a/apps/mobile/src/components/Menu/index.js
+++ b/apps/mobile/src/components/Menu/index.js
@@ -1,13 +1,9 @@
import React from 'react';
-import {ScrollView, StatusBar, View} from 'react-native';
+import {ScrollView, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {useTracked} from '../../provider';
import {Actions} from '../../provider/Actions';
-import {ColorSection} from './ColorSection';
-import {MenuListItem} from './MenuListItem';
-import {TagsSection} from './TagsSection';
-import {UserSection} from './UserSection';
-import Seperator from '../Seperator';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {DDS} from '../../services/DeviceDetection';
import {
ACCENT,
COLOR_SCHEME,
@@ -15,61 +11,73 @@ import {
COLOR_SCHEME_LIGHT,
setColorScheme,
} from '../../utils/Colors';
-import {MenuItemsList} from "../../utils/index"
+import {MenuItemsList} from '../../utils/index';
import {MMKV} from '../../utils/mmkv';
+import {SIZE} from '../../utils/SizeUtils';
+import Seperator from '../Seperator';
+import Heading from '../Typography/Heading';
+import Paragraph from '../Typography/Paragraph';
+import {ColorSection} from './ColorSection';
+import {MenuListItem} from './MenuListItem';
+import {TagsSection} from './TagsSection';
+import {UserSection} from './UserSection';
-export const Menu = ({close = () => {}, hide, noTextMode = false}) => {
- const [state, dispatch] = useTracked();
- const {colors} = state;
- const insets = useSafeAreaInsets();
+export const Menu = React.memo(
+ () => {
+ const [state, dispatch] = useTracked();
+ const {colors} = state;
+ const insets = useSafeAreaInsets();
+ const noTextMode = DDS.isTab && !DDS.isSmallTab;
+ function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
+ let newColors = setColorScheme(colors, accent);
+ dispatch({type: Actions.THEME, colors: newColors});
+ }
- function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
- let newColors = setColorScheme(colors, accent);
- dispatch({type: Actions.THEME, colors: newColors});
- }
+ React.useEffect(() => {
+ console.log('rerendering drawer');
+ });
- const BottomItemsList = [
- {
- name: 'Night mode',
- icon: 'theme-light-dark',
- func: () => {
- if (!colors.night) {
- MMKV.setStringAsync('theme', JSON.stringify({night: true}));
- changeColorScheme(COLOR_SCHEME_DARK);
- } else {
- MMKV.setStringAsync('theme', JSON.stringify({night: false}));
- changeColorScheme(COLOR_SCHEME_LIGHT);
- }
+ const BottomItemsList = [
+ {
+ name: 'Night mode',
+ icon: 'theme-light-dark',
+ func: () => {
+ if (!colors.night) {
+ MMKV.setStringAsync('theme', JSON.stringify({night: true}));
+ changeColorScheme(COLOR_SCHEME_DARK);
+ } else {
+ MMKV.setStringAsync('theme', JSON.stringify({night: false}));
+ changeColorScheme(COLOR_SCHEME_LIGHT);
+ }
+ },
+ switch: true,
+ on: !!colors.night,
+ close: false,
},
- switch: true,
- on: !!colors.night,
- close: false,
- },
- {
- name: 'Settings',
- icon: 'cog-outline',
- close: true,
- },
- ];
-
- return (
-
-
+ {
+ name: 'Settings',
+ icon: 'cog-outline',
+ close: true,
+ },
+ ];
+ return (
+
+
{MenuItemsList.map((item, index) => (
{}, hide, noTextMode = false}) => {
/>
))}
- {noTextMode ? null : }
-
-
+ {noTextMode ? null : }
+
+
+
+ Your Pins
+
+
+ You have not pinned anything yet. You can pin notebook topics and
+ tags here.
+
+
+
-
- {BottomItemsList.map((item, index) => (
-
- ))}
-
-
+
+ {BottomItemsList.map((item, index) => (
+
+ ))}
+
+
-
+
+
-
- );
-};
+ );
+ },
+ () => true,
+);
diff --git a/apps/mobile/src/navigation/Drawer.js b/apps/mobile/src/navigation/Drawer.js
index 58ccfc929..93006d7d8 100644
--- a/apps/mobile/src/navigation/Drawer.js
+++ b/apps/mobile/src/navigation/Drawer.js
@@ -1,68 +1,66 @@
-import * as React from "react";
-import {eSubscribeEvent, eUnSubscribeEvent} from "../services/EventManager";
-import {eCloseSideMenu, eOpenSideMenu} from "../utils/Events";
-import {NavigationContainer} from "@react-navigation/native";
-import {sideMenuRef} from "../utils/Refs";
-import {Dimensions} from "react-native";
-import {NavigatorStack} from "./NavigatorStack";
-import {Menu} from "../components/Menu";
-import NavigationService from "../services/Navigation";
+import * as React from 'react';
+import {eSubscribeEvent, eUnSubscribeEvent} from '../services/EventManager';
+import {eCloseSideMenu, eOpenSideMenu} from '../utils/Events';
+import {NavigationContainer} from '@react-navigation/native';
+import {sideMenuRef} from '../utils/Refs';
+import {Dimensions} from 'react-native';
+import {NavigatorStack} from './NavigatorStack';
+import {Menu} from '../components/Menu';
+import NavigationService from '../services/Navigation';
import {createDrawerNavigator} from '@react-navigation/drawer';
-import {DDS} from "../services/DeviceDetection";
+import {DDS} from '../services/DeviceDetection';
const Drawer = createDrawerNavigator();
export const NavigationStack = ({component = NavigatorStack}) => {
- const [locked, setLocked] = React.useState(false);
+ const [locked, setLocked] = React.useState(false);
- const setGestureDisabled = () => {
- setLocked(true);
+ const setGestureDisabled = () => {
+ setLocked(true);
+ };
+
+ const setGestureEnabled = () => {
+ setLocked(false);
+ };
+
+ React.useEffect(() => {
+ eSubscribeEvent(eOpenSideMenu, setGestureEnabled);
+ eSubscribeEvent(eCloseSideMenu, setGestureDisabled);
+ return () => {
+ eUnSubscribeEvent(eOpenSideMenu, setGestureEnabled);
+ eUnSubscribeEvent(eCloseSideMenu, setGestureDisabled);
};
+ }, []);
- const setGestureEnabled = () => {
- setLocked(false);
- };
-
- React.useEffect(() => {
- eSubscribeEvent(eOpenSideMenu, setGestureEnabled);
- eSubscribeEvent(eCloseSideMenu, setGestureDisabled);
- return () => {
- eUnSubscribeEvent(eOpenSideMenu, setGestureEnabled);
- eUnSubscribeEvent(eCloseSideMenu, setGestureDisabled);
- };
- }, []);
-
- return (
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+ );
};
-const DrawerComponent = (props) => {
- return (
-