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");
          }
        });
      });
    }
  });
});
URL copied to clipboard!