Spaces:
Running
Running
File size: 4,850 Bytes
0ab8c90 947c08e cffd4ca 0ab8c90 947c08e 0ab8c90 947c08e 0ab8c90 947c08e 0ab8c90 947c08e 0ab8c90 947c08e 0ab8c90 947c08e 0ab8c90 947c08e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
import React, { useEffect, useState, useContext, useCallback } from 'react';
import { Link, usePathname, useFocusEffect } from 'expo-router';
import { StyleSheet, View} from 'react-native';
import { __styles } from './stylesheet/styles';
import storage from '@/constants/module/storages/storage';
import { Icon, MD3Colors, Button, Text, TouchableRipple } from 'react-native-paper';
import Theme from '@/constants/theme';
import {useWindowDimensions} from 'react-native';
import MenuButton from './components/menu_button';
import { CONTEXT } from '@/constants/module/context';
import Storage from '@/constants/module/storages/storage';
const Menu = () => {
const [style, setStyle]:any = useState("")
const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
const [showMenuContext,setShowMenuContext]:any = useState(true)
const Dimensions = useWindowDimensions();
useFocusEffect(useCallback(() => {
(async ()=>{
const MENU_STATE = await Storage.get("MENU_STATE")
if (MENU_STATE === null || MENU_STATE === undefined) setShowMenuContext(true)
else setShowMenuContext(MENU_STATE)
})()
return () => {
}
},[]))
useEffect(() => {
(async ()=>{
console.log(showMenuContext)
setStyle(__styles(themeTypeContext,Dimensions))
})()
},[])
return (<>{style && <>
<View
style={{
...style.menu_container,
position: showMenuContext ? "relative" : "absolute",
height: showMenuContext ? "100%" : "auto",
backgroundColor: showMenuContext? Theme[themeTypeContext].background_color : "transparent",
marginBottom: showMenuContext ? 0 : Dimensions.height*0.015,
borderRightWidth: showMenuContext ? 0.5 : 0,
}}
>
<>{showMenuContext &&
<>
<View
style={{
paddingVertical: showMenuContext ? 12 : 18,
width:"100%",
height:"auto",
display:"flex",
justifyContent:"center",
alignItems:"center",
borderBottomWidth: 0.5,
borderColor: Theme[themeTypeContext].border_color,
}}
>
<Icon source={"menu-open"} size={((Dimensions.width+Dimensions.height)/2)*0.04} color={Theme[themeTypeContext].icon_color}/>
</View>
<View
style={style.menu_box}
>
<MenuButton pathname="/recent" label="Recent" icon="history"/>
<MenuButton pathname="/bookmark" label="Bookmark" icon="bookmark"/>
<MenuButton pathname="/explore" label="Explore" icon="compass"/>
<MenuButton pathname="/setting" label="Setting" icon="cog"/>
</View>
</>
}</>
<TouchableRipple
rippleColor={Theme[themeTypeContext].ripple_color_outlined}
onPress={async () => {
await Storage.store("MENU_STATE", !showMenuContext)
setShowMenuContext(!showMenuContext)
}}
style={{
backgroundColor: showMenuContext ? Theme[themeTypeContext].background_color : Theme[themeTypeContext].button_color,
borderTopRightRadius: showMenuContext ? 0 : ((Dimensions.height+Dimensions.width)/2)*0.015,
borderBottomRightRadius: showMenuContext ? 0 : ((Dimensions.height+Dimensions.width)/2)*0.015,
padding:8,
height:"auto",
width:"auto",
paddingVertical: showMenuContext ? 12 : 18,
justifyContent:"center",
alignItems:"center",
borderRightWidth: showMenuContext ? 0 : 0.5,
borderBottomWidth: showMenuContext ? 0 : 0.5,
borderTopWidth: showMenuContext ? 0.5 : 0.5,
borderColor: Theme[themeTypeContext].border_color,
}}
>
<Icon source={showMenuContext ? "chevron-left" : "chevron-right"} size={((Dimensions.width+Dimensions.height)/2)*0.0375} color={Theme[themeTypeContext].icon_color}/>
</TouchableRipple>
</View>
</>}</>);
}
export default Menu;
|