Merge pull request #182 from jeffprinty/feature/sidebar-collection-scrolling

Enable scrolling in collections sidebar #118
This commit is contained in:
Anoop M D 2023-09-05 12:42:36 +05:30 committed by GitHub
commit 4aeb5cf56d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 12 deletions

View File

@ -61,7 +61,7 @@ const Collections = () => {
/> />
</div> </div>
<div className="mt-4 flex flex-col"> <div className="mt-4 flex flex-col overflow-y-auto absolute top-32 bottom-10 left-0 right-0">
{collections && collections.length {collections && collections.length
? collections.map((c) => { ? collections.map((c) => {
return ( return (
@ -77,4 +77,3 @@ const Collections = () => {
}; };
export default Collections; export default Collections;

View File

@ -19,9 +19,7 @@ const Sidebar = () => {
const [asideWidth, setAsideWidth] = useState(leftSidebarWidth); const [asideWidth, setAsideWidth] = useState(leftSidebarWidth);
const { const { storedTheme } = useTheme();
storedTheme
} = useTheme();
const dispatch = useDispatch(); const dispatch = useDispatch();
const [dragging, setDragging] = useState(false); const [dragging, setDragging] = useState(false);
@ -76,11 +74,10 @@ const Sidebar = () => {
setAsideWidth(leftSidebarWidth); setAsideWidth(leftSidebarWidth);
}, [leftSidebarWidth]); }, [leftSidebarWidth]);
return ( return (
<StyledWrapper className="flex relative"> <StyledWrapper className="flex relative h-screen">
<aside> <aside>
<div className="flex flex-row h-full w-full"> <div className="flex flex-row h-screen w-full">
{preferencesOpen && <Preferences onClose={() => setPreferencesOpen(false)} />} {preferencesOpen && <Preferences onClose={() => setPreferencesOpen(false)} />}
<div className="flex flex-col w-full" style={{ width: asideWidth }}> <div className="flex flex-col w-full" style={{ width: asideWidth }}>
@ -89,7 +86,7 @@ const Sidebar = () => {
<Collections /> <Collections />
</div> </div>
<div className="footer flex px-1 py-2 items-center cursor-pointer select-none"> <div className="footer flex px-1 py-2 absolute bottom-0 left-0 right-0 items-center cursor-pointer select-none">
<div className="flex items-center ml-1 text-xs "> <div className="flex items-center ml-1 text-xs ">
<IconSettings size={18} strokeWidth={1.5} className="mr-2 hover:text-gray-700" onClick={() => setPreferencesOpen(true)} /> <IconSettings size={18} strokeWidth={1.5} className="mr-2 hover:text-gray-700" onClick={() => setPreferencesOpen(true)} />
</div> </div>

View File

@ -5,6 +5,7 @@ const Wrapper = styled.div`
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
max-height: 100vh;
&.is-dragging { &.is-dragging {
cursor: col-resize !important; cursor: col-resize !important;