mirror of
https://github.com/usebruno/bruno.git
synced 2024-11-21 15:33:11 +01:00
feat: top level collection dropdown
This commit is contained in:
parent
9b6e175f41
commit
9d14e89aaa
@ -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>
|
||||
|
@ -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;
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user