From 6729babdb5d42428bdec82e03b2f478e4c4218da Mon Sep 17 00:00:00 2001 From: sahil-tgs Date: Tue, 16 Jul 2024 00:07:33 +0530 Subject: [PATCH] TopNavBar Added --- frontend/src/basic/Main.tsx | 97 ++++---- frontend/src/basic/TopNavBar/TopNavBar.tsx | 250 +++++++++++++++++++++ frontend/src/basic/TopNavBar/index.tsx | 3 + frontend/src/basic/index.ts | 1 + 4 files changed, 297 insertions(+), 54 deletions(-) create mode 100644 frontend/src/basic/TopNavBar/TopNavBar.tsx create mode 100644 frontend/src/basic/TopNavBar/index.tsx diff --git a/frontend/src/basic/Main.tsx b/frontend/src/basic/Main.tsx index b87d564a..c48cf9eb 100644 --- a/frontend/src/basic/Main.tsx +++ b/frontend/src/basic/Main.tsx @@ -1,41 +1,44 @@ import React, { useContext } from 'react'; import { MemoryRouter, BrowserRouter, Routes, Route } from 'react-router-dom'; -import { Box, Slide, Typography, styled } from '@mui/material'; -import { type UseAppStoreType, AppContext, closeAll } from '../contexts/AppContext'; - -import { RobotPage, MakerPage, BookPage, OrderPage, SettingsPage, NavBar, MainDialogs } from './'; -import RobotAvatar from '../components/RobotAvatar'; +import { Box, Slide, styled } from '@mui/material'; +import { type UseAppStoreType, AppContext } from '../contexts/AppContext'; +import { + TopNavBar, + NavBar, + RobotPage, + MakerPage, + BookPage, + OrderPage, + SettingsPage, + MainDialogs, +} from './'; import Notifications from '../components/Notifications'; - import { useTranslation } from 'react-i18next'; import { GarageContext, type UseGarageStoreType } from '../contexts/GarageContext'; const Router = window.NativeRobosats === undefined ? BrowserRouter : MemoryRouter; -const TestnetTypography = styled(Typography)({ - height: 0, -}); - -interface MainBoxProps { - navbarHeight: number; -} - -const MainBox = styled(Box)((props) => ({ - position: 'absolute', - top: '50%', - left: '50%', - transform: `translate(-50%, -50%) translate(0, -${props.navbarHeight / 2}em)`, +const MainContent = styled(Box)(({ theme }) => ({ + marginTop: '100px', + marginBottom: '80px', + padding: theme.spacing(2), + overflowY: 'auto', + overflowX: 'hidden', + height: 'calc(100vh - 180px)', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', })); const Main: React.FC = () => { const { t } = useTranslation(); - const { settings, page, slideDirection, setOpen, windowSize, navbarHeight } = + const { settings, page, slideDirection, setOpen, windowSize } = useContext(AppContext); const { garage } = useContext(GarageContext); return ( - + { @@ -44,36 +47,25 @@ const Main: React.FC = () => { rewards={garage.getSlot()?.getRobot()?.earnedRewards} windowWidth={windowSize?.width} /> - {settings.network === 'testnet' ? ( - - {t('Using Testnet Bitcoin')} - - ) : ( - <> - )} - - + - {['/robot/:token?', '/', ''].map((path, index) => { - return ( - -
- -
- - } - key={index} - /> - ); - })} - + {['/robot/:token?', '/', ''].map((path, index) => ( + +
+ +
+ + } + key={index} + /> + ))} { } /> - { } /> - { } /> - { } /> - + diff --git a/frontend/src/basic/TopNavBar/TopNavBar.tsx b/frontend/src/basic/TopNavBar/TopNavBar.tsx new file mode 100644 index 00000000..abe0fdd4 --- /dev/null +++ b/frontend/src/basic/TopNavBar/TopNavBar.tsx @@ -0,0 +1,250 @@ +import React, { useContext, useState } from 'react'; +import { + AppBar, + Toolbar, + Typography, + IconButton, + Box, + useMediaQuery, + styled, + useTheme, + Drawer, + List, + ListItem, + ListItemText, + Divider, +} from '@mui/material'; +import MenuIcon from '@mui/icons-material/Menu'; +import CloseIcon from '@mui/icons-material/Close'; +import AccountCircleIcon from '@mui/icons-material/AccountCircle'; +import { AppContext, type UseAppStoreType, closeAll } from '../../contexts/AppContext'; +import { GarageContext, type UseGarageStoreType } from '../../contexts/GarageContext'; +import RobotAvatar from '../../components/RobotAvatar'; +import { RoboSatsTextIcon } from '../../components/Icons'; +import { useTranslation } from 'react-i18next'; + +const NAVBAR_HEIGHT = '64px'; + +const StyledAppBar = styled(AppBar)(({ theme, isMobile, drawerOpen }) => ({ + height: NAVBAR_HEIGHT, + display: 'flex', + justifyContent: 'center', + boxShadow: isMobile ? 'none' : '8px 8px 0px 0px rgba(0,0,0,1)', + backgroundColor: theme.palette.background.paper, + borderBottom: isMobile ? `2px solid ${theme.palette.mode === 'dark' ? '#fff' : '#000'}` : '', + border: !isMobile ? `2px solid ${theme.palette.mode === 'dark' ? '#fff' : '#000'}` : '', + borderRadius: isMobile ? '0' : '1vw', + padding: isMobile ? '0' : '1vh', + top: isMobile ? 0 : theme.spacing(2), + left: '50%', + transform: 'translateX(-50%)', + width: isMobile ? '100%' : 'calc(100% - 64px)', + position: 'fixed', + zIndex: 1100, + ...(drawerOpen && + isMobile && { + background: 'none', + backgroundColor: theme.palette.background.paper, + }), +})); + +const StyledToolbar = styled(Toolbar)(({ theme }) => ({ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + width: '100%', + padding: '0 5vw', + minHeight: NAVBAR_HEIGHT, +})); + +const CenterBox = styled(Box)({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + gap: '2vw', + flexGrow: 1, +}); + +const CenterButton = styled(Typography)(({ theme }) => ({ + cursor: 'pointer', + color: theme.palette.mode === 'dark' ? '#fff' : '#000', + '&:hover': { + textDecoration: 'underline', + }, +})); + +const MobileToolbarContent = styled(Box)(({ theme }) => ({ + display: 'flex', + justifyContent: 'flex-end', + alignItems: 'center', + width: '100%', + marginLeft: theme.spacing(2), +})); + +const TopNavBar = (): JSX.Element => { + const theme = useTheme(); + const { t } = useTranslation(); + const { setOpen, open } = useContext(AppContext); + const { garage } = useContext(GarageContext); + const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + + const [drawerOpen, setDrawerOpen] = useState(false); + + const slot = garage.getSlot(); + + const navItems = [ + { label: 'Robosats Info', key: 'info' }, + { label: 'Learn Robosats', key: 'learn' }, + { label: 'Community', key: 'community' }, + { label: 'Exchange Summary', key: 'exchange' }, + ]; + + const toggleDrawer = (open: boolean) => () => { + setDrawerOpen(open); + }; + + const handleLogoClick = () => { + setOpen({ ...closeAll, client: !open.client }); + }; + + return ( + <> + + + + + + + + + {isMobile ? ( + <> + + {drawerOpen ? ( + + ) : ( + + )} + + + { + setOpen({ ...closeAll, profile: !open.profile }); + }} + style={{ visibility: slot?.hashId ? 'visible' : 'hidden' }} + > + {slot?.hashId ? ( + + ) : ( + + )} + + + + + + + + + {navItems.map((item) => ( + setOpen({ ...closeAll, [item.key]: !open[item.key] })} + sx={{ + borderBottom: `1px solid ${theme.palette.divider}`, + padding: theme.spacing(2), + }} + > + + + ))} + + + + ) : ( + <> + + + {navItems.map((item) => ( + setOpen({ ...closeAll, [item.key]: !open[item.key] })} + > + {t(item.label)} + + ))} + + { + setOpen({ ...closeAll, profile: !open.profile }); + }} + style={{ visibility: slot?.hashId ? 'visible' : 'hidden' }} + > + {slot?.hashId ? ( + + ) : ( + + )} + + + )} + + + + ); +}; + +export default TopNavBar; diff --git a/frontend/src/basic/TopNavBar/index.tsx b/frontend/src/basic/TopNavBar/index.tsx new file mode 100644 index 00000000..6de1d86b --- /dev/null +++ b/frontend/src/basic/TopNavBar/index.tsx @@ -0,0 +1,3 @@ +import TopNavBar from './TopNavBar'; + +export default TopNavBar; diff --git a/frontend/src/basic/index.ts b/frontend/src/basic/index.ts index b2a19d36..680dc23e 100644 --- a/frontend/src/basic/index.ts +++ b/frontend/src/basic/index.ts @@ -5,3 +5,4 @@ export { default as NavBar } from './NavBar'; export { default as OrderPage } from './OrderPage'; export { default as RobotPage } from './RobotPage'; export { default as SettingsPage } from './SettingsPage'; +export { default as TopNavBar } from './TopNavBar';