bruno/renderer/components/Sidebar/index.js

103 lines
3.1 KiB
JavaScript
Raw Normal View History

2022-01-03 21:37:46 +01:00
import React, { useState, forwardRef, useRef } from 'react';
2021-12-03 20:37:38 +01:00
import Collections from './Collections';
import CreateCollection from './CreateCollection';
2022-01-31 06:06:29 +01:00
import MenuBar from './MenuBar';
import Navbar from '../Navbar';
2022-01-02 09:15:13 +01:00
import Dropdown from '../Dropdown';
import { IconBox, IconSearch, IconDots } from '@tabler/icons';
import StyledWrapper from './StyledWrapper';
2021-12-03 20:37:38 +01:00
const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
2022-01-04 18:00:15 +01:00
const [modalOpen, setModalOpen] = useState(false);
2022-01-03 21:37:46 +01:00
2022-01-02 09:15:13 +01:00
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>
);
});
2022-01-03 21:37:46 +01:00
const handleCancel = () => {
setModalOpen(false);
};
const handleConfirm = (values) => {
dispatch({
name: values.collectionName,
type: actions.COLLECTION_CREATE
});
2022-01-03 21:37:46 +01:00
setModalOpen(false);
};
2021-12-03 20:37:38 +01:00
return (
2022-01-02 09:15:13 +01:00
<StyledWrapper>
{modalOpen ? (
<CreateCollection
2022-01-03 21:37:46 +01:00
handleCancel={handleCancel}
handleConfirm={handleConfirm}
actions={actions}
dispatch={dispatch}
/>
) : null}
2022-01-03 21:37:46 +01:00
2022-01-31 06:06:29 +01:00
<div className="flex flex-row h-full">
<MenuBar />
2022-01-01 10:07:34 +01:00
2022-01-31 06:06:29 +01:00
<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>
2022-01-17 19:23:17 +01:00
</div>
2022-01-31 06:06:29 +01:00
</div>
<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">
<span className="text-gray-500 sm:text-sm">
<IconSearch size={16} strokeWidth={1.5}/>
</span>
2022-01-02 09:15:13 +01:00
</div>
2022-01-31 06:06:29 +01:00
<input
type="text"
name="price"
id="price"
className="block w-full pl-7 py-1 sm:text-sm"
placeholder="search"
/>
</div>
2021-12-03 20:37:38 +01:00
2022-01-31 06:06:29 +01:00
<Collections
collections={collections}
actions={actions}
dispatch={dispatch}
activeRequestTabId={activeRequestTabId}
/>
2021-12-03 20:37:38 +01:00
</div>
</div>
2022-01-02 09:15:13 +01:00
</StyledWrapper>
2021-12-03 20:37:38 +01:00
);
};
export default Sidebar;