diff --git a/src/components/App/Apps/dashboard/RowSlideBar.tsx b/src/components/App/Apps/dashboard/RowSlideBar.tsx new file mode 100644 index 0000000..bb09b36 --- /dev/null +++ b/src/components/App/Apps/dashboard/RowSlideBar.tsx @@ -0,0 +1,20 @@ +import Stack from "@mui/material/Stack" + +const MenuSideBarRow = () => { + return ( + + {LanguageFireButton(setAnchorEl, locale)} + + + ) +} \ No newline at end of file diff --git a/src/components/App/Apps/dashboard/index-next.tsx b/src/components/App/Apps/dashboard/index-next.tsx index f166027..206f4b1 100644 --- a/src/components/App/Apps/dashboard/index-next.tsx +++ b/src/components/App/Apps/dashboard/index-next.tsx @@ -2,7 +2,7 @@ import { CssVarsProvider, useColorScheme, extendTheme, styled, useTheme } from " import {HTMLAttributes, useState, useEffect, SyntheticEvent, ReactNode, useMemo, useRef} from "react" import Stack from "@mui/material/Stack" -import {Tabs, Tab} from '@mui/material-next' +import {Tabs, Tab, } from '@mui/material-next' import AppBar from '@mui/material/AppBar' import type {SxProps, Theme, createTheme} from '@mui/material/' import Toolbar from '@mui/material/Toolbar' @@ -46,6 +46,7 @@ interface StyledTabProps { label?: string icon?: string | React.ReactElement> sx?:SxProps + id?: string } const StyledTabs = styled((props: StyledTabsProps) => ( @@ -123,6 +124,23 @@ const showLocationIcon = (locale: Locale) => { } } +const languageMenuClick = (e:React.MouseEvent, setAnchorEl: React.Dispatch>) => { + const kk = e.currentTarget.children[0] + setAnchorEl(kk) +} + +const LanguageFireButton = (setAnchorEl: React.Dispatch>, locale: Locale) => { + return ( + languageMenuClick(e, setAnchorEl)} + size='large' + sx={{ width: '3.5rem', height: '3.5rem' }} + > + {showLocationIcon(locale)} + + ) +} + const DashBoard = () => { const { hasContainer, @@ -142,7 +160,78 @@ const DashBoard = () => { const openMenu = Boolean(anchorEl) const { mode, setMode } = useColorScheme() const [showProfileDropdown, setShowProfileDropdown] = useState(false) - + const StyledTabsMobile = () => { + const [ready, setReady] = useState(false) + const [scrollDir, setScrollDir] = useState(1) + const theme = useTheme() + + return ( + + + + + { + isUnlocked && + <> + { + setShowMiner(true) + setShowAppStore(false) + }} sx={{ opacity: showMiner ? '1': '0.5'}} > + + + + { + setShowAppStore(true) + setShowMiner(false) + }} sx={{ opacity: showAppStore ? '1': '0.5'}}> + + + + } + + + { + const kk = e.currentTarget + setAnchorEl(kk) + + }}> + {showLocationIcon(locale)} + + + + + { + if (mode === 'light') { + return setMode('dark') + } + setMode('light') + }} + sx={{ position: 'fixed', right: '60px', opacity: menuValue === 3 ? '1': '0.5'}} > + + + + { + if (isUnlocked) { + setShowProfileDropdown(true) + }}} sx={{ width: '55px', position: 'fixed', right: '0px', opacity: menuValue === 0 ? '1': '0.5'}} > + + + + + + + + ) + } const ShowApp = () => { switch (true) { @@ -179,230 +268,141 @@ const DashBoard = () => { } + + + + + const ProforeIcon = () => { + return ( + + + + ) + } + + const LanguageMenu = () => { + + return ( + setAnchorEl(null)} + transformOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + > + {actions.map(action => ( + + locale !== action.name && + { + setLocale (action.name) + setAnchorEl(null) + }}> + {action.icon} + + + ))} + + ) + } + + const animeCONET = () => { + return ( + + ) + } + const MenuSideBar = () => { - - - const animeCONET = () => { - return ( - - ) - } - - useEffect(() => { - if (isUnlocked) { - if (showAppStore) { - setMenuValue(1) - } else { - setMenuValue(0) - } - } - - },[]) + const handleChange = (event: SyntheticEvent|null, newValue: number) => { - - if (event !== null ) { - if (newValue ===0 ) { - if (showMiner) { - return - } - setMenuValue(newValue) - setShowAppStore(false) - return setShowMiner (true) - } - if (newValue ===1) { - if (showAppStore) { - return - } - setMenuValue(newValue) - setShowAppStore(true) - return setShowMiner (false) + setMenuValue(newValue) + const uu = document.querySelector('#dos-111') + + if (!isUnlocked) { + if ( newValue ===0 ){ // language + setTimeout(() => { + return setAnchorEl(uu) + }, 100) + } - } - - } - - const StyledTabsMobile = () => { - const [ready, setReady] = useState(false) - const [scrollDir, setScrollDir] = useState(1) - const theme = useTheme() - - return ( - - - - - { - isUnlocked && - <> - { - setShowMiner(true) - setShowAppStore(false) - }} sx={{ opacity: showMiner ? '1': '0.5'}} > - - - - { - setShowAppStore(true) - setShowMiner(false) - }} sx={{ opacity: showAppStore ? '1': '0.5'}}> - - - - } - - - { - const kk = e.currentTarget - setAnchorEl(kk) - - }}> - {showLocationIcon(locale)} - - - - - { - if (mode === 'light') { - return setMode('dark') - } - setMode('light') - }} - sx={{ position: 'fixed', right: '60px', opacity: menuValue === 3 ? '1': '0.5'}} > - - - - { - if (isUnlocked) { - setShowProfileDropdown(true) - }}} sx={{ width: '55px', position: 'fixed', right: '0px', opacity: menuValue === 0 ? '1': '0.5'}} > - - - - - - - - ) - } - - const languageMenuClick = (e:React.MouseEvent) => { - const kk = e.currentTarget.children[0] - setAnchorEl(kk) - - } - + // if (event !== null ) { + // if (newValue ===0 ) { + // if (showMiner) { + // return + // } + // setMenuValue(newValue) + // setShowAppStore(false) + // return setShowMiner (true) + // } + // if (newValue ===1) { + // if (showAppStore) { + // return + // } + // setMenuValue(newValue) + // setShowAppStore(true) + // return setShowMiner (false) + // } - const LanguageMenu = () => { - - return ( - setAnchorEl(null)} - transformOrigin={{ - vertical: 'top', - horizontal: 'right', - }} - > - {actions.map(action => ( - - locale !== action.name && - { - setLocale (action.name) - setAnchorEl(null) - }}> - {action.icon} - - - ))} - - ) + // } + } return ( - <> - + > + {LanguageFireButton(setAnchorEl, locale)} + + + + // - { - isUnlocked && - <> - } sx={{paddingBottom: '2rem'}} /> - } sx={{paddingBottom: '2rem'}}/> - - - } - - - - - + // { + // isUnlocked && + // <> + // } sx={{paddingBottom: '2rem'}} /> + // } sx={{paddingBottom: '2rem'}}/> - { - if (mode === 'light') { - return setMode('dark') - } - setMode('light') - } - }> - } sx ={{ position: 'fixed', bottom: '5.5rem'}} /> - - - { - // if (isUnlocked) { - // setShowProfileDropdown(true) - // } - - } - }> - } sx={{ position: 'fixed', bottom: '0px', width: '1rem', fontSize: '30px'}}/> - - + // + // } + + + // {/* */} + + // } sx ={{ position: 'fixed', bottom: '5.5rem'}} /> + - - - setShowProfileDropdown(false)} - > - { - setShowProfileDropdown(false) - }} - /> - - + // + + ) } @@ -429,10 +429,29 @@ const DashBoard = () => { } return ( - - - - + <> + + + + + + + + + + + setShowProfileDropdown(false)} + > + { + setShowProfileDropdown(false) + }} + /> + + + ) }