diff --git a/package.json b/package.json
index da504ab..08decb1 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
"devDependencies": {
"@babel/preset-react": "^7.16.5",
"@popperjs/core": "^2.10.2",
- "axios": "^0.21",
+ "axios": "^0.21.4",
"bootstrap": "^5.1.3",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
@@ -24,8 +24,15 @@
"sass-loader": "^11.0.1"
},
"dependencies": {
+ "@emotion/react": "^11.7.1",
+ "@emotion/styled": "^11.6.0",
+ "@mui/icons-material": "^5.2.5",
+ "@mui/material": "^5.2.5",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
+ "@types/react-redux": "^7.1.20",
+ "react-redux": "^7.2.6",
+ "react-router-dom": "^6.2.1",
"ts-loader": "^9.2.6",
"typescript": "^4.5.4"
}
diff --git a/resources/js/app.tsx b/resources/js/app.tsx
index bcc767f..82d8b3b 100644
--- a/resources/js/app.tsx
+++ b/resources/js/app.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from "./components/App";
+import { BrowserRouter } from "react-router-dom";
/**
* First we will load all of this project's JavaScript dependencies which
@@ -16,4 +17,4 @@ require('./bootstrap');
* or customize the JavaScript scaffolding to fit your unique needs.
*/
-ReactDOM.render(, document.getElementById('app'));
\ No newline at end of file
+ReactDOM.render(, document.getElementById('app'));
\ No newline at end of file
diff --git a/resources/js/components/App.tsx b/resources/js/components/App.tsx
index 60274c7..26e2689 100644
--- a/resources/js/components/App.tsx
+++ b/resources/js/components/App.tsx
@@ -1,15 +1,252 @@
-import React, { useState } from "react";
+import * as React from "react";
+import { styled, useTheme, Theme, CSSObject } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import MuiDrawer from "@mui/material/Drawer";
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import List from "@mui/material/List";
+import CssBaseline from "@mui/material/CssBaseline";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ListItem from "@mui/material/ListItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import InboxIcon from "@mui/icons-material/MoveToInbox";
+import MailIcon from "@mui/icons-material/Mail";
+import { Routes, Route, Link } from "react-router-dom";
+import Paper from "@mui/material/Paper";
-export interface IUser {
- name: string;
- age: number;
+const drawerWidth = 240;
+
+const openedMixin = (theme: Theme): CSSObject => ({
+ width: drawerWidth,
+ transition: theme.transitions.create("width", {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ overflowX: "hidden",
+});
+
+const closedMixin = (theme: Theme): CSSObject => ({
+ transition: theme.transitions.create("width", {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ overflowX: "hidden",
+ width: `calc(${theme.spacing(7)} + 1px)`,
+ [theme.breakpoints.up("sm")]: {
+ width: `calc(${theme.spacing(7)} + 1px)`,
+ },
+});
+
+const DrawerHeader = styled("div")(({ theme }) => ({
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "flex-end",
+ padding: theme.spacing(0, 1),
+ // necessary for content to be below app bar
+ ...theme.mixins.toolbar,
+}));
+
+interface AppBarProps extends MuiAppBarProps {
+ open?: boolean;
}
-const App = () => {
+
+const AppBar = styled(MuiAppBar, {
+ shouldForwardProp: (prop) => prop !== "open",
+})(({ theme, open }) => ({
+ zIndex: theme.zIndex.drawer + 1,
+ transition: theme.transitions.create(["width", "margin"], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ ...(open && {
+ marginLeft: drawerWidth,
+ width: `calc(100% - ${drawerWidth}px)`,
+ transition: theme.transitions.create(["width", "margin"], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ }),
+}));
+
+const Drawer = styled(MuiDrawer, {
+ shouldForwardProp: (prop) => prop !== "open",
+})(({ theme, open }) => ({
+ width: drawerWidth,
+ flexShrink: 0,
+ whiteSpace: "nowrap",
+ boxSizing: "border-box",
+ ...(open && {
+ ...openedMixin(theme),
+ "& .MuiDrawer-paper": openedMixin(theme),
+ }),
+ ...(!open && {
+ ...closedMixin(theme),
+ "& .MuiDrawer-paper": closedMixin(theme),
+ }),
+}));
+
+const Container = styled(Paper)(({ theme }) => ({
+ ...theme.typography.body2,
+ padding: 16
+ }));
+
+export default function App() {
+ const theme = useTheme();
+ const [open, setOpen] = React.useState(false);
+
+ const handleDrawerOpen = () => {
+ setOpen(true);
+ };
+
+ const handleDrawerClose = () => {
+ setOpen(false);
+ };
+
return (
-
-
Initial setup
-
+
+
+
+
+
+
+
+
+ Covid Statistics
+
+
+
+
+
+
+ {theme.direction === "rtl" ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ {["Inbox", "Starred", "Send email", "Drafts"].map(
+ (text, index) => (
+
+
+ {index % 2 === 0 ? (
+
+ ) : (
+
+ )}
+
+
+
+ )
+ )}
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna
+ aliqua. Rhoncus dolor purus non enim
+ praesent elementum facilisis leo vel.
+ Risus at ultrices mi tempus imperdiet.
+ Semper risus in hendrerit gravida rutrum
+ quisque non tellus. Convallis convallis
+ tellus id interdum velit laoreet id
+ donec ultrices. Odio morbi quis commodo
+ odio aenean sed adipiscing. Amet nisl
+ suscipit adipiscing bibendum est
+ ultricies integer quis. Cursus euismod
+ quis viverra nibh cras. Metus vulputate
+ eu scelerisque felis imperdiet proin
+ fermentum leo. Mauris commodo quis
+ imperdiet massa tincidunt. Cras
+ tincidunt lobortis feugiat vivamus at
+ augue. At augue eget arcu dictum varius
+ duis at consectetur lorem. Velit sed
+ ullamcorper morbi tincidunt. Lorem donec
+ massa sapien faucibus et molestie ac.
+
+
+ Consequat mauris nunc congue nisi vitae
+ suscipit. Fringilla est ullamcorper eget
+ nulla facilisi etiam dignissim diam.
+ Pulvinar elementum integer enim neque
+ volutpat ac tincidunt. Ornare
+ suspendisse sed nisi lacus sed viverra
+ tellus. Purus sit amet volutpat
+ consequat mauris. Elementum eu facilisis
+ sed odio morbi. Euismod lacinia at quis
+ risus sed vulputate odio. Morbi
+ tincidunt ornare massa eget egestas
+ purus viverra accumsan in. In hendrerit
+ gravida rutrum quisque non tellus orci
+ ac. Pellentesque nec nam aliquam sem et
+ tortor. Habitant morbi tristique
+ senectus et. Adipiscing elit duis
+ tristique sollicitudin nibh sit. Ornare
+ aenean euismod elementum nisi quis
+ eleifend. Commodo viverra maecenas
+ accumsan lacus vel facilisis. Nulla
+ posuere sollicitudin aliquam ultrices
+ sagittis orci a.
+
+
+ }
+ />
+
+ Consequat mauris nunc congue nisi vitae
+ suscipit. Fringilla est ullamcorper eget
+ nulla facilisi etiam dignissim diam.
+ Pulvinar elementum integer enim neque
+ volutpat ac tincidunt. Ornare suspendisse
+ sed nisi lacus sed viverra tellus. Purus sit
+ amet volutpat consequat mauris. Elementum eu
+ facilisis sed odio morbi. Euismod lacinia at
+ quis risus sed vulputate odio. Morbi
+ tincidunt ornare massa eget egestas purus
+ viverra accumsan in. In hendrerit gravida
+ rutrum quisque non tellus orci ac.
+ Pellentesque nec nam aliquam sem et tortor.
+ Habitant morbi tristique senectus et.
+ Adipiscing elit duis tristique sollicitudin
+ nibh sit. Ornare aenean euismod elementum
+ nisi quis eleifend. Commodo viverra maecenas
+ accumsan lacus vel facilisis. Nulla posuere
+ sollicitudin aliquam ultrices sagittis orci
+ a.
+
+ }
+ />
+
+
+
+
);
-};
-
-export default App;
\ No newline at end of file
+}
diff --git a/routes/web.php b/routes/web.php
index b130397..f027fd5 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -13,6 +13,6 @@ use Illuminate\Support\Facades\Route;
|
*/
-Route::get('/', function () {
+Route::get('/{any}', function () {
return view('welcome');
-});
+})->where('any', '.*');