do Appbar, Drawer, ExtensionCard

webUI/react/src/App.js

@@ -5,39 +5,28 @@ import {
     Route,
     Link
 } from "react-router-dom";
+import Button from '@material-ui/core/Button';
+import TemporaryDrawer from "./components/TemporaryDrawer";
+import NavBar from "./components/NavBar";
+
 
 export default function App() {
     return (
         <Router>
-            <div>
-                <nav>
-                    <ul>
-                        <li>
-                            <Link to="/">Home</Link>
-                        </li>
-                        <li>
-                            <Link to="/extensions">Extensions</Link>
-                        </li>
-                        <li>
-                            <Link to="/users">Users</Link>
-                        </li>
-                    </ul>
-                </nav>
+            {/*<TemporaryDrawer/>*/}
+            <NavBar/>
 
-                {/* A <Switch> looks through its children <Route>s and
-            renders the first one that matches the current URL. */}
-                <Switch>
-                    <Route path="/extensions">
-                        <Extensions/>
-                    </Route>
-                    <Route path="/users">
-                        <Users/>
-                    </Route>
-                    <Route path="/">
-                        <Home/>
-                    </Route>
-                </Switch>
-            </div>
+            <Switch>
+                <Route path="/extensions">
+                    <Extensions/>
+                </Route>
+                <Route path="/users">
+                    <Users/>
+                </Route>
+                <Route path="/">
+                    <Home/>
+                </Route>
+            </Switch>
         </Router>
     );
 }
@@ -59,7 +48,11 @@ function Extensions() {
 }
 
 function Home() {
-    return <h2>Home</h2>;
+    return (
+        <Button variant="contained" color="primary">
+            Hello World
+        </Button>
+    )
 }
 
 function Users() {

webUI/react/src/components/ExtensionCard.jsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import Button from "@material-ui/core/Button";
+import Avatar from "@material-ui/core/Avatar";
+import Typography from "@material-ui/core/Typography";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: 16
+    },
+    bullet: {
+        display: "inline-block",
+        margin: "0 2px",
+        transform: "scale(0.8)"
+    },
+    title: {
+        fontSize: 14
+    },
+    pos: {
+        marginBottom: 12
+    },
+    icon: {
+        width: theme.spacing(7),
+        height: theme.spacing(7),
+        flex: "0 0 auto",
+        marginRight: 16
+    }
+}));
+
+export default function SimpleCard() {
+    const classes = useStyles();
+    const bull = <span className={classes.bullet}>•</span>;
+
+    return (
+        <Card>
+            <CardContent className={classes.root}>
+                <div style={{display:"flex"}}>
+                    <Avatar
+                        variant="rounded"
+                        className={classes.icon}
+                        alt="Madara"
+                        src="https://raw.githubusercontent.com/inorichi/tachiyomi-extensions/repo/icon/tachiyomi-all.fmreader-v1.2.22.png"
+                    />
+                    <div style={{display:"flex", flexDirection:"column"}}>
+                        <Typography variant="h5" component="h2">
+                            Madara
+                        </Typography>
+                        <Typography variant="caption" display="block" gutterBottom>
+                            All 1.2.161
+                        </Typography>
+                    </div>
+                </div>
+
+                <Button size="small">install</Button>
+            </CardContent>
+        </Card>
+    );
+}

webUI/react/src/components/NavBar.jsx

@@ -0,0 +1,44 @@
+import React, {useState} from 'react';
+import {makeStyles} from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import TemporaryDrawer from "./TemporaryDrawer";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        flexGrow: 1,
+    },
+    menuButton: {
+        marginRight: theme.spacing(2),
+    },
+    title: {
+        flexGrow: 1,
+    },
+}));
+
+export default function NavBar() {
+    const classes = useStyles();
+    const [drawerOpen, setDrawerOpen] = useState(false)
+
+    return (
+        <div className={classes.root}>
+            <AppBar position="static">
+                <Toolbar>
+                    <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu" disableRipple
+                                onClick={() => setDrawerOpen(true)}>
+                        <MenuIcon/>
+                    </IconButton>
+                    <Typography variant="h6" className={classes.title}>
+                        News
+                    </Typography>
+                    <Button color="inherit">Login</Button>
+                </Toolbar>
+            </AppBar>
+            <TemporaryDrawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen}/>
+        </div>
+    );
+}

webUI/react/src/components/TemporaryDrawer.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import {makeStyles} from "@material-ui/core/styles";
+import Drawer from "@material-ui/core/Drawer";
+import Button from "@material-ui/core/Button";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import InboxIcon from "@material-ui/icons/MoveToInbox";
+import MailIcon from "@material-ui/icons/Mail";
+import {Link} from "react-router-dom";
+
+const useStyles = makeStyles({
+    list: {
+        width: 250
+    }
+});
+
+export default function TemporaryDrawer(props) {
+    const classes = useStyles();
+    const {drawerOpen, setDrawerOpen} = props
+
+    const sideList = side => (
+        <div
+            className={classes.list}
+            role="presentation"
+            onClick={() => setDrawerOpen(false)}
+            onKeyDown={() => setDrawerOpen(false)}
+        >
+            <List>
+                <Link to="/extensions" style={{color: "inherit", textDecoration: "none"}}>
+                    <ListItem button key="Extensions">
+                        <ListItemIcon>
+                            <InboxIcon/>
+                        </ListItemIcon>
+                        <ListItemText primary="Extensions"/>
+                    </ListItem>
+                </Link>
+            </List>
+        </div>
+    );
+
+    return (
+        <div>
+            <Drawer
+                BackdropProps={{invisible: true}}
+                open={drawerOpen}
+                anchor={"left"}
+                onClose={() => setDrawerOpen(false)}
+            >
+                {sideList("left")}
+            </Drawer>
+        </div>
+    );
+}

webUI/react/src/index.css

@@ -0,0 +1,3 @@
+body {
+    margin: 0;
+}

webUI/react/src/index.js

@@ -2,6 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import './index.css';
+// roboto font
+import 'fontsource-roboto';
+
 
 ReactDOM.render(
   <React.StrictMode>