Utility Tabs
This component has elements which may affect an embedded demo. Open the
preview in a new tab
.
<div class="utility-tabs">
<a href="#" class="utility-tabs__tab js-sidebar-trigger" data-sidebar="gethelp">Get Help</a>
<a href="#" class="utility-tabs__tab utility-tabs__tab--primary is-active js-sidebar-trigger js-deactivate" data-sidebar="whatsnew">New in Murray</a>
</div>
<!-- What's New -->
<div class="sidebar sidebar--right" id="sidebar-whatsnew">
<header class="sidebar__header sidebar__header--dark">
<div class="sidebar__header-group">
<h3 class="sidebar__header-title">NEW IN MURRAY</h3>
</div>
<a href="#">
<i class="fa fa-close sidebar__close js-close"></i>
</a>
</header>
<div class="sidebar__container">
<div class="sidebar__content">
<div class="sidebar-entry">
<span class="text-muted">May 16 2022</span><br />
<div class="typeHeadline-Bold">MURRAY GOES 2.0!</div>
<p>
<a href="#"><img src="/images/placeholder/308x174.png" alt="" class="img-responsive" /></a>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque gravida ut et orci arcu eu faucibus amet:</p>
<ul>
<li>Lorem, ipsum dolor</li>
<li>Id repellendus consectetur</li>
<li>Eius voluptates eos</li>
<li>Accusamus aut</li>
<li>Ratione aliquid</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p>
<p>
<a href="#">
<strong>Read more</strong>
</a>
</p>
</div>
<div class="sidebar-entry">
<span class="text-muted">May 16 2022</span><br />
<div class="typeHeadline-Bold">LOREM IPSUM</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique praesentium, corporis debitis accusantium possimus ea animi deserunt sequi necessitatibus veritatis nesciunt. Repellat deleniti ratione voluptate eum necessitatibus modi voluptatem ullam?</p>
</div>
<hr />
<div class="sidebar-entry">
<div class="typeHeadline-Bold text-primary">COMING SOON</div>
<br />
<span class="text-muted">Summer 2022</span><br />
<div class="typeTitle-Bold">Lorem Ipsum</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat maiores vel nostrum esse.</p>
</div>
<div class="sidebar-entry">
<div class="typeTitle-Bold">Lorem Ipsum</div>
<p>Numquam, maiores. Dolorem praesentium sit consequatur? Corporis reiciendis perspiciatis quod minus possimus at!</p>
</div>
<div class="sidebar-entry">
<span class="text-muted">Fall 2022</span><br />
<div class="typeTitle-Bold">Lorem Ipsum</div>
<p>Et eos doloribus inventore maxime molestias aliquam soluta natus error, quibusdam culpa tempora?</p>
</div>
<hr />
<p class="text-center">
<a href="mailto:murray@viacomcbs.com?subject=Feedback for Murray">
<strong>Send feedback to Murray</strong>
</a>
</p>
<!-- Optional spacer to allow additional whitespace/scrolling -->
<div style="height: 512px"></div>
</div>
</div>
</div>
<!-- Get Help -->
<div class="sidebar sidebar--right" id="sidebar-gethelp">
<header class="sidebar__header sidebar__header--dark">
<div class="sidebar__header-group">
<h3 class="sidebar__header-title">GET HELP</h3>
</div>
<a href="#">
<i class="fa fa-close sidebar__close js-close"></i>
</a>
</header>
<div class="sidebar__container">
<div class="sidebar__content">
<div class="sidebar-entry">
<div class="typeHeadline-Bold">US EMPLOYEES</div>
<p>US employees, get in touch with an HR Representative for help navigating HR policies, programs and procedures.</p>
<p>
<a href="#">
<strong>Visit AskHR</strong>
</a>
</p>
</div>
<div class="sidebar-entry">
<div class="typeHeadline-Bold">INTERNATIONAL EMPLOYEES</div>
<p>International employees, find the right contact for the help you need.</p>
<p>
<a href="#">
<strong>Find your help contact</strong>
</a>
</p>
</div>
<div class="sidebar-entry">
<div class="typeHeadline-Bold">TECHNOLOGY HELP</div>
<p>Get help with technology, hardware issues or IT concerns.</p>
<p>
<a href="#">
<strong>Visit pITstop</strong>
</a>
</p>
</div>
<div class="sidebar-entry">
<div class="typeHeadline-Bold">REPORT A CONCERN</div>
<p>Report a violation or concern through OPENLINE, Paramount's hotline. You may remain anonymous if you wish.</p>
<p>
<strong>(855) 833-5027</strong>
</p>
<p>Available Make a report or follow up online</p>
<p>
<a href="#">
<strong>Make a report or follow up online</strong>
</a>
</p>
</div>
</div>
</div>
</div>
.utility-tabs {
position: fixed;
z-index: 100;
top: 50vh;
right: 0;
color: red !important;
background-color: yellow;
writing-mode: vertical-rl;
transform: rotate(-180deg) translateY(50%);
display: flex;
}
.utility-tabs__tab {
@include typeBody(true);
color: $color-blue-dark;
display: flex;
align-items: center;
padding: 0.8rem 0.4rem;
background-color: $color-grey-medium;
white-space: nowrap;
&.is-active {
&::before {
display: block;
content: "";
border-radius: 50%;
width: 0.8rem;
height: 0.8rem;
background-color: $color-magenta-medium;
margin-bottom: 0.4rem;
}
}
}
.utility-tabs__tab--primary {
background-color: $color-blue-dark;
color: $color-base-white;
&:hover {
color: $color-blue-light;
}
&.is-active {
background-color: $color-blue-medium;
}
}
/* Sidebar Entries
***************/
.sidebar-entry {
@include typeBody;
margin-top: 3.6rem;
}
// Note: This component reuses the script to open panels found within the header for the main menu on mobile.
$(document).ready(function () {
$(".js-deactivate").on("click", function (event) {
event.preventDefault();
$(this).removeClass("is-active js-deactivate");
});
$(document).ready(function () {
// Deactivate tab
$(".js-my-apps").on("click", function () {
$(this).add(".js-apps").toggleClass("is-active");
});
const $sidebarTriggers = $(".js-sidebar-trigger");
if ($sidebarTriggers.length) {
$sidebarTriggers.each(function (i, trigger) {
const $trigger = $(trigger);
const sidebarId = "sidebar-" + $trigger.attr("data-sidebar").split("#")[0];
const $sidebar = $("#" + sidebarId);
if ($sidebar.length === 0) return;
$trigger.on("click", function (event) {
event.preventDefault();
$sidebar.addClass("is-active");
// Disable body scrolling when panel open
$("body").addClass("has-open-panel");
});
// Close panel
$sidebar.on("click", function (event) {
if ($(event.target).hasClass("js-close") || $(event.target).attr("id") === sidebarId) {
event.preventDefault();
$sidebar.removeClass("is-active");
$("body").removeClass("has-open-panel");
}
});
});
}
});
});