Render more space efficient user nav when viewport is insufficient
parent
a47aff3fba
commit
74cf0f26c4
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue