chore: Material UI, React Router setup

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"
     }

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(<App />, document.getElementById('app'));
+ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('app'));

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 {
+const drawerWidth = 240;
-    name: string;
+
-    age: number;
+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 = () => {
+
-    return (
+const AppBar = styled(MuiAppBar, {
-        <div>
+    shouldForwardProp: (prop) => prop !== "open",
-            <h1>Initial setup</h1>
+})<AppBarProps>(({ theme, open }) => ({
-        </div>
+    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);
     };
 
-export default App;
+    const handleDrawerClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <Box sx={{ display: "flex" }}>
+            <CssBaseline />
+            <AppBar position="fixed" open={open}>
+                <Toolbar>
+                    <IconButton
+                        color="inherit"
+                        aria-label="open drawer"
+                        onClick={handleDrawerOpen}
+                        edge="start"
+                        sx={{
+                            marginRight: "36px",
+                            ...(open && { display: "none" }),
+                        }}
+                    >
+                        <MenuIcon />
+                    </IconButton>
+                    <Typography variant="h6" noWrap component="div">
+                        Covid Statistics
+                    </Typography>
+                </Toolbar>
+            </AppBar>
+            <Drawer variant="permanent" open={open}>
+                <DrawerHeader>
+                    <IconButton onClick={handleDrawerClose}>
+                        {theme.direction === "rtl" ? (
+                            <ChevronRightIcon />
+                        ) : (
+                            <ChevronLeftIcon />
+                        )}
+                    </IconButton>
+                </DrawerHeader>
+                <Divider />
+                <List>
+                    {["Inbox", "Starred", "Send email", "Drafts"].map(
+                        (text, index) => (
+                            <ListItem button key={text}>
+                                <ListItemIcon>
+                                    {index % 2 === 0 ? (
+                                        <InboxIcon />
+                                    ) : (
+                                        <MailIcon />
+                                    )}
+                                </ListItemIcon>
+                                <ListItemText primary={text} />
+                            </ListItem>
+                        )
+                    )}
+                </List>
+            </Drawer>
+            <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+                <DrawerHeader />
+                <Container>
+                    <Routes>
+                        <Route
+                            path="/"
+                            element={
+                                <>
+                                    <Typography paragraph>
+                                        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.
+                                    </Typography>
+                                    <Typography paragraph>
+                                        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.
+                                    </Typography>
+                                </>
+                            }
+                        />
+                        <Route
+                            path="/about"
+                            element={
+                                <Typography paragraph>
+                                    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.
+                                </Typography>
+                            }
+                        />
+                    </Routes>
+                </Container>
+            </Box>
+        </Box>
+    );
+}

routes/web.php

@@ -13,6 +13,6 @@ use Illuminate\Support\Facades\Route;
 |
 */
 
-Route::get('/', function () {
+Route::get('/{any}', function () {
     return view('welcome');
-});
+})->where('any', '.*');