do Appbar, Drawer, ExtensionCard

2020-12-24 15:02:03 +03:30
parent 33c08c0b79
commit 4f595d1166
10 changed files with 461 additions and 56 deletions
@@ -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>
+    );
+}
@@ -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>
+    );
+}
@@ -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>
+    );
+}