The basic markup for the signed-out state of pxh-login
looks like this:
<div class="pxh-login pxh-login--narrow@md">
<a href="#" class="pxh-login__link">
<div class="pxh-login__avatar">
<i class="fa fa-user pxh-login__avatar-icon"></i>
</div>
<div class="pxh-login__name pxh-login__name--narrow@md">
Log In
</div>
</a>
</div>
The basic markup for the signed-in state of pxh-login
looks like this:
<div class="pxh-login pxh-login--narrow@md">
<a href="#" class="pxh-login__link">
<div class="pxh-login__avatar">
<img src="img/avatar.jpg" class="pxh-login__avatar-image">
</div>
<div class="pxh-login__name pxh-login__name--narrow@md">
Xiying Wang
</div>
<div class="pxh-login__caret pxh-login__caret--narrow@md">
<i class="fa fa-angle-up pxh-login__caret-icon"></i>
</div>
</a>
<div class="pxh-login-menu">
<ul class="pxh-login-menu__list">
<li class="pxh-login-menu__item">
<a class="pxh-login-menu__link" href="#">My Profile</a>
</li>
<li class="pxh-login-menu__item">
<a class="pxh-login-menu__link" href="#">Help</a>
</li>
<li class="pxh-login-menu__divider"></li>
<li class="pxh-login-menu__item">
<a class="pxh-login-menu__link" href="/logout">Log Out</a>
</li>
</ul>
</div>
<div class="pxh-login__settings pxh-login__settings--narrow@md">
<a class="pxh-login__settings-link" href="#"><i class="fa fa-cog"></i></a>
</div>
</div>
When the user clicks .pxh-drawer-toggle__link
or .pxh-view-header-drawer-toggle__link
…
.pxh-login__name
and toggle the class pxh-login__name--narrow@md
on it.pxh-login__caret
and toggle the class pxh-login__caret--narrow@md
on it.pxh-login__settings
and toggle the class pxh-login__settings--narrow@md
on it// From the @md (tablet) breakpoint and wider,
// display pxh-login__name in its narrow state.
// Remove this class to display the drawer in its wide state.
@include mq($from: md) {
.pxh-login__name--narrow\@md {
display: none;
}
}
// From the @md (tablet) breakpoint and wider,
// display pxh-login__caret in its narrow state.
// Remove this class to display the drawer in its wide state.
@include mq($from: md) {
.pxh-login__caret--narrow\@md {
display: none;
}
}
// From the @md (tablet) breakpoint and wider,
// display pxh-login__settings in its narrow state.
// Remove this class to display the drawer in its wide state.
@include mq($from: md) {
.pxh-login__settings--narrow\@md {
display: none;
}
}