refactor: TitleBar

renderer/components/Sidebar/CreateCollection/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {useFormik} from 'formik';
 import * as Yup from 'yup';
 import Modal from '../../Modal';

renderer/components/Sidebar/TitleBar/StyledWrapper.js

@@ -0,0 +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;

renderer/components/Sidebar/TitleBar/index.js

@@ -0,0 +1,70 @@
+import React, { useState, forwardRef, useRef } from 'react';
+import Dropdown from '../../Dropdown';
+import CreateCollection from '../CreateCollection';
+import { IconDots } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+
+const Navbar = ({dispatch, actions}) => {
+  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>
+    );
+  });
+
+  const handleCancel = () => {
+    setModalOpen(false);
+  };
+
+  const handleConfirm = (values) => {
+    dispatch({
+      name: values.collectionName,
+      type: actions.COLLECTION_CREATE
+    });
+    setModalOpen(false);
+  };
+
+  return (
+    <StyledWrapper className="px-2 py-2 flex items-center">
+      {modalOpen ? (
+        <CreateCollection
+          handleCancel={handleCancel}
+          handleConfirm={handleConfirm}
+          actions={actions}
+          dispatch={dispatch}
+        />
+      ) : null}
+
+      <div>
+        <span className="ml-2">Collections</span>
+      </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>
+  )
+};
+
+export default Navbar;

renderer/components/Sidebar/index.js

@@ -1,77 +1,22 @@
-import React, { useState, forwardRef, useRef } from 'react';
+import React 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';
+import TitleBar from './TitleBar';
+import { IconSearch } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 
 const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
-  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>
-    );
-  });
-
-  const handleCancel = () => {
-    setModalOpen(false);
-  };
-
-  const handleConfirm = (values) => {
-    dispatch({
-      name: values.collectionName,
-      type: actions.COLLECTION_CREATE
-    });
-    setModalOpen(false);
-  };
 
   return (
     <StyledWrapper>
-      {modalOpen ? (
-        <CreateCollection
-          handleCancel={handleCancel}
-          handleConfirm={handleConfirm}
-          actions={actions}
-          dispatch={dispatch}
-        />
-      ) : null}
-
       <div className="flex flex-row h-full">
         <MenuBar />
 
         <div>
-          <Navbar />
-
-          <div className="mt-4 px-2 py-1 flex collection-title hidden">
-            <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'>
-                <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>
-          </div>
+          <TitleBar
+            actions={actions}
+            dispatch={dispatch}
+          />
 
           <div className="mt-4 relative collection-filter px-2">
             <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">