diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx index 1bc1839..a44030b 100644 --- a/src/components/AppBar/AppBar.tsx +++ b/src/components/AppBar/AppBar.tsx @@ -177,13 +177,13 @@ export const AppBar = () => { onClick={() => { setAnchorElUser(null) - navigate(appPrivateRoutes.relays) + navigate(appPrivateRoutes.settings) }} sx={{ justifyContent: 'center' }} > - Relays + Settings { + const theme = useTheme() + + const navigate = useNavigate() + const usersPubkey = useSelector((state: State) => state.auth.usersPubkey) + + const listItem = (label: string, disabled = false) => { + return ( + <> + + + {!disabled && ( + + )} + + ) + } + + return ( + + Settings + + } + > + { + navigate(getProfileSettingsRoute(usersPubkey!)) + }} + > + + + + {listItem('Profile')} + + { + navigate(appPrivateRoutes.relays) + }} + > + + + + {listItem('Relays')} + + + ) +} diff --git a/src/pages/relays/index.tsx b/src/pages/settings/relays/index.tsx similarity index 97% rename from src/pages/relays/index.tsx rename to src/pages/settings/relays/index.tsx index c5ba03f..194b366 100644 --- a/src/pages/relays/index.tsx +++ b/src/pages/settings/relays/index.tsx @@ -1,37 +1,36 @@ -import { useEffect, useState } from 'react' -import { Box, List, ListItem, TextField } from '@mui/material' -import RouterIcon from '@mui/icons-material/Router' -import styles from './style.module.scss' -import Switch from '@mui/material/Switch' -import ListItemText from '@mui/material/ListItemText' -import Divider from '@mui/material/Divider' -import { NostrController } from '../../controllers' -import { - RelayMap, - RelayInfoObject, - RelayFee, - RelayConnectionState -} from '../../types' +import ContentCopyIcon from '@mui/icons-material/ContentCopy' +import ElectricBoltIcon from '@mui/icons-material/ElectricBolt' +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown' +import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp' import LogoutIcon from '@mui/icons-material/Logout' -import { useAppSelector, useAppDispatch } from '../../hooks' -import { - compareObjects, - shorten, - hexToNpub, - capitalizeFirstLetter -} from '../../utils' +import RouterIcon from '@mui/icons-material/Router' +import { Box, List, ListItem, TextField, Tooltip } from '@mui/material' +import Button from '@mui/material/Button' +import Divider from '@mui/material/Divider' +import InputAdornment from '@mui/material/InputAdornment' +import ListItemText from '@mui/material/ListItemText' +import Switch from '@mui/material/Switch' +import { useEffect, useState } from 'react' +import { toast } from 'react-toastify' +import { NostrController } from '../../../controllers' +import { useAppDispatch, useAppSelector } from '../../../hooks' import { setRelayMapAction, setRelayMapUpdatedAction -} from '../../store/actions' -import { toast } from 'react-toastify' -import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown' -import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp' -import ContentCopyIcon from '@mui/icons-material/ContentCopy' -import ElectricBoltIcon from '@mui/icons-material/ElectricBolt' -import { Tooltip } from '@mui/material' -import InputAdornment from '@mui/material/InputAdornment' -import Button from '@mui/material/Button' +} from '../../../store/actions' +import { + RelayConnectionState, + RelayFee, + RelayInfoObject, + RelayMap +} from '../../../types' +import { + capitalizeFirstLetter, + compareObjects, + hexToNpub, + shorten +} from '../../../utils' +import styles from './style.module.scss' export const RelaysPage = () => { const nostrController = NostrController.getInstance() diff --git a/src/pages/relays/style.module.scss b/src/pages/settings/relays/style.module.scss similarity index 98% rename from src/pages/relays/style.module.scss rename to src/pages/settings/relays/style.module.scss index 25d6347..66e8c33 100644 --- a/src/pages/relays/style.module.scss +++ b/src/pages/settings/relays/style.module.scss @@ -1,4 +1,4 @@ -@import '../../colors.scss'; +@import '../../../colors.scss'; .container { margin-top: 25px; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 5f61b49..358b12d 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,21 +1,23 @@ -import { HomePage } from '../pages/home' import { CreatePage } from '../pages/create' +import { HomePage } from '../pages/home' import { LandingPage } from '../pages/landing/LandingPage' import { Login } from '../pages/login' import { ProfilePage } from '../pages/profile' -import { hexToNpub } from '../utils' +import { SettingsPage } from '../pages/settings/Settings' +import { ProfileSettingsPage } from '../pages/settings/profile' +import { RelaysPage } from '../pages/settings/relays' import { SignPage } from '../pages/sign' import { VerifyPage } from '../pages/verify' -import { ProfileSettingsPage } from '../pages/settings/profile' -import { RelaysPage } from '../pages/relays' +import { hexToNpub } from '../utils' export const appPrivateRoutes = { homePage: '/', create: '/create', sign: '/sign', verify: '/verify', + settings: '/settings', profileSettings: '/settings/profile/:npub', - relays: '/relays' + relays: '/settings/relays' } export const appPublicRoutes = { @@ -65,6 +67,10 @@ export const privateRoutes = [ path: appPrivateRoutes.verify, element: }, + { + path: appPrivateRoutes.settings, + element: + }, { path: appPrivateRoutes.profileSettings, element: