add ability to show/hide sidebar

frontend/src/components/Sidebar.tsx

@@ -6,8 +6,8 @@ import { Dispatch } from 'redux';
 import * as sanitize from 'sanitize-html';
 
 import {
-    AnchorButton, Card, Classes, Divider, Elevation, HTMLTable, NonIdealState, Position, Tab, Tabs,
-    Tooltip
+    AnchorButton, Button, Card, Classes, Divider, Elevation, HTMLTable, NonIdealState, Position,
+    Tab, Tabs, Tooltip
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 
@@ -21,15 +21,40 @@ interface ISidebarProps {
     isLoadingInstanceDetails: boolean;
     selectAndLoadInstance: (instanceName: string) => void;
 }
-class SidebarImpl extends React.Component<ISidebarProps> {
+interface ISidebarState {
+    isOpen: boolean;
+}
+class SidebarImpl extends React.Component<ISidebarProps, ISidebarState> {
+
+    constructor(props: ISidebarProps) {
+        super(props);
+        const isOpen = window.innerWidth >= 900 ? true : false;
+        this.state = { isOpen };
+    }
+
     public render() {
+        const closedClass = this.state.isOpen ? "" : " closed";
+        const buttonIcon = this.state.isOpen ? IconNames.DOUBLE_CHEVRON_RIGHT : IconNames.DOUBLE_CHEVRON_LEFT;
         return (
-            <Card className="fediverse-sidebar" elevation={Elevation.THREE}>
-                {this.renderSidebarContents()}
-            </Card>
+            <div>
+                <Button
+                    onClick={this.handleToggle}
+                    large={true}
+                    icon={buttonIcon}
+                    className={"fediverse-sidebar-toggle-button" + closedClass}
+                    minimal={true}
+                />
+                <Card className={"fediverse-sidebar" + closedClass} elevation={Elevation.THREE}>
+                    {this.renderSidebarContents()}
+                </Card>
+            </div>
         )
     }
 
+    private handleToggle = () => {
+        this.setState({ isOpen: !this.state.isOpen });
+    }
+
     private renderSidebarContents = () => {
         if (this.props.isLoadingInstanceDetails) {
             return this.renderLoadingState();

frontend/src/index.css

@@ -27,13 +27,44 @@ html, body {
   top: 50px;
   bottom: 0;
   right: 0;
-  min-width: 300px;
+  min-width: 400px;
   width: 25%;
   z-index: 20;
   overflow: scroll;
   overflow-x: hidden;
+  transition-property: all;
+  transition-duration: .5s;
+  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+}
+
+.fediverse-sidebar.closed {
+  right: -400px;
+}
+
+.fediverse-sidebar-toggle-button {
+  position: absolute;
+  top: 50px;
+  right:400px;
+  z-index: 20;
+  transition-property: all;
+  transition-duration: .5s;
+  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+}
+
+.fediverse-sidebar-toggle-button.closed {
+  right: 0;
 }
 
 .fediverse-sidebar-table {
   width: 100%;
+}
+
+@media screen and (min-width: 1600px) {
+  .fediverse-sidebar.closed {
+    right: -25%;
+  }
+
+  .fediverse-sidebar-toggle-button {
+    right: 25%;
+  }
 }