To enable the persistent, narrow sidebar treatment at tablet-width breakpoints (approximately 768px) and above, locate the pxh-navigation
-classed element and add the responsive modifier class pxh-navigation--narrow@md
to it. This class should be hard-coded, and does not need to be toggled with Javascript.
When the user clicks .pxh-drawer-toggle__link
or .pxh-view-header-drawer-toggle__link
…
.pxh-drawer
and toggle the classes pxh-drawer--hidden-until@md
and pxh-drawer--narrow@md
on it.// Set the default styles for the wide/active state of the drawer.
.pxh-drawer {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: $pxh-drawer-width-wide;
height: 100%;
background-color: $pxh-drawer-bg-color;
transition: all 500ms ease-out;
}
// Keep the inactive drawer hidden off-screen until the @md (tablet) breakpoint.
@include mq($until: md) {
.pxh-drawer--hidden-until\@md {
left: ($pxh-drawer-width-wide * -1);
}
}
// From the @md (tablet) breakpoint and wider,
// the inactive drawer is displayed in its narrow state.
// Remove this class to display the drawer in its wide state.
@include mq($from: md) {
.pxh-drawer--narrow\@md {
width: $pxh-drawer-width-narrow;
}
}
By default, pxh-view is transparent and gets its background color from the background color of the HTML body
element, which is set to a light gray color from Predix UI.
If you wish to override this default color, you can apply a modifier class to your pxh-view element. For example:
<section class="pxh-view pxh-view--gray7 pxh-view--wide@md pxh-view--narrow@lg" id="js-view">
<p>This screen demonstrates <code>pxh-view</code> with the <code>pxh-view--gray7</code> modifier class applied to it, which changes its default background color.</p>
</section>
All monochromatic colors from Predix UI are supported, including black and white. View the drawer demo page for a list of all options, and links to examples.
By default, pxh-view-header
assumes the styles for your microapp's view header content will account for the extra space needed to display the "hamburger" drawer toggle menu at the mobile breakpoint. If you would rather that pxh-chrome handles this spacing automatically, add the responsive modifier class pxh-view-header--nudge-until@md
to your pxh-view-header
element markup like so:
<section class="pxh-wrapper">
<header class="pxh-view-header pxh-view-header--wide@md pxh-view-header--narrow@lg pxh-view-header--nudge-until@md">
<h1 class="pxh-view-header__title">
<a href="index.html" class="pxh-view-header__title-link">
View Header Nudge Demo
</a>
</h1>
</header>
<section class="pxh-view pxh-view--wide@md pxh-view--narrow@lg" id="js-view">
…
</section>
</section>
This class will automatically include the extra left spacing for the drawer toggle menu at the mobile breakpoint and below, but remove it at all higher breakpoints.
Typically we prefer that the mobile breakpoint is simply defined by our application's default non-responsive styles, and we layer additional styles on top of it to achieve the desired look-and-feel at wider breakpoints. By targeting lower rather than higher breakpoints the --until@md
responsive modifier class clearly doesn't follow this best practice, but we find it to be an allowable exception in this case.
When the user clicks .pxh-drawer-toggle__link
or .pxh-view-header-drawer-toggle__link
…
.pxh-view
and toggle the class pxh-view--narrow@lg
on it.pxh-view-header
and toggle the class pxh-view-header--narrow@lg
on it.pxh-view-header-drawer-toggle
and toggle the classes pxh-view-header-drawer-toggle--hidden@md and pxh-view-header-drawer-toggle--hidden
on it// From the @md (tablet) breakpoint and wider,
// the view is displayed in its wide state, which accounts
// for the width of the narrow state of the drawer on the left.
@include mq($from: md) {
.pxh-view--wide\@md {
margin-left: $pxh-drawer-width-narrow;
}
}
// From the @lg (desktop) breakpoint and wider,
// add this class to display the view in its narrow state,
// which acccounts for the width of the wide state of the drawer.
@include mq($from: lg) {
.pxh-view--narrow\@lg {
margin-left: $pxh-drawer-width-wide;
}
}
// From the @md (tablet) breakpoint and wider,
// the view header is displayed in its wide state, which accounts
// for the width of the narrow state of the drawer on the left.
@include mq($from: md) {
.pxh-view-header--wide\@md {
left: $pxh-drawer-width-narrow;
}
}
// From the @lg (desktop) breakpoint and wider,
// add this class to display the view header in its narrow state,
// which accounts for the width of the wide state of the drawer.
@include mq($from: lg) {
.pxh-view-header--narrow\@lg {
left: $pxh-drawer-width-wide;
}
}
// Hide the toggle button in the view-header. This class is
// used even though the drawer covers the view-header toggle
// button, because sometimes click events on the drawer toggle
// are intercepted by the view-header toggle as well, resulting
// in a bounce scenario.
.pxh-view-header-drawer-toggle--hidden {
left: $pxh-drawer-width-narrow * -1;
opacity: 0;
}
// From the @md (tablet) breakpoint and wider, hide the
// toggle button in the view-header, as the toggle in the
// narrow left drawer is persistently displayed instead.
@include mq($from: md) {
.pxh-view-header-drawer-toggle--hidden\@md {
left: $pxh-drawer-width-narrow * -1;
opacity: 0;
}
}