add disabled option to sidebar elements

src/components/Sidebar/index.tsx

@@ -27,13 +27,15 @@ const StyledSidebar = styled.div`
   border-right: 1px solid ${({ theme }) => theme.SILVER_DARK};
 `;
 
-const StyledElement = styled.div`
+const StyledElement = styled.div<{ disabled?: boolean }>`
   text-align: center;
   font-size: 32px;
   font-weight: 700;
   width: 100%;
-  color: ${({ theme }) => theme.SILVER};
+  color: ${({ theme, disabled }) =>
+    disabled ? theme.SILVER_DARK : theme.SILVER};
   cursor: pointer;
+  pointer-events: ${({ disabled }) => disabled && 'none'};
 
   a {
     text-align: center;
@@ -158,6 +160,7 @@ export const Sidebar = () => {
           title="Toggle Minimap"
           as="a"
           onClick={() => toggle("minimap")}
+          disabled
         >
           <FaMap />
         </StyledElement>

src/pages/editor/index.tsx

@@ -9,7 +9,6 @@ import { Sidebar } from "src/components/Sidebar";
 import { JsonEditor } from "src/containers/JsonEditor";
 import { LiveEditor } from "src/containers/LiveEditor";
 
-
 const StyledPageWrapper = styled.div`
   display: flex;
 `;
@@ -127,7 +126,7 @@ const Editor: React.FC = () => {
       </Head>
       <Sidebar />
       <StyledEditorWrapper>
-        <StyledTools>Editor</StyledTools>
+        <StyledTools></StyledTools>
         <StyledEditor
           maxSize={800}
           minSize={300}