haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-01 23:20:51 +00:00
Code Issues Releases Wiki Activity

Side nav (#6309)

Browse Source 
* [user panel] combined 7 commits into 1:

[user side nav] added 'fold/unfold' for the sidebar

[redesign] redesigned toolbar for 'my libs' & 'shared with all'; redesigned 'top bar' for 'help', 'clients' and other pages

[Shared with all] 'share existing libraries' dialog: added the 'close' icon back, enabled clicking outside to close the dialog

['Invite Guest' page] redesigned the toolbar

['Share Admin' - 'Links'] 'Share Links' page: redesigned the toolbar

['Share Admin' - 'Links'] 'Upload Links' page: redesigned the toolbar

cleaned up code

* [user side panel] update

* [user panel] update

* [code style] update: remove an eslint warning
This commit is contained in:
llj
2024-07-09 15:08:47 +08:00
committed by GitHub
parent 0d5dd2a65a
commit ddbf0e7855
20 changed files with 378 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/side-panel.js
View File

@@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Utils } from '../utils/utils';
import Logo from './logo';
import MainSideNav from './main-side-nav';
@@ -8,23 +9,30 @@ const propTypes = {
currentTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
onCloseSidePanel: PropTypes.func,
tabItemClick: PropTypes.func,
children: PropTypes.object
children: PropTypes.object,
showLogoOnlyInMobile: PropTypes.bool,
isSidePanelFolded: PropTypes.bool,
toggleFoldSideNav: PropTypes.func
};
class SidePanel extends React.Component {
render() {
const { children } = this.props;
const { children, isSidePanelFolded, showLogoOnlyInMobile = false } = this.props;
return (
<div className={`side-panel ${this.props.isSidePanelClosed ? '' : 'left-zero'}`}>
<div className="side-panel-north">
<Logo onCloseSidePanel={this.props.onCloseSidePanel}/>
<div className={`side-panel ${isSidePanelFolded ? 'side-panel-folded' : ''} ${this.props.isSidePanelClosed ? '' : 'left-zero'}`}>
<div className={'side-panel-north'}>
{showLogoOnlyInMobile && !Utils.isDesktop() && <Logo onCloseSidePanel={this.props.onCloseSidePanel} />}
</div>
<div className="side-panel-center">
{children ?
children :
<MainSideNav tabItemClick={this.props.tabItemClick} currentTab={this.props.currentTab} />
}
{children ? children : (
<MainSideNav
tabItemClick={this.props.tabItemClick}
currentTab={this.props.currentTab}
isSidePanelFolded={isSidePanelFolded}
toggleFoldSideNav={this.props.toggleFoldSideNav}
/>
)}
</div>
</div>
);