Update Dev Logs

Dev Logs.md

@@ -11,9 +11,56 @@ These are daily and weekly summaries of the work thats been done on webqueue2. T
 
 ---
 
-<!-- ### Monday 8/3/20 -->
-
-<!-- ### Tuesday 8/4/20 -->
+### Monday 8/3/20
+- Experimented with [`<Grid>`](https://material-ui.com/components/grid/#grid) based two column layout: works for fixed grid counts but not fluid.
+- Experimented with flexbox two column layout: `flex-grow`, `flex-shrink` and `flex-basis` properties behave inconsistantly sometimes not respective responsive units.
+- Built a drawer based UI example
+
+### Tuesday 8/4/20
+- Watched [Introduction to CSS by Scott Alan](https://app.pluralsight.com/library/courses/css-intro/table-of-contents) on Pluralsight.
+- Experimented with [`<Slide>`](https://material-ui.com/components/transitions/#slide) transitions in Material UI for showing and hiding ItemView.
+- Found a working combination of `flex-basis` and `flex-shrink` that makes widths behave expectedly (thanks to @dhallet.)
+```jsx
+// Create state variable for openning ItemView
+const [sidebarOpen, setSidebarOpen] = useState(false)
+
+// Create JSS Styles
+const useStyles = makeStyles({
+"leftCol": {
+	backgroundColor: "lightgreen"
+},
+"rightCol": {
+	backgroundColor: "lightblue",
+	overflow: "hidden",
+	width: "0"
+},
+"rightColShift": {
+	flexShrink: "0",
+	width: "50%"
+},
+"transition-width": {
+	transition: theme.transitions.create(["width"], {
+		duration: theme.transitions.duration.enteringScreen,
+		easing: theme.transitions.easing.enteringScreen
+	})
+}
+});
+
+const classes = useStyles();
+
+// Render UI
+return (
+	<Button variant="contained" color="primary" onClick={() => setSidebarOpen(!sidebarOpen)}>Toggle</Button>
+	<Box display="flex">
+		<Box className={clsx(classes.leftCol, classes["transition-width"])} >
+			{/* Content ... */}
+		</Box>
+		<Box className={clsx(classes.rightCol, classes["transition-width"], sidebarOpen && classes.rightColShift)}>
+			{/* Content ... */}
+		</Box>
+	</Box>
+);
+```
 
 <!-- ### Wednesday 8/5/20 -->