From c14b29305cba257f5b893857ec56b2d2253a2c5e Mon Sep 17 00:00:00 2001
From: Ole Morud <olekr99@hotmail.com>
Date: Mon, 22 Aug 2022 16:13:28 +0200
Subject: [PATCH] move instructions to sidebar menu

---
 src/components/InstructionMenu.tsx | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/InstructionMenu.tsx b/src/components/InstructionMenu.tsx
index cb7e3c6..a00a7e0 100644
--- a/src/components/InstructionMenu.tsx
+++ b/src/components/InstructionMenu.tsx
@@ -1,7 +1,8 @@
-import { Card, CardContent, styled, Typography } from "@mui/material"
+import { Card, CardContent, Grid, styled, Typography } from "@mui/material"
 import React from "react"
 import instructions, { Instruction } from "../Instructions"
 import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip"
+import { SIDEBAR_WIDTH } from "../const"
 
 const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} classes={{ popper: className }} />
@@ -15,6 +16,16 @@ const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
   }
 }))
 
+const sideBar: React.CSSProperties = {
+  height: "100%",
+  position: "fixed",
+  backgroundColor: "#999999",
+  //overflowX: "hidden",
+  paddingTop: "30px",
+  width: `${SIDEBAR_WIDTH}rem`,
+  justifyContent: "center"
+}
+
 function handleDragStart(
   instruction: Instruction,
   event: React.DragEvent<HTMLDivElement> | undefined
@@ -32,11 +43,11 @@ export default function InstructionMenu() {
   let key = 0
 
   return (
-    <>
-      <div style={{ display: "flex" }}>
+    <div style={sideBar}>
+      <Grid container columns={2}>
         {instructions.map((instruction: Instruction) => {
           return (
-            <div key={key++}>
+            <Grid item key={key++} xs={1}>
               <HtmlTooltip
                 key={key++}
                 title={
@@ -53,10 +64,10 @@ export default function InstructionMenu() {
                   </Card>
                 </div>
               </HtmlTooltip>
-            </div>
+            </Grid>
           )
         })}
-      </div>
-    </>
+      </Grid>
+    </div>
   )
 }