Render more space efficient user nav when viewport is insufficient

pull/10616/head
Alex P 2017-11-13 22:25:15 -08:00
parent a47aff3fba
commit 74cf0f26c4
2 changed files with 134 additions and 55 deletions

View File

@ -27,6 +27,8 @@ class UserNavBlock extends Component {
const isSuperAdmin = role === SUPERADMIN_ROLE const isSuperAdmin = role === SUPERADMIN_ROLE
const isSmallViewport = window.visualViewport.height < 850
return ( return (
<div className="sidebar--item"> <div className="sidebar--item">
<div className="sidebar--square"> <div className="sidebar--square">
@ -35,62 +37,129 @@ class UserNavBlock extends Component {
? <span className="sidebar--icon sidebar--icon__superadmin icon crown2" /> ? <span className="sidebar--icon sidebar--icon__superadmin icon crown2" />
: null} : null}
</div> </div>
<div className="sidebar-menu"> {isSmallViewport
<div className="sidebar-menu--heading sidebar--no-hover"> ? <div className="sidebar-menu sidebar-menu--inverse">
{me.name} {customLinks
</div> ? <div className="sidebar-menu--section">Custom Links</div>
<div className="sidebar-menu--section">Account</div> : null}
{isSuperAdmin {customLinks
? <div className="sidebar-menu--superadmin"> ? customLinks.map((link, i) =>
<div> <a
<span className="icon crown2" /> You are a SuperAdmin key={i}
</div> className="sidebar-menu--item"
href={link.url}
target="_blank"
>
{link.name}
</a>
)
: null}
<div className="sidebar-menu--section">Switch Organizations</div>
<FancyScrollbar
className="sidebar-menu--scrollbar"
autoHeight={true}
maxHeight={isSmallViewport ? 105 : 300}
autoHide={false}
>
{roles.map((r, i) => {
const isLinkCurrentOrg =
currentOrganization.id === r.organization
return (
<span
key={i}
className={classnames({
'sidebar-menu--item': true,
active: isLinkCurrentOrg,
})}
onClick={this.handleChangeCurrentOrganization(
r.organization
)}
>
{
organizations.find(o => o.id === r.organization).name
}{' '}
<strong>({r.name})</strong>
</span>
)
})}
</FancyScrollbar>
<div className="sidebar-menu--section">Account</div>
<a className="sidebar-menu--item" href={logoutLink}>
Logout
</a>
{isSuperAdmin
? <div className="sidebar-menu--superadmin">
<div>
<span className="icon crown2" /> You are a SuperAdmin
</div>
</div>
: null}
<div className="sidebar-menu--heading sidebar--no-hover">
{me.name}
</div> </div>
: null} <div className="sidebar-menu--triangle" />
<a className="sidebar-menu--item" href={logoutLink}> </div>
Logout : <div className="sidebar-menu">
</a> <div className="sidebar-menu--heading sidebar--no-hover">
<div className="sidebar-menu--section">Switch Organizations</div> {me.name}
<FancyScrollbar </div>
className="sidebar-menu--scrollbar" <div className="sidebar-menu--section">Account</div>
autoHeight={true} {isSuperAdmin
maxHeight={300} ? <div className="sidebar-menu--superadmin">
autoHide={false} <div>
> <span className="icon crown2" /> You are a SuperAdmin
{roles.map((r, i) => { </div>
const isLinkCurrentOrg = currentOrganization.id === r.organization </div>
return ( : null}
<span <a className="sidebar-menu--item" href={logoutLink}>
key={i} Logout
className={classnames({ </a>
'sidebar-menu--item': true, <div className="sidebar-menu--section">Switch Organizations</div>
active: isLinkCurrentOrg, <FancyScrollbar
})} className="sidebar-menu--scrollbar"
onClick={this.handleChangeCurrentOrganization(r.organization)} autoHeight={true}
> maxHeight={isSmallViewport ? 100 : 300}
{organizations.find(o => o.id === r.organization).name}{' '} autoHide={false}
<strong>({r.name})</strong> >
</span> {roles.map((r, i) => {
) const isLinkCurrentOrg =
})} currentOrganization.id === r.organization
</FancyScrollbar> return (
{customLinks <span
? <div className="sidebar-menu--section">Custom Links</div> key={i}
: null} className={classnames({
{customLinks 'sidebar-menu--item': true,
? customLinks.map((link, i) => active: isLinkCurrentOrg,
<a })}
key={i} onClick={this.handleChangeCurrentOrganization(
className="sidebar-menu--item" r.organization
href={link.url} )}
target="_blank" >
> {
{link.name} organizations.find(o => o.id === r.organization).name
</a> }{' '}
) <strong>({r.name})</strong>
: null} </span>
<div className="sidebar-menu--triangle" /> )
</div> })}
</FancyScrollbar>
{customLinks
? <div className="sidebar-menu--section">Custom Links</div>
: null}
{customLinks
? customLinks.map((link, i) =>
<a
key={i}
className="sidebar-menu--item"
href={link.url}
target="_blank"
>
{link.name}
</a>
)
: null}
<div className="sidebar-menu--triangle" />
</div>}
</div> </div>
) )
} }

View File

@ -140,6 +140,11 @@ $sidebar-menu--gutter: 18px;
transition: opacity 0.25s ease; transition: opacity 0.25s ease;
display: none; display: none;
flex-direction: column; flex-direction: column;
&.sidebar-menu--inverse {
top: initial;
bottom: 0;
}
} }
.sidebar-menu--heading, .sidebar-menu--heading,
.sidebar-menu--item { .sidebar-menu--item {
@ -229,6 +234,11 @@ $sidebar-menu--gutter: 18px;
height: 2px; height: 2px;
@include gradient-h($c-laser,$c-potassium); @include gradient-h($c-laser,$c-potassium);
} }
&:first-child:after {
display: none;
border-top-right-radius: $radius;
}
} }
// SuperAdminIndicator // SuperAdminIndicator