+
diff --git a/src/Components/MiniDrawer.js b/src/Components/MiniDrawer.js
new file mode 100644
index 0000000..540b3ff
--- /dev/null
+++ b/src/Components/MiniDrawer.js
@@ -0,0 +1,240 @@
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import AppBar from '@material-ui/core/AppBar';
+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';
+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 { availableViews, activeDrawerItemMapping } from '../util/Util';
+import useNotifications from '../hooks/useNotifications';
+import { withWebId } from '@inrupt/solid-react-components';
+import MainScreenComponent from './MainScreenComponent';
+import { Navbar } from 'react-bootstrap';
+import MenuItem from '@material-ui/core/MenuItem';
+import Badge from '@material-ui/core/Badge';
+import { LogoutButton } from '@solid/react';
+
+import solidlogo from '../assets/solid-emblem.svg';
+import idlablogo from '../assets/idlab.png';
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme) => ({
+ 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,
+ },
+ },
+ 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),
+ },
+}));
+
+const MiniDrawer = withWebId((props) => {
+ const classes = useStyles();
+ const theme = useTheme();
+ const [open, setOpen] = React.useState(true);
+
+ const [selectedView, setSelectedView] = useState(availableViews.profile)
+ const notifications = useNotifications(props.webId)
+
+ const getSideBarItem = (itemId) => { return({
+ id: availableViews[itemId].id,
+ label: availableViews[itemId].label,
+ icon: availableViews[itemId].icon,
+ eventHandler: function(e) { setSelectedView(availableViews[itemId])}
+ })}
+
+ const sidebarItems = {}
+
+ for (let item of ['profile', 'running', 'requests', 'certificates', 'official', 'notifications', 'help']){
+ sidebarItems[item] = getSideBarItem(item)
+ }
+
+ const handleDrawerOpen = () => {
+ setOpen(true);
+ };
+
+ const handleDrawerClose = () => {
+ setOpen(false);
+ };
+
+ const isActive = (item) => {
+ console.log('active', activeDrawerItemMapping.item)
+ console.log('isActive?', item, selectedView)
+
+ }
+
+ return (
+ TODOS
+Complete help component
+Button to resend notification on pending
+Delete (read) notifications
+Have notification actions fire on receive and not on looking at specific view
+Highlight active component left bar
+Make left bar subtractable
+Finish implementation delete mariage proposal
+Mark notifications as read
+Highlight hovered notification
+Encryption and signing for accepting invitation and for certificate
+What to do with the official? Allow it to be anyone and give input field?
+Update civil status on certification (of both spouses, possibly via a notification)
+Make all contracts visible for all actors involved
+Only load notifications that were not load last time
+Is it okay to use this demo vocabulary?
+What to do with default storage locations?
+Use Solid file clients to recursively create folders if a specified storage location does not yet exist?
+More error handling for missing data fields in files
+If data not yet retrieved, dont show pending!
+Unify internal naming scheme: proposal and certificate
+Provide delete proposal for intermediary steps
+JSDoc all functions
+convert components to have logic for data retrieval somewhere else?
+
+
+
+
+
+
+ SEMIC - solid demo
+
+
+
+
+ 
{' '}
+
+
+
+ 
{' '}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {theme.direction === 'rtl' ?
+
+
+
+
+
+ );
+})
+
+export default MiniDrawer
diff --git a/src/assets/PalatinoBold.ttf b/src/assets/PalatinoBold.ttf
new file mode 100644
index 0000000..87bb3d8
Binary files /dev/null and b/src/assets/PalatinoBold.ttf differ
diff --git a/src/assets/background2.png b/src/assets/background2.png
new file mode 100644
index 0000000..3f5e4d0
Binary files /dev/null and b/src/assets/background2.png differ
diff --git a/src/util/Util.js b/src/util/Util.js
index b07479b..847d6d1 100644
--- a/src/util/Util.js
+++ b/src/util/Util.js
@@ -47,6 +47,21 @@ export const availableViews = {
certificateview:{id:"certificateview", label:'Certificate view', generation:(props) =>
+
+
+ {item.icon}
+
+ ))}
+
+ -
+ {[getSideBarItem('profile'), getSideBarItem('requests'), getSideBarItem('running'), getSideBarItem('certificates') ].map((item, index) => (
+
+