Header
Notes
- To see dropdown interactions, open the preview in a new tab .
- Profile modal TBD.
<div class="header">
<div class="header-container">
<div class="header-left">
<div class="hidden-lg">
<a href="#" class="btn btn-primary js-sidebar-trigger" data-sidebar="menu">
<i class="fa fa-bars"></i>
</a>
</div>
<div>
<a href="#" class="header-logo js-header-logo"><img src="/images/logo-murray.gif" alt="Murray" class="img-responsive" /></a>
</div>
</div>
<div class="visible-lg-block header-center">
<div class="header-search">
<i class="fa fa-search header-search__icon"></i>
<input type="text" id="header-search" class="header-search__input" placeholder="Search & People Finder" />
</div>
</div>
<div class="header-right">
<div class="header-utilities visible-lg-block">
<a href="#" class="btn btn-link header-btn js-my-apps">
<i class="fa fa-th"></i>
My Okta Apps</a
>
<a href="#" class="btn btn-link header-btn">
<i class="fa fa-file-text-o"></i>
Policies</a
>
</div>
<a href="#" class="header-profile" data-toggle="modal" data-target="#private-profile">
<span class="header-profile__name visible-lg-block">Riley</span>
<img src="/images/placeholder/32x32.png" alt="" class="header-profile__image" />
</a>
</div>
</div>
</div>
<!-- Apps -->
<div class="apps js-apps">
<div class="apps-container">
<div class="accordion-utility">
<div class="accordion-utility__header">
<div class="accordion-utility__title" type="button" data-toggle="collapse" data-target="#portal-apps" aria-expanded="true" aria-controls="portal-apps">Portal Apps</div>
<div class="accordion-utility__actions">
<a href="#" class="btn btn-link"
>See all apps
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
<div class="collapse in" id="portal-apps">
<div class="accordion-utility__panel">
<div class="app-tiles">
<a href="#" class="app-tile">
<div class="app-tile__media"><img src="/images/placeholder/144x81.png" alt="" class="app-tile__image" /></div>
<div class="app-tile__title">App name lorem ipsum</div>
</a>
<a href="#" class="app-tile">
<div class="app-tile__media"><img src="/images/placeholder/144x81.png" alt="" class="app-tile__image" /></div>
<div class="app-tile__title">App name lorem ipsum</div>
</a>
<a href="#" class="app-tile">
<div class="app-tile__media"><img src="/images/placeholder/144x81.png" alt="" class="app-tile__image" /></div>
<div class="app-tile__title">App name lorem ipsum</div>
</a>
<a href="#" class="app-tile">
<div class="app-tile__media"><img src="/images/placeholder/144x81.png" alt="" class="app-tile__image" /></div>
<div class="app-tile__title">App name lorem ipsum</div>
</a>
<a href="#" class="app-tile">
<div class="app-tile__media"><img src="/images/placeholder/144x81.png" alt="" class="app-tile__image" /></div>
<div class="app-tile__title">App name lorem ipsum</div>
</a>
<a href="#" class="app-tile">
<div class="app-tile__media"><img src="/images/placeholder/144x81.png" alt="" class="app-tile__image" /></div>
<div class="app-tile__title">App name lorem ipsum</div>
</a>
<a href="#" class="app-tile">
<div class="app-tile__media"><img src="/images/placeholder/144x81.png" alt="" class="app-tile__image" /></div>
<div class="app-tile__title">App name lorem ipsum</div>
</a>
<a href="#" class="app-tile">
<div class="app-tile__media"><img src="/images/placeholder/144x81.png" alt="" class="app-tile__image" /></div>
<div class="app-tile__title">App name lorem ipsum</div>
</a>
<a href="#" class="app-tile app-tile--promo">
<div class="app-tile__media">
<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm7 14h-5v5h-4v-5H6v-3l1-1h4V6l1-1h2l1 1v4h4l1 1v3Z" fill="#9999A5" /></svg>
Add More
</div>
<div class="app-tile__title">Add or change the apps that appear here!</div>
</a>
</div>
</div>
</div>
</div>
<div class="accordion-utility accordion-utility--dark">
<div class="accordion-utility__header">
<div class="accordion-utility__title" type="button" data-toggle="collapse" data-target="#recommended-apps" aria-expanded="true" aria-controls="recommended-apps">Recommended Apps</div>
<div class="accordion-utility__actions"></div>
</div>
<div class="collapse in" id="recommended-apps">
<div class="accordion-utility__panel">
<div class="app-tiles">
<a href="#" class="app-tile">
<div class="app-tile__media"><img src="/images/placeholder/144x81.png" alt="" class="app-tile__image" /></div>
<div class="app-tile__title">App name lorem ipsum</div>
</a>
<a href="#" class="app-tile">
<div class="app-tile__media"><img src="/images/placeholder/144x81.png" alt="" class="app-tile__image" /></div>
<div class="app-tile__title">App name lorem ipsum</div>
</a>
<a href="#" class="app-tile">
<div class="app-tile__media"><img src="/images/placeholder/144x81.png" alt="" class="app-tile__image" /></div>
<div class="app-tile__title">App name lorem ipsum</div>
</a>
<a href="#" class="app-tile">
<div class="app-tile__media"><img src="/images/placeholder/144x81.png" alt="" class="app-tile__image" /></div>
<div class="app-tile__title">App name lorem ipsum</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Desktop Navigation -->
<nav class="header-nav visible-lg-block">
<ul class="header-nav__list">
<li class="header-nav__section">
<div class="header-nav__menu-item header-nav__menu-item--position-0">News & Events</div>
<div class="header-nav__dropdown js-dropdown">
<div class="header-nav__groups header-nav__groups--position-1">
<div class="header-nav__group">
<a href="/pages/news-center.html" class="header-nav__menu-item header-nav__menu-item--position-1 header-nav__menu-item--link">News Center</a>
</div>
</div>
<div class="header-nav__groups header-nav__groups--position-1">
<div class="header-nav__group">
<a href="/pages/events-center.html" class="header-nav__menu-item header-nav__menu-item--position-1 header-nav__menu-item--link">Events Center</a>
</div>
</div>
</div>
</li>
<li class="header-nav__section">
<a href="/pages/benefits-and-wellness.html" class="header-nav__menu-item header-nav__menu-item--link header-nav__menu-item--position-0">Benefits & Wellness</a>
</li>
<li class="header-nav__section">
<div class="header-nav__menu-item header-nav__menu-item--position-0">Careers</div>
<div class="header-nav__dropdown js-dropdown">
<div class="header-nav__groups header-nav__groups--position-1">
<div class="header-nav__group">
<a href="/pages/careers.html" class="header-nav__menu-item header-nav__menu-item--position-1 header-nav__menu-item--link">Careers</a>
<div class="header-nav__groups header-nav__groups--position-2">
<div class="header-nav__group">
<div class="header-nav__menu-columns">
<div class="header-nav__menu-column">
<div>
<a href="/pages/goals.html" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Goals, Check-Ins & Feedback</a>
</div>
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Learning & Development</a>
</div>
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Engagement</a>
</div>
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Career Opportunities</a>
</div>
</div>
</div>
</div>
<div class="header-nav__group">
<div class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--label">Additional Career Resources</div>
<div class="header-nav__menu-columns">
<div class="header-nav__menu-column">
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Employee Referral Program</a>
</div>
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Campus to Career</a>
</div>
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Inventor Awards Program</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="header-nav__section">
<a href="/pages/workspace.html" class="header-nav__menu-item header-nav__menu-item--link header-nav__menu-item--position-0">My Workspace</a>
</li>
<li class="header-nav__section">
<a href="/pages/services.html" class="header-nav__menu-item header-nav__menu-item--link header-nav__menu-item--position-0">Services</a>
</li>
<li class="header-nav__section">
<div class="header-nav__menu-item header-nav__menu-item--position-0">About Us</div>
<div class="header-nav__dropdown js-dropdown">
<div class="header-nav__groups header-nav__groups--position-1">
<div class="header-nav__group">
<a href="/pages/about-business.html" class="header-nav__menu-item header-nav__menu-item--position-1 header-nav__menu-item--link">About the Business</a>
</div>
</div>
<div class="header-nav__groups header-nav__groups--position-1">
<div class="header-nav__group">
<a href="/pages/bu-div.html" class="header-nav__menu-item header-nav__menu-item--position-1 header-nav__menu-item--link">Paramount Streaming</a>
</div>
</div>
</div>
</li>
<li class="header-nav__section">
<div class="header-nav__menu-item header-nav__menu-item--position-0">Communities</div>
<div class="header-nav__dropdown js-dropdown">
<div class="header-nav__groups header-nav__groups--position-1">
<div class="header-nav__group">
<a href="/pages/communities.html" class="header-nav__menu-item header-nav__menu-item--position-1 header-nav__menu-item--link">Communities</a>
<div class="header-nav__groups header-nav__groups--position-2">
<div class="header-nav__group">
<div class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--label">Employee Resource Groups (ERGs)</div>
<div class="header-nav__menu-columns">
<div class="header-nav__menu-column">
<div>
<a href="/pages/erg.html" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">AMP</a>
</div>
<div>
<a href="/pages/erg.html" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">BEAT+</a>
</div>
<div>
<a href="/pages/erg.html" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Fusion</a>
</div>
<div>
<a href="/pages/erg.html" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Parenthood</a>
</div>
<div>
<a href="/pages/erg.html" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Proud</a>
</div>
</div>
<div class="header-nav__menu-column">
<div>
<a href="/pages/erg.html" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Rise</a>
</div>
<div>
<a href="/pages/erg.html" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Somos</a>
</div>
<div>
<a href="/pages/erg.html" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Women+</a>
</div>
<div>
<a href="/pages/erg.html" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">People's Angels</a>
</div>
</div>
</div>
</div>
<div class="header-nav__group">
<div class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--label">Volunteering & Giving</div>
<div class="header-nav__menu-columns">
<div class="header-nav__menu-column">
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Program Opportunity</a>
</div>
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Program Opportunity</a>
</div>
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Program Opportunity</a>
</div>
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Program Opportunity</a>
</div>
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Program Opportunity</a>
</div>
</div>
<div class="header-nav__menu-column">
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Program Opportunity</a>
</div>
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Program Opportunity</a>
</div>
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Program Opportunity</a>
</div>
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Program Opportunity</a>
</div>
<div>
<a href="#" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Program Opportunity</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="header-nav__section">
<div class="header-nav__menu-item header-nav__menu-item--position-0">Manager Center</div>
<div class="header-nav__dropdown js-dropdown">
<div class="header-nav__groups header-nav__groups--position-1">
<div class="header-nav__group">
<div class="header-nav__groups">
<div class="header-nav__group">
<div class="header-nav__menu-columns">
<div class="header-nav__menu-column">
<div>
<a href="/pages/manager-center-v2.html" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Manager Center Homepage</a>
</div>
<div>
<a href="" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">People Leader Expectations</a>
</div>
<div>
<a href="/pages/headcount.html" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Headcount Planning & Hiring</a>
</div>
<div>
<a href="/pages/team-changes.html" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Changes to My Team</a>
</div>
<div>
<a href="" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Performance Development Cycle</a>
</div>
<div>
<a href="" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Team Engagement</a>
</div>
<div>
<a href="/pages/team-onboarding.html" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Onboarding a New Team Member </a>
</div>
<div>
<a href="" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Well-being Conversations</a>
</div>
</div>
<div class="header-nav__menu-column">
<div class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--label">I want to</div>
<div>
<a href="" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Find manager reports</a>
</div>
<div>
<a href="" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Hire Project-Based Employees (PBEs)</a>
</div>
<div>
<a href="" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">View Pulse Survey results</a>
</div>
<div>
<a href="" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Priority action links go here</a>
</div>
<div>
<a href="" class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--link">Seasonal promotion/action link</a>
</div>
</div>
</div>
</div>
<div class="header-nav__group">
<div class="header-nav__menu-item header-nav__menu-item--position-2 header-nav__menu-item--label">Related tools</div>
<div class="header-nav__menu-columns">
<div class="header-nav__menu-column">
<div class="header-nav__menu-item header-nav__menu-item--position-2">
<a href="" class="header-nav__menu-item--icon-link">
<div class="header-nav__menu-item--icon-media-wrap">
<img src="/images/placeholder/36x36.png" alt="" class="header-nav__menu-item--icon-media" />
</div>
<div class="header-nav__menu-item--icon-link-content">
<div class="header-nav__menu-item--icon-link-title">Purpose of tool</div>
<div class="header-nav__menu-item--icon-link-desc">Tool Name</div>
</div>
</a>
</div>
<div class="header-nav__menu-item header-nav__menu-item--position-2">
<a href="" class="header-nav__menu-item--icon-link">
<div class="header-nav__menu-item--icon-media-wrap">
<img src="/images/placeholder/36x36.png" alt="" class="header-nav__menu-item--icon-media" />
</div>
<div class="header-nav__menu-item--icon-link-content">
<div class="header-nav__menu-item--icon-link-title">Purpose of tool</div>
<div class="header-nav__menu-item--icon-link-desc">Tool Name</div>
</div>
</a>
</div>
<div class="header-nav__menu-item header-nav__menu-item--position-2">
<a href="" class="header-nav__menu-item--icon-link">
<div class="header-nav__menu-item--icon-media-wrap">
<img src="/images/placeholder/36x36.png" alt="" class="header-nav__menu-item--icon-media" />
</div>
<div class="header-nav__menu-item--icon-link-content">
<div class="header-nav__menu-item--icon-link-title">Purpose of tool</div>
<div class="header-nav__menu-item--icon-link-desc">Tool Name</div>
</div>
</a>
</div>
<div class="header-nav__menu-item header-nav__menu-item--position-2">
<a href="" class="header-nav__menu-item--icon-link">
<div class="header-nav__menu-item--icon-media-wrap">
<img src="/images/placeholder/36x36.png" alt="" class="header-nav__menu-item--icon-media" />
</div>
<div class="header-nav__menu-item--icon-link-content">
<div class="header-nav__menu-item--icon-link-title">Purpose of tool</div>
<div class="header-nav__menu-item--icon-link-desc">Tool Name</div>
</div>
</a>
</div>
<div class="header-nav__menu-item header-nav__menu-item--position-2">
<a href="" class="header-nav__menu-item--icon-link">
<div class="header-nav__menu-item--icon-media-wrap">
<img src="/images/placeholder/36x36.png" alt="" class="header-nav__menu-item--icon-media" />
</div>
<div class="header-nav__menu-item--icon-link-content">
<div class="header-nav__menu-item--icon-link-title">Purpose of tool</div>
<div class="header-nav__menu-item--icon-link-desc">Tool Name</div>
</div>
</a>
</div>
</div>
<div class="header-nav__menu-column">
<div class="header-nav__menu-item header-nav__menu-item--position-2">
<a href="" class="header-nav__menu-item--icon-link">
<div class="header-nav__menu-item--icon-media-wrap">
<img src="/images/placeholder/36x36.png" alt="" class="header-nav__menu-item--icon-media" />
</div>
<div class="header-nav__menu-item--icon-link-content">
<div class="header-nav__menu-item--icon-link-title">Purpose of tool</div>
<div class="header-nav__menu-item--icon-link-desc">Tool Name</div>
</div>
</a>
</div>
<div class="header-nav__menu-item header-nav__menu-item--position-2">
<a href="" class="header-nav__menu-item--icon-link">
<div class="header-nav__menu-item--icon-media-wrap">
<img src="/images/placeholder/36x36.png" alt="" class="header-nav__menu-item--icon-media" />
</div>
<div class="header-nav__menu-item--icon-link-content">
<div class="header-nav__menu-item--icon-link-title">Purpose of tool</div>
<div class="header-nav__menu-item--icon-link-desc">Tool Name</div>
</div>
</a>
</div>
<div class="header-nav__menu-item header-nav__menu-item--position-2">
<a href="" class="header-nav__menu-item--icon-link">
<div class="header-nav__menu-item--icon-media-wrap">
<img src="/images/placeholder/36x36.png" alt="" class="header-nav__menu-item--icon-media" />
</div>
<div class="header-nav__menu-item--icon-link-content">
<div class="header-nav__menu-item--icon-link-title">Purpose of tool</div>
<div class="header-nav__menu-item--icon-link-desc">Tool Name</div>
</div>
</a>
</div>
<div class="header-nav__menu-item header-nav__menu-item--position-2">
<a href="" class="header-nav__menu-item--icon-link">
<div class="header-nav__menu-item--icon-media-wrap">
<img src="/images/placeholder/36x36.png" alt="" class="header-nav__menu-item--icon-media" />
</div>
<div class="header-nav__menu-item--icon-link-content">
<div class="header-nav__menu-item--icon-link-title">Purpose of tool</div>
<div class="header-nav__menu-item--icon-link-desc">Tool Name</div>
</div>
</a>
</div>
<div class="header-nav__menu-item header-nav__menu-item--position-2">
<a href="" class="header-nav__menu-item--icon-link">
<div class="header-nav__menu-item--icon-media-wrap">
<img src="/images/placeholder/36x36.png" alt="" class="header-nav__menu-item--icon-media" />
</div>
<div class="header-nav__menu-item--icon-link-content">
<div class="header-nav__menu-item--icon-link-title">Purpose of tool</div>
<div class="header-nav__menu-item--icon-link-desc">Tool Name</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="header-nav__section">
<a href="/pages/onboarding.html" class="header-nav__menu-item header-nav__menu-item--link header-nav__menu-item--position-0">Onboarding</a>
</li>
</ul>
</nav>
<!-- Mobile Navigation -->
<div class="sidebar sidebar--left" id="sidebar-menu">
<header class="sidebar__header sidebar__header--dark">
<div class="sidebar__header-group">
<h3 class="sidebar__header-title">MENU</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="header-search">
<i class="fa fa-search header-search__icon"></i>
<input type="text" id="header-search" class="header-search__input" placeholder="Search & People Finder" />
</div>
<div class="sidebar-menu">
<ul class="sidebar-menu__list">
<li class="sidebar-menu__item sidebar-menu__item--position-1">
<div class="accordion accordion--split">
<div class="accordion__header">
<div class="sidebar-menu__title accordion__title">News & Events</div>
<div class="accordion__icon accordion__control" role="button" data-toggle="collapse" data-target="#menu-news-events" aria-expanded="false" aria-controls="menu-news-events"></div>
</div>
<div class="collapse" id="menu-news-events">
<div class="accordion__panel">
<ul class="sidebar-menu__list">
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<a href="/pages/news-center.html" class="sidebar-menu__title">News Center</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<a href="/pages/events-center.html" class="sidebar-menu__title">Events Center</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-1">
<div class="accordion accordion--split">
<div class="accordion__header">
<a href="/pages/benefits-and-wellness.html" class="sidebar-menu__title">Benefits & Wellness</a>
</div>
</div>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-1">
<div class="accordion accordion--split">
<div class="accordion__header">
<a href="/pages/careers.html" class="sidebar-menu__title accordion__title">Careers</a>
<div class="accordion__icon accordion__control" role="button" data-toggle="collapse" data-target="#menu-careers" aria-expanded="false" aria-controls="menu-careers"></div>
</div>
<div class="collapse" id="menu-careers">
<div class="accordion__panel">
<ul class="sidebar-menu__list">
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<a href="/pages/goals.html" class="sidebar-menu__title">Goals, Check-Ins & Feedback</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<a href="#" class="sidebar-menu__title">Learning & Development</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<a href="#" class="sidebar-menu__title">Engagement</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<a href="#" class="sidebar-menu__title">Career Opportunities</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<div class="accordion accordion--split accordion--borderless">
<div class="accordion__header">
<div class="sidebar-menu__title accordion__title">Additional Career Resources</div>
<div class="accordion__icon accordion__control" role="button" data-toggle="collapse" data-target="#menu-additional-careers" aria-expanded="false" aria-controls="menu-additional-careers"></div>
</div>
<div class="collapse" id="menu-additional-careers">
<div class="accordion__panel">
<ul class="sidebar-menu__list">
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Employee Referral Program</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Campus to Career</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Inventor Awards Program</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-1">
<div class="accordion accordion--split">
<div class="accordion__header">
<a href="/pages/workspace.html" class="sidebar-menu__title">My Workspace</a>
</div>
</div>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-1">
<div class="accordion accordion--split">
<div class="accordion__header">
<a href="/pages/services.html" class="sidebar-menu__title">Services</a>
</div>
</div>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-1">
<div class="accordion accordion--split">
<div class="accordion__header">
<div class="sidebar-menu__title accordion__title">About Us</div>
<div class="accordion__icon accordion__control" role="button" data-toggle="collapse" data-target="#menu-about-us" aria-expanded="false" aria-controls="menu-about-us"></div>
</div>
<div class="collapse" id="menu-about-us">
<div class="accordion__panel">
<ul class="sidebar-menu__list">
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<a href="/pages/about-business.html" class="sidebar-menu__title">About the Business</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<a href="/pages/bu-div.html" class="sidebar-menu__title">Paramount Streaming</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-1">
<div class="accordion accordion--split">
<div class="accordion__header">
<a href="/pages/communities.html" class="sidebar-menu__title accordion__title">Communities</a>
<div class="accordion__icon accordion__control" role="button" data-toggle="collapse" data-target="#menu-communities" aria-expanded="false" aria-controls="menu-communities"></div>
</div>
<div class="collapse" id="menu-communities">
<div class="accordion__panel">
<ul class="sidebar-menu__list">
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<div class="accordion accordion--split accordion--borderless">
<div class="accordion__header">
<div class="sidebar-menu__title accordion__title">Employee Resource Groups (ERGs)</div>
<div class="accordion__icon accordion__control" role="button" data-toggle="collapse" data-target="#menu-ergs" aria-expanded="false" aria-controls="menu-ergs"></div>
</div>
<div class="collapse" id="menu-ergs">
<div class="accordion__panel">
<ul class="sidebar-menu__list">
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="/pages/erg.html" class="sidebar-menu__title">ERG 1</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="/pages/erg.html" class="sidebar-menu__title">ERG 2</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<div class="accordion accordion--split accordion--borderless">
<div class="accordion__header">
<div class="sidebar-menu__title accordion__title">Volunteering & Giving</div>
<div class="accordion__icon accordion__control" role="button" data-toggle="collapse" data-target="#menu-volunteer-giving" aria-expanded="false" aria-controls="menu-volunteer-giving"></div>
</div>
<div class="collapse" id="menu-volunteer-giving">
<ul class="sidebar-menu__list">
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Program Opportunity 1</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Program Opportunity 2</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-1">
<div class="accordion accordion--split">
<div class="accordion__header">
<a href="/pages/manager-center.html" class="sidebar-menu__title accordion__title">Manager Center</a>
<div class="accordion__icon accordion__control" role="button" data-toggle="collapse" data-target="#menu-manager-center" aria-expanded="false" aria-controls="menu-manager-center"></div>
</div>
<div class="collapse" id="menu-manager-center">
<div class="accordion__panel">
<ul class="sidebar-menu__list">
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<a href="/pages/headcount.html" class="sidebar-menu__title">Headcount Planning & Hiring</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<a href="/pages/team-changes.html" class="sidebar-menu__title">Changes to Team</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<a href="#" class="sidebar-menu__title">Performance Development Guidance</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<a href="#" class="sidebar-menu__title">Global Employee Survey Guidance</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<a href="/pages/team-onboarding.html" class="sidebar-menu__title">Onboarding a New Team Member </a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<div class="accordion accordion--split accordion--borderless">
<div class="accordion__header">
<div class="sidebar-menu__title accordion__title">I want to</div>
<div class="accordion__icon accordion__control" role="button" data-toggle="collapse" data-target="#menu-i-want-to" aria-expanded="false" aria-controls="menu-i-want-to"></div>
</div>
<div class="collapse" id="menu-i-want-to">
<ul class="sidebar-menu__list">
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Find manager reports</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Hire Project-Based Employees (PBEs)</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">View Pulse Survey results</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Priority action links go here</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Seasonal promotion/action link</a>
</li>
</ul>
</div>
</div>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-2">
<div class="accordion accordion--split accordion--borderless">
<div class="accordion__header">
<div class="sidebar-menu__title accordion__title">Related tools</div>
<div class="accordion__icon accordion__control" role="button" data-toggle="collapse" data-target="#menu-related-tools" aria-expanded="false" aria-controls="menu-related-tools"></div>
</div>
<div class="collapse" id="menu-related-tools">
<ul class="sidebar-menu__list">
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Tool name</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Tool name</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Tool name</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Tool name</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Tool name</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Tool name</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Tool name</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Tool name</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Tool name</a>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-3">
<a href="#" class="sidebar-menu__title">Tool name</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-1">
<div class="accordion accordion--split">
<div class="accordion__header">
<a href="/pages/onboarding.html" class="sidebar-menu__title">Onboarding</a>
</div>
</div>
</li>
</ul>
</div>
<div class="sidebar-menu">
<ul class="sidebar-menu__list">
<li class="sidebar-menu__item sidebar-menu__item--position-1">
<div class="accordion accordion--split">
<div class="accordion__header">
<a href="#" class="sidebar-menu__title">My Okta Apps</a>
</div>
</div>
</li>
<li class="sidebar-menu__item sidebar-menu__item--position-1">
<div class="accordion accordion--split">
<div class="accordion__header">
<a href="#" class="sidebar-menu__title">Policies</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
/* Header
***************/
.header {
background-color: $color-base-blue;
color: $color-base-white;
position: relative;
z-index: 100;
}
.header-logo {
display: block;
padding-left: 1.2rem;
max-width: 23.2rem;
}
.header-container {
display: flex;
align-items: center;
max-width: 1170px;
margin: 0 auto;
.header-left,
.header-center,
.header-right {
display: flex;
align-items: center;
}
.header-left {
padding: 0.8rem 1.2rem;
flex: 1 0 25%;
}
.header-center {
flex: 1 0 40%;
}
.header-right {
padding-right: 1.2rem;
flex: 1;
justify-content: flex-end;
@media (min-width: $breakpoint-desktop) {
flex: 1 0 35%;
}
}
}
.header-search {
background-color: $color-base-white;
color: $color-grey-medium;
padding-left: 1.2rem;
display: flex;
align-items: center;
width: 100%;
&:focus-within {
outline: 4px solid $color-blue-light;
}
.header-search__icon {
font-size: 2.4rem;
}
.header-search__input {
border: 0;
font-size: 1.6rem;
padding: 0.8rem;
color: $color-grey-dark;
width: 100%;
&:focus {
outline: 0;
}
}
}
.header-utilities {
width: 100%;
text-align: center;
white-space: nowrap;
.header-btn {
padding: 3rem 1.2rem;
color: $color-base-white;
&:hover,
&:focus {
text-decoration: none;
}
&:hover {
color: $color-blue-light;
}
&.is-active {
color: $color-base-blue;
background-color: $color-base-grey;
}
}
}
.header-profile {
display: flex;
align-items: center;
&:hover {
text-decoration: none;
}
}
.header-profile__name {
@include typeSubheader;
text-align: right;
margin-right: 0.8rem;
color: $color-base-white;
.header-profile:hover & {
color: $color-blue-light;
}
}
.header-profile__image {
width: 4rem;
height: 4rem;
border-radius: 50%;
}
.header-nav {
background-color: $color-blue-medium;
}
.header-nav__list {
list-style: none;
padding-left: 0;
max-width: 1140px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.header-nav__section {
@include typeBody;
position: relative;
display: inline-block;
color: $color-base-white;
&:hover {
color: $color-base-blue;
background-color: $color-base-white;
opacity: 1;
visibility: visible;
}
}
.header-nav__dropdown {
opacity: 0;
visibility: hidden;
position: absolute;
z-index: 10;
background-color: $color-base-white;
border: 1px solid $color-grey-light;
border-top: 0;
left: 0;
bottom: 0;
transform: translateY(100%);
padding: 2.4rem;
.header-nav__section:hover & {
opacity: 1;
visibility: visible;
}
}
.header-nav__groups {
display: flex;
margin: 0 -1.6rem;
&.header-nav__groups--position-2 {
border-top: 1px solid $color-grey-light;
margin-top: 1.6rem;
padding-top: 1.6rem;
}
}
.header-nav__group {
margin: 0 1.6rem;
}
.header-nav__menu-columns {
display: flex;
margin-left: -1.6rem;
> .header-nav__menu-column {
margin: 0 1.6rem;
width: 20rem;
}
}
.header-nav__menu-item {
display: block;
&:hover {
text-decoration: none;
}
&.header-nav__menu-item--label {
font-weight: bold;
}
&.header-nav__menu-item--position-0 {
display: inline-block;
font-weight: bold;
padding: 1.2rem;
&.header-nav__menu-item--link {
color: $color-base-white;
&:hover {
color: $color-base-blue;
background-color: $color-blue-light;
}
}
}
&.header-nav__menu-item--position-1 {
font-weight: bold;
position: relative;
padding: 0.4rem 0;
margin-bottom: 1.2rem;
min-width: 24rem;
&.header-nav__menu-item--link {
&::after {
font-family: "FontAwesome";
content: "\f054";
display: inline;
margin-left: 0.8rem;
}
}
}
&.header-nav__menu-item--position-2 {
margin-bottom: 1.6rem;
&.header-nav__menu-item--link {
color: $color-grey-dark;
&:hover {
color: $color-base-blue;
}
}
.header-nav__menu-item--icon-link {
display: flex;
gap: 0.8rem;
color: $color-grey-dark;
&:hover {
color: $color-base-blue;
}
}
.header-nav__menu-item--icon-link-content {
flex: 1;
}
.header-nav__menu-item--icon-link-title {
color: $color-base-blue;
margin-bottom: 0.2rem;
}
.header-nav__menu-item--icon-link-desc {
@include typeCaption;
}
}
}
/* Apps Menu
***************/
.apps {
position: absolute;
z-index: 10;
width: 100%;
background-color: $color-base-grey;
transform: translateY(-100%);
transition: transform 0.3s ease-in-out;
&.is-active {
transform: translateY(0);
}
}
.apps-container {
max-width: 1170px;
margin: 0 auto;
padding: 1.2rem 2.4rem 2.4rem;
}
/* Utility Accordion
***************/
.accordion-utility {
padding: 1.2rem 2.4rem;
&.accordion-utility--dark {
background-color: rgba($color-grey-medium, 0.25);
}
}
.accordion-utility__header {
padding: 0.8rem 0;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.accordion-utility__title {
@include typeBody(true);
&::before {
content: "\f139";
font-family: "FontAwesome";
display: inline-block;
margin-right: 0.8rem;
}
&[aria-expanded="true"]::before {
content: "\f139";
}
&[aria-expanded="false"]::before {
content: "\f13a";
}
}
/* App Tile
***************/
.app-tile {
@include boxShadow(2);
width: 14.4rem;
height: 14.4rem;
background-color: $color-base-white;
border-radius: 4px;
&:hover {
text-decoration: none;
background-color: $color-blue-light;
}
&.app-tile--promo {
border: 2px dashed $color-grey-light;
}
.app-tiles > & {
margin: 1.6rem;
}
}
.app-tile__media {
@include typeBody(true);
color: $color-grey-dark;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 8rem;
}
.app-tile__image {
max-width: 100%;
height: auto;
display: block;
}
.app-tile__title {
@include typeCaption;
text-align: center;
color: $color-base-blue;
padding: 0.8rem;
}
.app-tiles {
display: flex;
flex-wrap: wrap;
margin-left: -1.6rem;
}
/* Sidebar
***************/
$sidebar-width: 340px;
$sidebar-header-height: 56px;
.sidebar {
visibility: hidden;
position: fixed;
z-index: 10000;
top: 0;
right: 0;
width: 100%;
height: 100%;
transition: visibility 0s 0.3s;
// Transparent Overlay
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba($color-base-blue, 0.5);
}
}
.sidebar--left {
left: 0;
right: auto;
}
.sidebar__header {
position: fixed;
z-index: 2;
top: 0;
right: 0;
width: 100%;
max-width: $sidebar-width;
height: $sidebar-header-height;
transform: translate3d(100%, 0, 0);
transition: transform 0.3s;
background-color: $color-blue-medium;
color: $color-base-white;
display: flex;
align-items: center;
.sidebar--left & {
right: auto;
left: 0;
transform: translate3d(-100%, 0, 0);
max-width: $sidebar-width;
}
.sidebar__header-group {
@include typeBody;
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
padding-left: 2.4rem;
padding-right: 2.4rem;
}
.sidebar__header-title {
@include typeTitle(true);
display: flex;
align-items: center;
}
}
.sidebar__container {
position: fixed;
top: $sidebar-header-height;
right: 0;
z-index: 1;
width: 100%;
height: calc(100% - #{$sidebar-header-height});
max-width: $sidebar-width;
background-color: $color-base-white;
transform: translate3d(100%, 0, 0);
transition: transform 0.3s;
.sidebar--left & {
left: 0;
right: auto;
transform: translate3d(-100%, 0, 0);
max-width: $sidebar-width;
}
}
.sidebar__content {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 1.6rem 1.6rem 0;
overflow: auto;
}
.sidebar__close {
padding: 1.6rem;
display: inline-block;
color: $color-base-white;
}
.sidebar.is-active {
visibility: visible;
transition: visibility 0s 0s;
.sidebar__header,
.sidebar__container {
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
}
/* Sidebar Menu
***************/
.sidebar-menu {
@include typeBody;
margin-top: 3.6rem;
}
.sidebar-menu__list {
list-style: none;
padding-left: 0;
}
.sidebar-menu__title {
display: inline-block;
padding: 0.4rem 0.8rem;
margin: 0.8rem 0;
}
.sidebar-menu__item {
margin-left: 0.8rem;
&.sidebar-menu__item--position-1 {
.sidebar-menu__title {
font-weight: bold;
}
}
&.sidebar-menu__item--position-3 {
.sidebar-menu__title {
font-weight: normal;
}
}
}
function updateDropdownPositions() {
const windowWidth = document.documentElement.clientWidth;
$(".js-dropdown")
.css("transform", "translate(0,100%)") // Reset
.each(function () {
const $thisMenu = $(this);
const xOffset = this.getBoundingClientRect().x;
const width = this.getBoundingClientRect().width;
const diff = xOffset + width - windowWidth + 16; //Add buffer
if (diff > 0) {
$thisMenu.css("transform", "translate(-" + diff + "px,100%)");
}
});
}
$(document).ready(function () {
updateDropdownPositions();
$(".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");
}
});
});
}
});
// Listen for resize events
var resizeTimeout;
window.addEventListener(
"resize",
function () {
if (resizeTimeout) {
window.cancelAnimationFrame(resizeTimeout);
}
resizeTimeout = window.requestAnimationFrame(function () {
updateDropdownPositions();
});
},
false
);
$(".js-header-logo").mouseenter(function () {
const src = $(this).find("img").attr("src");
$(this).find("img").attr("src", src);
});