jveebs
3 years ago
parent
99f185bae6
commit
38739f6346
@ -1,7 +1,55 @@
|
||||
import { ProSidebarProvider } from 'react-pro-sidebar'
|
||||
import NavBar from './components/NavBar'
|
||||
import SideNav from './components/SideNav'
|
||||
|
||||
import Dashboard from './pages/Dashboard'
|
||||
import AboutUs from './pages/About-Us'
|
||||
import Privacy from './pages/Privacy'
|
||||
import Settings from './pages/Settings'
|
||||
import Support from './pages/Support'
|
||||
import ContactUs from './pages/Contact-Us'
|
||||
import Error from './pages/Error-Page'
|
||||
import './styles.css'
|
||||
|
||||
|
||||
export default function Main() {
|
||||
let Layout
|
||||
switch (window.location.pathname) {
|
||||
case "/":
|
||||
case "/dashboard":
|
||||
Layout = Dashboard
|
||||
break;
|
||||
case "/about-us":
|
||||
Layout = AboutUs
|
||||
break;
|
||||
case "/privacy":
|
||||
Layout = Privacy
|
||||
break;
|
||||
case "/settings":
|
||||
Layout = Settings
|
||||
break;
|
||||
case "/support":
|
||||
Layout = Support
|
||||
break;
|
||||
case "/contact-us":
|
||||
Layout = ContactUs
|
||||
break;
|
||||
default:
|
||||
Layout = Error
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<NavBar />
|
||||
<div>
|
||||
<NavBar />
|
||||
<ProSidebarProvider>
|
||||
<div class="main-body">
|
||||
<SideNav />
|
||||
<div class="page-display">
|
||||
<Layout />
|
||||
</div>
|
||||
</div>
|
||||
</ProSidebarProvider>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar-avatar {
|
||||
justify-content: center;
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
import {Sidebar, Menu, MenuItem} from 'react-pro-sidebar'
|
||||
import DashboardOutlinedIcon from '@mui/icons-material/DashboardOutlined';
|
||||
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
|
||||
import ContactSupportOutlinedIcon from '@mui/icons-material/ContactSupportOutlined';
|
||||
import PrivacyTipOutlinedIcon from '@mui/icons-material/PrivacyTipOutlined';
|
||||
import SupervisedUserCircleOutlinedIcon from '@mui/icons-material/SupervisedUserCircleOutlined';
|
||||
import ContactPageOutlinedIcon from '@mui/icons-material/ContactPageOutlined';
|
||||
import { Avatar, Typography } from '@material-ui/core';
|
||||
import { Link } from '@material-ui/core';
|
||||
import './SideNav.css'
|
||||
|
||||
|
||||
export default function SideNav() {
|
||||
return(
|
||||
<Sidebar backgroundColor='transparent'>
|
||||
<div className='sidebar-header'>
|
||||
<div className='sidebar-avatar'>
|
||||
<Avatar />
|
||||
</div>
|
||||
<div className='sidebar-text'>
|
||||
<Typography variant='h6'>Welcome, Jacob</Typography>
|
||||
<Typography variant='subtitle2'> Your Budget Overiew</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<Menu>
|
||||
<MenuItem
|
||||
component={<Link href="/dashboard" />}
|
||||
icon={<DashboardOutlinedIcon/>}>
|
||||
Dashboard
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
component={<Link href="/settings" />}
|
||||
icon={<SettingsOutlinedIcon/>}>
|
||||
Settings
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
component={<Link href="/support" />}
|
||||
icon={<ContactSupportOutlinedIcon/>}>
|
||||
Support
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
component={<Link href="/privacy" />}
|
||||
icon={<PrivacyTipOutlinedIcon/>}>
|
||||
Privacy
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
component={<Link href="/about-us" />}
|
||||
icon={<SupervisedUserCircleOutlinedIcon/>}>
|
||||
About Us
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
component={<Link href="/contact-us" />}
|
||||
icon={<ContactPageOutlinedIcon/>}>
|
||||
Contact Us
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
import { Toolbar } from "@material-ui/core";
|
||||
|
||||
function VerticalAppBar() {
|
||||
return(
|
||||
AppBar(
|
||||
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default function AboutUs() {
|
||||
return <h1>About Us</h1>
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default function ContactUs() {
|
||||
return <h1>Contact Us</h1>
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default function Dashboard() {
|
||||
return <h1>Dashboard</h1>
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default function Error() {
|
||||
return <h1>Error</h1>
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default function Privacy() {
|
||||
return <h1>Privacy</h1>
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default function Settings() {
|
||||
return <h1>Settings</h1>
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default function Support() {
|
||||
return <h1>Support</h1>
|
||||
}
|
||||
|
After Width: | Height: | Size: 483 KiB |
|
After Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 121 KiB |
|
After Width: | Height: | Size: 76 KiB |
Loading…
Reference in new issue