Drawer

frontend/src/components/Content.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import clsx from 'clsx';
+import ReactDOM from 'react-dom';
 import { createStyles, makeStyles, useTheme, Theme } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
@@ -8,6 +8,7 @@ import Toolbar from '@material-ui/core/Toolbar';
 import List from '@material-ui/core/List';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
@@ -15,6 +16,8 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 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 Filter6Icon from '@material-ui/icons/Filter6';
 import Dashboard from '@material-ui/icons/Dashboard';
 import EventNote from '@material-ui/icons/EventNote';
@@ -26,163 +29,171 @@ import EmojiEvents from '@material-ui/icons/EmojiEvents';
 import Devices from '@material-ui/icons/Devices';
 import Business from '@material-ui/icons/Business'
 import AssignmentInd from '@material-ui/icons/AssignmentInd';
-import InboxIcon from '@material-ui/icons/MoveToInbox';
-import Divider from '@material-ui/core/Divider';
 import Forward from '@material-ui/icons/Forward';
 import Send from '@material-ui/icons/Send';
 import Delete from '@material-ui/icons/Delete';
 
 
-class Content extends Component {
-    drawerWidth = 240;
-    iconsList = [<Dashboard />, <Filter6Icon />, <EventNote />, <Event />, <Class />, <DateRange />, <InsertChart />, <EmojiEvents />, <Devices />, <Business />, <AssignmentInd />];
-    iconsListMessages = [<InboxIcon />, <Forward />, <Send />, <Delete />]
+const drawerWidth = 240;
 
-    useStyles = makeStyles((theme: Theme) =>
-        createStyles({
-            root: {
-                display: 'flex',
+const useStyles = makeStyles((theme: Theme) =>
+    createStyles({
+        root: {
+            display: 'flex',
+        },
+        appBar: {
+            zIndex: theme.zIndex.drawer + 1,
+            transition: theme.transitions.create(['width', 'margin'], {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.leavingScreen,
+            }),
+        },
+        appBarShift: {
+            marginLeft: drawerWidth,
+            width: `calc(100% - ${drawerWidth}px)`,
+            transition: theme.transitions.create(['width', 'margin'], {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.enteringScreen,
+            }),
+        },
+        menuButton: {
+            marginRight: 36,
+        },
+        hide: {
+            display: 'none',
+        },
+        drawer: {
+            width: drawerWidth,
+            flexShrink: 0,
+            whiteSpace: 'nowrap',
+        },
+        drawerOpen: {
+            width: drawerWidth,
+            transition: theme.transitions.create('width', {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.enteringScreen,
+            }),
+        },
+        drawerClose: {
+            transition: theme.transitions.create('width', {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.leavingScreen,
+            }),
+            overflowX: 'hidden',
+            width: theme.spacing(7) + 1,
+            [theme.breakpoints.up('sm')]: {
+                width: theme.spacing(9) + 1,
             },
-            appBar: {
-                zIndex: theme.zIndex.drawer + 1,
-                transition: theme.transitions.create(['width', 'margin'], {
-                    easing: theme.transitions.easing.sharp,
-                    duration: theme.transitions.duration.leavingScreen,
-                }),
-            },
-            appBarShift: {
-                marginLeft: this.drawerWidth,
-                width: `calc(100% - ${this.drawerWidth}px)`,
-                transition: theme.transitions.create(['width', 'margin'], {
-                    easing: theme.transitions.easing.sharp,
-                    duration: theme.transitions.duration.enteringScreen,
-                }),
-            },
-            menuButton: {
-                marginRight: 36,
-            },
-            hide: {
-                display: 'none',
-            },
-            drawer: {
-                width: this.drawerWidth,
-                flexShrink: 0,
-                whiteSpace: 'nowrap',
-            },
-            drawerOpen: {
-                width: this.drawerWidth,
-                transition: theme.transitions.create('width', {
-                    easing: theme.transitions.easing.sharp,
-                    duration: theme.transitions.duration.enteringScreen,
-                }),
-            },
-            drawerClose: {
-                transition: theme.transitions.create('width', {
-                    easing: theme.transitions.easing.sharp,
-                    duration: theme.transitions.duration.leavingScreen,
-                }),
-                overflowX: 'hidden',
-                width: theme.spacing(7) + 1,
-                [theme.breakpoints.up('sm')]: {
-                    width: theme.spacing(9) + 1,
-                },
-            },
-            toolbar: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-                padding: theme.spacing(0, 1),
-                // necessary for content to be below app bar
-                ...theme.mixins.toolbar,
-            },
-            content: {
-                flexGrow: 1,
-                padding: theme.spacing(3),
-            },
-        }),
-    );
+        },
+        toolbar: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            padding: theme.spacing(0, 1),
+            // necessary for content to be below app bar
+            ...theme.mixins.toolbar,
+        },
+        content: {
+            flexGrow: 1,
+            padding: theme.spacing(3),
+        },
+    }),
+);
 
-        classes = this.useStyles();
-        theme = useTheme();
+function MiniDrawer() {
+    const classes = useStyles();
+    const theme = useTheme();
+    const [open, setOpen] = React.useState(false);
 
-        state = {
-            open: false,
-            setOpen: false
-        }
-
-        handleDrawerOpen = () => {
-            this.setState({setOpen: true});
-        };
-
-        handleDrawerClose = () => {
-            this.setState({setOpen: false});
-        };
-
-    constructor(props) {
-        super(props)
+    const handleDrawerOpen = () => {
+        setOpen(true);
     };
 
-    render() {
-        return (
-            <div className={this.classes.root}>
+    const handleDrawerClose = () => {
+        setOpen(false);
+    };
+
+    const iconsList = [<Dashboard />, <Filter6Icon />, <EventNote />, <Event />, <Class />, <DateRange />, <InsertChart />, <EmojiEvents />, <Devices />, <Business />, <AssignmentInd />];
+    const iconsListMessages = [<InboxIcon />, <Forward />, <Send />, <Delete />]
+
+    return (
+        <div className={classes.root}>
             <CssBaseline />
-            <AppBar
+            <AppBar id="bar"
                 position="fixed"
-                className={clsx(this.classes.appBar, {
-                    [this.classes.appBarShift]: open,
+                className={clsx(classes.appBar, {
+                    [classes.appBarShift]: open,
                 })}
             >
                 <Toolbar>
                     <IconButton
                         color="inherit"
                         aria-label="open drawer"
-                        onClick={this.handleDrawerOpen}
+                        onClick={handleDrawerOpen}
                         edge="start"
-                        className={clsx(this.classes.menuButton, {
-                            [this.classes.hide]: open,
+                        className={clsx(classes.menuButton, {
+                            [classes.hide]: open,
                         })}
                     >
                         <MenuIcon />
                     </IconButton>
+                    <Typography variant="h6" noWrap>
+                    Wulkanowy web early access insider preview pre-alpha pre-beta alpha beta release canditate v. 0.0.1
+          </Typography>
                 </Toolbar>
             </AppBar>
-            <Drawer anchor="left" variant="permanent" className={clsx(this.classes.drawer, {
-                [this.classes.drawerOpen]: open,
-                [this.classes.drawerClose]: !open,
-            })}
+            <Drawer anchor="left"
+                variant="permanent"
+                className={clsx(classes.drawer, {
+                    [classes.drawerOpen]: open,
+                    [classes.drawerClose]: !open,
+                })}
                 classes={{
                     paper: clsx({
-                        [this.classes.drawerOpen]: open,
-                        [this.classes.drawerClose]: !open,
+                        [classes.drawerOpen]: open,
+                        [classes.drawerClose]: !open,
                     }),
-                }}
-            >
-                <div className={this.classes.toolbar}>
-                    <IconButton onClick={this.handleDrawerClose}>
-                        {this.theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+                }}>
+                <div className={classes.toolbar}>
+                    <IconButton onClick={handleDrawerClose}>
+                        {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
                     </IconButton>
                 </div>
                 <Divider />
-                {['Start', 'Oceny', 'Plan Lekcji', 'Sprawdziany', 'Zadania Domowe', 'Frekwencja', 'Uczeń na Tle Klasy', 'Uwagi i Osiągnięcia', 'Dostęp Mobilny', 'Szkoła i Nauczyciele', 'Dane Ucznia'].map((text, index) => (
-                    <ListItem button key={text}>
-                        <ListItemIcon>{this.iconsList[index]}</ListItemIcon>
-                        <ListItemText primary={text} />
-                    </ListItem>
-                ))}
+                <List>
+                    {['Start', 'Oceny', 'Plan Lekcji', 'Sprawdziany', 'Zadania Domowe', 'Frekwencja', 'Uczeń na Tle Klasy', 'Uwagi i Osiągnięcia', 'Dostęp Mobilny', 'Szkoła i Nauczyciele', 'Dane Ucznia'].map((text, index) => (
+                        <ListItem button key={text}>
+                            <ListItemIcon>{iconsList[index]}</ListItemIcon>
+                            <ListItemText primary={text} />
+                        </ListItem>
+                    ))}
+                </List>
                 <Divider />
-                {['Odebrane', 'Wysłane', 'Wyślij Wiadomość', 'Usunięte'].map((text, index) => (
-                    <ListItem button key={text}>
-                        <ListItemIcon>{this.iconsListMessages[index]}</ListItemIcon>
-                        <ListItemText primary={text} />
-                    </ListItem>
-                ))}
+                <List>
+                    {['Odebrane', 'Wysłane', 'Wyślij Wiadomość', 'Usunięte'].map((text, index) => (
+                        <ListItem button key={text}>
+                            <ListItemIcon>{iconsListMessages[index]}</ListItemIcon>
+                            <ListItemText primary={text} />
+                        </ListItem>
+                    ))}
+                </List>
             </Drawer>
+            <main className={classes.content}>
+                Here is content (in my imagination)
+            </main>
         </div>
+    );
+}
+
+class Content extends Component {
+    render() {
+        return (
+            <MiniDrawer />
         )
     }
-};
+}
 
-export default Content;
+export default Content
 
 const content = document.getElementById("content");
 ReactDOM.render(<Content />, content);

frontend/static/frontend/css/start.css

@@ -76,4 +76,8 @@ body {
     margin-right: 10px;
     color: blue;
     cursor: pointer;
+}
+
+#bar {
+    background-color: #d32f2f;
 }

frontend/templates/frontend/content.html

@@ -5,6 +5,7 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <link rel="stylesheet" href="{% static 'frontend/css/start.css' %}" />
 
   <title>Wulkanowy | Aplikacja ucznia i rodzica</title>
 </head>