holm/bruno
1
0
Fork 0
forked from extern/bruno
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: top level collection dropdown

Browse Source
This commit is contained in:
Anoop M D 2022-01-02 13:45:13 +05:30
parent 9b6e175f41
commit 9d14e89aaa
3 changed files with 64 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafnode-components/src/components/Navbar/index.js
View File

@ -7,7 +7,7 @@ import StyledWrapper from './StyledWrapper';
const Navbar = () => {
return (
<StyledWrapper className="px-2 py-2 flex items-center">
<IconLayoutGrid size={18} strokeWidth={1.5}/>
<IconLayoutGrid size={20} strokeWidth={1.5}/>
<span className="ml-2">My Workspace</span>
<FontAwesomeIcon className="ml-2" icon={faCaretDown} style={{fontSize: 13}}/>
</StyledWrapper>

27
packages/grafnode-components/src/components/Sidebar/StyledWrapper.js Normal file
View File

@ -0,0 +1,27 @@
import styled from 'styled-components';
const Wrapper = styled.aside`
.collection-title {
line-height: 1.5;
.collection-dropdown {
.dropdown-icon {
display: none;
color: rgb(110 110 110);
}
}
&:hover {
background: #f7f7f7;
.dropdown-icon {
display: flex;
}
}
div.tippy-box {
position: relative;
top: -0.625rem;
}
}
`;
export default Wrapper;

42
packages/grafnode-components/src/components/Sidebar/index.js
View File

@ -1,16 +1,46 @@
import React from 'react';
import React, { forwardRef, useRef } from 'react';
import Collections from './Collections';
import Navbar from '../Navbar';
import { IconBox, IconSearch } from '@tabler/icons';
import Dropdown from '../Dropdown';
import { IconBox, IconSearch, IconDots } from '@tabler/icons';
import StyledWrapper from './StyledWrapper';
const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
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 (
<aside>
<StyledWrapper>
<Navbar />
<div className="mt-4 px-2 flex">
<IconBox size={20} strokeWidth={1.5}/>
<div className="mt-4 px-2 py-1 flex collection-title">
<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'>
<div>
<div className="dropdown-item" onClick={(e) => {
menuDropdownTippyRef.current.hide();
}}>
Create Collection
</div>
</div>
<div>
<div className="dropdown-item" onClick={(e) => {
menuDropdownTippyRef.current.hide();
}}>
Settings
</div>
</div>
</Dropdown>
</div>
</div>
<div className="mt-4 relative collection-filter px-2">
@ -34,7 +64,7 @@ const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
dispatch={dispatch}
activeRequestTabId={activeRequestTabId}
/>
</aside>
</StyledWrapper>
);
};