feat: vscode themed menubar

packages/grafnode-components/src/components/Navbar/StyledWrapper.js

@@ -1,6 +1,20 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  .collection-dropdown {
+    color: rgb(110 110 110);
+
+    &:hover {
+      color: inherit;
+    }
+
+    .tippy-box {
+      top: -0.5rem;
+      position: relative;
+      user-select: none;
+    }
+  }
+  
 `;
 
 export default StyledWrapper;

packages/grafnode-components/src/components/Navbar/index.js

@@ -1,15 +1,49 @@
-import React from 'react';
+import React, { useState, forwardRef, useRef } from 'react';
-import { IconLayoutGrid } from '@tabler/icons';
+import Dropdown from '../Dropdown';
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconBox, IconSearch, IconDots } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 
 const Navbar = () => {
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const menuDropdownTippyRef = useRef();
+  const onMenuDropdownCreate = (ref) => menuDropdownTippyRef.current = ref;
+  const MenuIcon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="dropdown-icon cursor-pointer">
+        <IconDots size={22}/>
+      </div>
+    );
+  });
+
   return (
     <StyledWrapper className="px-2 py-2 flex items-center">
-      <IconLayoutGrid size={20} strokeWidth={1.5}/>
+      <div>
         <span className="ml-2">My Workspace</span>
         <FontAwesomeIcon className="ml-2" icon={faCaretDown} style={{fontSize: 13}}/>
+      </div>
+      <div className="collection-dropdown flex flex-grow items-center justify-end">
+        <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>
+          <div className="dropdown-item" onClick={(e) => {
+            menuDropdownTippyRef.current.hide();
+            setModalOpen(true);
+          }}>
+            Create Collection
+          </div>
+          <div className="dropdown-item" onClick={(e) => {
+            menuDropdownTippyRef.current.hide();
+          }}>
+            Import Collection
+          </div>
+          <div className="dropdown-item" onClick={(e) => {
+            menuDropdownTippyRef.current.hide();
+          }}>
+            Settings
+          </div>
+        </Dropdown>
+      </div>
     </StyledWrapper>
   )
 };

packages/grafnode-components/src/components/RequestTabPanel/index.js

@@ -18,13 +18,12 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
     return <div></div>;
   }
 
-  let asideWidth = 230;
+  let asideWidth = 270;
   let {
     schema 
   } = useGraphqlSchema('https://api.spacex.land/graphql');
   const [leftPaneWidth, setLeftPaneWidth] = useState((window.innerWidth - asideWidth)/2 - 10); // 10 is for dragbar
   const [rightPaneWidth, setRightPaneWidth] = useState((window.innerWidth - asideWidth)/2);
-  console.log((window.innerWidth - asideWidth)/2);
   const [dragging, setDragging] = useState(false);
   const handleMouseMove = (e) => {
     if(dragging) {
@@ -64,7 +63,6 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
   };
 
   const onGraphqlQueryChange = (value) => {
-    console.log(value);
     dispatch({
       type: actions.REQUEST_GQL_QUERY_CHANGED,
       query: value,

packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js

@@ -32,20 +32,14 @@ const Wrapper = styled.div`
     }
 
     &.item-focused-in-tab {
-      background: var(--color-brand);
+      background: var(--color-sidebar-collection-item-active-background);
-      color: white;
 
       &:hover {
-        background: var(--color-brand) !important;
+        background: var(--color-sidebar-collection-item-active-background) !important;
-        color: white !important;
-      }
-
-      .menu-icon {
-        color: white !important;
       }
 
       .indent-block {
-        border-right: solid 1px var(--color-sidebar-collection-item-focused-indent-border);
+        border-right: solid 1px var(--color-sidebar-collection-item-active-indent-border);
       }
     }
 

packages/grafnode-components/src/components/Sidebar/MenuBar/StyledWrapper.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  background-color: rgb(44, 44, 44);
+  color: rgba(255, 255, 255, 0.5);
+
+  .menu-item {
+    padding: 0.6rem;
+    cursor: pointer;
+
+    &:hover, &.active {
+      color: rgba(255, 255, 255);
+    }
+  }
+`;
+
+export default Wrapper;

packages/grafnode-components/src/components/Sidebar/MenuBar/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { IconCode, IconStack, IconGitPullRequest, IconUser, IconUsers, IconSettings, IconLayoutGrid } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+
+const MenuBar = () => {
+  return (
+    <StyledWrapper className="h-full flex flex-col">
+      <div className="flex flex-col">
+        <div className="menu-item active">
+          <IconCode size={28} strokeWidth={1.5}/>
+        </div>
+        <div className="menu-item">
+          <IconStack size={28} strokeWidth={1.5}/>
+        </div>
+        <div className="menu-item">
+          <IconGitPullRequest size={28} strokeWidth={1.5}/>
+        </div>
+        <div className="menu-item">
+          <IconUsers size={28} strokeWidth={1.5}/>
+        </div>
+        <div className="menu-item">
+          <IconLayoutGrid size={28} strokeWidth={1.5}/>
+        </div>
+      </div>
+      <div className="flex flex-col flex-grow justify-end">
+        <div className="menu-item">
+          <IconUser size={28} strokeWidth={1.5}/>
+        </div>
+        <div className="menu-item">
+          <IconSettings size={28} strokeWidth={1.5}/>
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default MenuBar;

packages/grafnode-components/src/components/Sidebar/StyledWrapper.js

@@ -1,6 +1,11 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.aside`
+  min-width: 270px;
+  width: 270px;
+  /* background-color: #F6F8FA; */
+  background-color: var(--color-sidebar-background);
+
   .collection-title {
     line-height: 1.5;
     .collection-dropdown {

packages/grafnode-components/src/components/Sidebar/index.js

@@ -1,6 +1,7 @@
 import React, { useState, forwardRef, useRef } from 'react';
 import Collections from './Collections';
 import CreateCollection from './CreateCollection';
+import MenuBar from './MenuBar';
 import Navbar from '../Navbar';
 import Dropdown from '../Dropdown';
 import { IconBox, IconSearch, IconDots } from '@tabler/icons';
@@ -24,7 +25,6 @@ const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
   };
 
   const handleConfirm = (values) => {
-    console.log(values);
     dispatch({
       name: values.collectionName,
       type: actions.COLLECTION_CREATE
@@ -43,10 +43,13 @@ const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
         />
       ) : null}
 
+      <div className="flex flex-row h-full">
+        <MenuBar />
+
+        <div>
           <Navbar />
 
-      <div className="mt-4 px-2 py-1 flex collection-title">
+          <div className="mt-4 px-2 py-1 flex collection-title hidden">
-        <IconBox size={22} strokeWidth={1.5}/>
             <span className="ml-2">Collections</span>
             <div className="collection-dropdown flex flex-grow items-center justify-end">
               <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>
@@ -91,6 +94,8 @@ const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
             dispatch={dispatch}
             activeRequestTabId={activeRequestTabId}
           />
+        </div>
+      </div>
     </StyledWrapper>
   );
 };

packages/grafnode-components/src/hooks/useGraphqlSchema/index.js

@@ -31,7 +31,6 @@ const useGraphqlSchema =(endpoint) => {
       })
       .catch((err) => {
         setError(err);
-        console.log(err);
       });
   }, []);
 

packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js

@@ -6,13 +6,6 @@ const Wrapper = styled.div`
   height: 100%;
   min-height: 100vh;
 
-  aside {
-    min-width: 230px;
-    width: 230px;
-    border-right: solid 1px var(--color-layout-border);
-    background-color: #F6F8FA;
-  }
-
   section.main {
     display: flex;
 

packages/grafnode-run/src/styles/globals.css

@@ -1,14 +1,15 @@
 
 :root {
   --color-brand: #546de5;
-  --color-sidebar-collection-item-focused-indent-border: #7b8de3;
+  --color-sidebar-collection-item-active-indent-border: #d0d0d0;
-  --color-sidebar-background: #f6f8fa;
+  --color-sidebar-collection-item-active-background: #dddddd;
+  --color-sidebar-background: rgb(243, 243, 243);
   --color-request-dragbar-background: #e2e2e2;
   --color-request-dragbar-background-active: #bbb;
   --color-tab-active-border: #4d4d4d;
   --color-layout-border: #dedede;
   --color-codemirror-border: #efefef;
-  --color-codemirror-background: #f6f8fa;
+  --color-codemirror-background: rgb(243, 243, 243);
 }
 
 html, body {