diff --git a/package-lock.json b/package-lock.json index a3c393a..3b5ce73 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-pro-sidebar": "^1.0.0", "react-scripts": "5.0.1", "styled-components": "^5.3.9", "web-vitals": "^2.1.4" @@ -6301,6 +6302,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-css": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz", @@ -15190,6 +15196,21 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-pro-sidebar": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-pro-sidebar/-/react-pro-sidebar-1.0.0.tgz", + "integrity": "sha512-TAU3vHj0rYHSLWdZksiWte59dwh3rweaFY+dXri+y8mtlbQalxnNTG11k9wRCiaMa0IGPmIIbdY1E1yoHBUd/A==", + "dependencies": { + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", + "@popperjs/core": "^2.11.6", + "classnames": "^2.3.2" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", diff --git a/package.json b/package.json index 3d349d7..cccd6fe 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-pro-sidebar": "^1.0.0", "react-scripts": "5.0.1", "styled-components": "^5.3.9", "web-vitals": "^2.1.4" diff --git a/src/Main.js b/src/Main.js index f18cda0..429c3d9 100644 --- a/src/Main.js +++ b/src/Main.js @@ -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 ( - +
+ + +
+ +
+ +
+
+ +
) } \ No newline at end of file diff --git a/src/components/NavBar.css b/src/components/NavBar.css index b57637c..1de027e 100644 --- a/src/components/NavBar.css +++ b/src/components/NavBar.css @@ -1,5 +1,6 @@ .bar { padding: 10px; + margin-bottom: 20px; } .logo { @@ -7,6 +8,13 @@ margin-right: 20px; } +.nav-brand { + display: flex; + align-items: center; + text-decoration: none; + color: inherit; +} + .nav-login-control { display: flex; margin-left: auto; diff --git a/src/components/NavBar.js b/src/components/NavBar.js index c78f8a3..a060db8 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -1,14 +1,9 @@ -import { Toolbar, Typography } from "@material-ui/core"; import React from "react"; -import "./NavBar.css" +import { Menu, MenuItem } from '@mui/material'; +import { Toolbar, Typography, Button, IconButton, Link } from "@material-ui/core"; import AccountCircle from '@mui/icons-material/AccountCircle'; -import IconButton from "@material-ui/core/IconButton"; -import MenuItem from '@mui/material/MenuItem'; -import Menu from '@mui/material/Menu'; -import Button from "@material-ui/core/Button"; - import logo from "../assets/BudgetBuddyLogo.png" - +import "./NavBar.css" export default function NavBar() { const [auth, setAuth] = React.useState(true); @@ -34,12 +29,14 @@ export default function NavBar() { return ( - - - BudgetBuddy - + + + + BudgetBuddy + +
{auth ? // Logged In diff --git a/src/components/SideNav.css b/src/components/SideNav.css new file mode 100644 index 0000000..e637b76 --- /dev/null +++ b/src/components/SideNav.css @@ -0,0 +1,10 @@ +.sidebar-header { + display: flex; + align-items: center; + justify-content: space-evenly; + margin-bottom: 20px; +} + +.sidebar-avatar { + justify-content: center; +} \ No newline at end of file diff --git a/src/components/SideNav.js b/src/components/SideNav.js new file mode 100644 index 0000000..72feec3 --- /dev/null +++ b/src/components/SideNav.js @@ -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( + +
+
+ +
+
+ Welcome, Jacob + Your Budget Overiew +
+
+ + } + icon={}> + Dashboard + + } + icon={}> + Settings + + } + icon={}> + Support + + } + icon={}> + Privacy + + } + icon={}> + About Us + + } + icon={}> + Contact Us + + + + ); +} \ No newline at end of file diff --git a/src/components/VerticalAppbar.js b/src/components/VerticalAppbar.js deleted file mode 100644 index 8c137f5..0000000 --- a/src/components/VerticalAppbar.js +++ /dev/null @@ -1,9 +0,0 @@ -import { Toolbar } from "@material-ui/core"; - -function VerticalAppBar() { - return( - AppBar( - - ) - ); -} \ No newline at end of file diff --git a/src/pages/About-Us.jsx b/src/pages/About-Us.jsx new file mode 100644 index 0000000..0e7c65c --- /dev/null +++ b/src/pages/About-Us.jsx @@ -0,0 +1,3 @@ +export default function AboutUs() { + return

About Us

+} \ No newline at end of file diff --git a/src/pages/Contact-Us.jsx b/src/pages/Contact-Us.jsx new file mode 100644 index 0000000..40c4efb --- /dev/null +++ b/src/pages/Contact-Us.jsx @@ -0,0 +1,3 @@ +export default function ContactUs() { + return

Contact Us

+} \ No newline at end of file diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx new file mode 100644 index 0000000..a3043fa --- /dev/null +++ b/src/pages/Dashboard.jsx @@ -0,0 +1,3 @@ + export default function Dashboard() { + return

Dashboard

+ } \ No newline at end of file diff --git a/src/pages/Error-Page.jsx b/src/pages/Error-Page.jsx new file mode 100644 index 0000000..fa3cbec --- /dev/null +++ b/src/pages/Error-Page.jsx @@ -0,0 +1,3 @@ +export default function Error() { + return

Error

+} \ No newline at end of file diff --git a/src/pages/Privacy.jsx b/src/pages/Privacy.jsx new file mode 100644 index 0000000..93cddca --- /dev/null +++ b/src/pages/Privacy.jsx @@ -0,0 +1,3 @@ +export default function Privacy() { + return

Privacy

+} \ No newline at end of file diff --git a/src/pages/Settings.jsx b/src/pages/Settings.jsx new file mode 100644 index 0000000..a368753 --- /dev/null +++ b/src/pages/Settings.jsx @@ -0,0 +1,3 @@ +export default function Settings() { + return

Settings

+} \ No newline at end of file diff --git a/src/pages/Support.jsx b/src/pages/Support.jsx new file mode 100644 index 0000000..a6539cb --- /dev/null +++ b/src/pages/Support.jsx @@ -0,0 +1,3 @@ +export default function Support() { + return

Support

+} \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index ec2585e..cc8523b 100644 --- a/src/styles.css +++ b/src/styles.css @@ -5,9 +5,27 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +.main-body { + display: flex; + width: 100vw; +} + +.page-display { + margin: 0 40px; + border: 2px solid black; + border-radius: 20px; + padding: 20px 30px; + width: 100vw; +} + +.page-display > * { + margin: 0; +} \ No newline at end of file diff --git a/welcome/budgethero1.png b/welcome/budgethero1.png new file mode 100644 index 0000000..b7dce7e Binary files /dev/null and b/welcome/budgethero1.png differ diff --git a/welcome/index.html b/welcome/index.html index e69de29..eacc508 100644 --- a/welcome/index.html +++ b/welcome/index.html @@ -0,0 +1,58 @@ + + + + + + BudgetBuddy + + + +
+
+ + + BudgetBuddy + +
+
+
+
+

Start Building Your Wealth

+

BudgetBuddy’s top notch budgeting tools will help you start building wealth, no matter your income or debt.

+ +
+
+ +
+
+
+
+
+
+
+ +
Track Your Spending
+

Keep track of how much you spend on any number of spending categories.

+
+
+
+
+ +
Plan Your Income
+

Map out your income into savings categories to manage your money faster and easier than ever.

+
+
+
+
+ +
See Your Wealth Grow
+

Use BudgetBuddy’s widgets to visualize your wealth growing and debt shrinking.

+
+
+
+ +
+ + + \ No newline at end of file diff --git a/welcome/money1.png b/welcome/money1.png new file mode 100644 index 0000000..65e2a88 Binary files /dev/null and b/welcome/money1.png differ diff --git a/welcome/money2.png b/welcome/money2.png new file mode 100644 index 0000000..fec00ae Binary files /dev/null and b/welcome/money2.png differ diff --git a/welcome/money3.png b/welcome/money3.png new file mode 100644 index 0000000..e16b258 Binary files /dev/null and b/welcome/money3.png differ