design.stjude.cloud

Omnibar 

<header style="margin-top: -40px;">
    <div class="sjc-omnibar">
        <nav class="navbar">
            <a class="navbar-brand" href="https://stjude.cloud">
                <span class="logo"></span>
            </a>
            <a class="sjc-title" href="https://stjude.cloud">St. Jude Cloud</a>
            <span class="portal-title">
                App
            </span>

            <ul class="nav global-icons">
                <li class="nav-item user-dropdown dropdown">
                    <a class="nav-link dropdown-toggle profile-dropdown-toggle" href="" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="User Info">
                        <span class="user-icon"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right profile-dropdown-menu" aria-labelledby="profile-dropdown-toggle">
                        <ul class="list-unstyled">
                            <li>
                                <a class="dropdown-item" href="">
                                    Sign In
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="">
                                    Create Account
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="nav-item dropdown mega-dropdown">
                    <a class="nav-link dropdown-toggle mega-dropdown-toggle" href="" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="St. Jude Cloud Mega Menu">
                        <div class="nav-menu-icon"></div>
                    </a>
                    <div class="dropdown-menu mega-dropdown-menu" aria-labelledby="mega-dropdown-toggle" id="dropdown-main">
                        <div class="container mega-menu-container">
                            <div class="row">
                                <div class="col-md-3 order-md-2 mega-dropdown-col">
                                    <div class="mega-menu-title">
                                        Research Domains
                                    </div>
                                    <ul class="list-unstyled">
                                        <li>
                                            <a href="https://stjude.cloud/research-domains/pediatric-cancer">Pediatric Cancer</a>
                                        </li>
                                        <li>
                                            <a href="https://stjude.cloud/research-domains/cancer-survivorship">Cancer Survivorship</a>
                                        </li>
                                        <li>
                                            <a href="https://stjude.cloud/research-domains/non-cancerous-diseases">Non-cancerous Diseases</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-md-3 order-md-3 mega-dropdown-col">
                                    <div class="mega-menu-title">
                                        Apps
                                    </div>
                                    <ul class="list-unstyled">
                                        <li>
                                            <a href="https://platform.stjude.cloud" class="app-title">
                                                <img class="app-title__icon" src="../../assets/images/icon-genomics-platform.png" alt="Genomics Platform Icon" />
                                                <span>
                                                    Genomics Platform
                                                    <div class="genomics-platform-subtext">Data &amp; Tools</div>
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://models.stjude.cloud" class="app-title">
                                                <img class="app-title__icon" src="../../assets/images/icon-model-systems.png" alt="Model Systems Icon" />
                                                <span>
                                                    Model Systems
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://pecan.stjude.cloud/" class="app-title">
                                                <img class="app-title__icon" src="../../assets/images/icon-pecan.png" alt="PeCan Icon" />
                                                <span>
                                                    PeCan
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://viz.stjude.cloud" class="app-title">
                                                <img class="app-title__icon" src="../../assets/images/icon-viz.png" alt="Visualization Community Icon" />
                                                <span>
                                                    Visualization Community
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://stjude.cloud/apps" class="text-primary">
                                                View All Apps
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-md-3 order-md-1 mega-dropdown-col d-flex">
                                    <div class="featured-study">
                                        <a href="https://stjude.cloud/studies/clinical-genomics">
                                            <img class="featured-study__image" src="../../assets/images/featured-study.jpg" alt="Featured Study Image" />
                                        </a>
                                        <div>
                                            <div class="featured-study__title">Featured Study</div>
                                            <ul class="list-unstyled">
                                                <li>
                                                    <a href="https://stjude.cloud/studies/clinical-genomics">
                                                        Real-time Clinical Genomics
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="https://stjude.cloud/studies" class="text-primary">
                                                        View All Studies
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 order-md-4 mega-dropdown-col">
                                    <div class="mega-menu-title">
                                        Support
                                    </div>
                                    <ul class="list-unstyled">
                                        <li>
                                            <a href="https://university.stjude.cloud/docs/" target="_blank" rel="noopener noreferrer">Help Guides</a>
                                        </li>
                                        <li>
                                            <a href="https://university.stjude.cloud/docs/faq/" target="_blank" rel="noopener noreferrer">FAQs</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
    </div>

    <nav class="navbar navbar-expand-md sjc-subnav">
        <div class="sub-menu-text">
            Sub Menu
        </div>
        <a class="navbar-toggler collapsed" role="button" data-toggle="collapse" data-target="#sj-subnav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <div class="nav-menu-icon bg-secondary"></div>
        </a>

        <div class="collapse navbar-collapse" id="sj-subnav">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="">Link 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Link 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Link 3</a>
                </li>
            </ul>
        </div>
    </nav>
</header>
  • Content: 
    import Omnibar from "@stjudecloud/ui-react/lib/Navbar";
export default Omnibar;
  • URL: /components/raw/omnibar/omnibar.react.js
  • Filesystem Path: components/omnibar/omnibar.react.js
  • Size: 79 Bytes
  • Content: 
    /* Omnibar - Global Top Bar */

.sjc-omnibar {

  .navbar {
    flex-wrap: unset !important; // stylelint-disable declaration-no-important
    height: 65px;
    padding: 0.5rem;
    line-height: 1rem;
    background-color: $primary;
  }

  .login-btn {
    padding: 0.25rem 1rem;
    font-size: 14px;
    line-height: 14px;

    &:hover {
      color: $white;

      /* stylelint-disable-next-line scss/at-function-named-arguments */
      background-color: scale-color($primary, $lightness: 20%);
    }
  }

  .global-icons .nav-link {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-left: 0.5rem;
    color: $white;
    text-align: center;


    > * {
      margin: auto;
    }
  }

  .global-icons {
    flex-wrap: unset !important;
    justify-content: center;
    margin-right: 10px;
  }

  .profile-dropdown-toggle:hover,
  .mega-dropdown-toggle:hover {
    opacity: 0.85;
  }

  .dropdown.show > .nav-link {
    text-align: center;
    background-color: lighten($primary, 10%);
    border-radius: 5px;
  }

  .logo {
    display: inline-block;
    padding: 20px 30px;
    color: $white;
    background-image: url('#{$stjude-images-path}/stjude-logo-child.svg');
    background-position: 0 3px;
    background-repeat: no-repeat;
    background-size: 55px;
    border-color: #99C4F4;
    border-right: 1px solid;
  }

  .logo img {
    width: auto;
    height: 40px;
    padding: 0;
    border: none;
  }

  .portal-title {
    display: inline-block;
    padding-left: 8px;
    margin-right: auto;
    overflow: hidden;
    font-size: 20px;
    font-weight: 200;
    line-height: 1.75rem;
    color: lighten($primary, 30%);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-icon {
    padding: 10px;
    background-image: url('#{$stjude-images-path}/user-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
  }

  .dropdown-menu {
    font-size: 1rem;
    line-height: 1.25rem;
    color: $blue-dark;
    background: #F4F8FC;
    border-top: none;
    border-radius: 0;
    box-shadow: $box-shadow-sm;

    li {
      display: flex;
      align-items: center;
      height: 40px;
    }
  }

  .dropdown-menu a,
  .dropdown-item {
    color: $blue-dark;

    &:focus,
    &:hover {
      color: $blue-dark;
      text-decoration: underline;
    }
  }

  .profile-dropdown-menu {
    top: 50.4px;
  }

  .profile-dropdown-menu,
  .mega-dropdown-menu {
    display: block;
    overflow: hidden;
    transition: transform 0.25s ease-in-out;
    transform: scaleY(0);
    transform-origin: top;
  }

  .show .profile-dropdown-menu,
  .show .mega-dropdown-menu {
    transform: scaleY(1);
  }

  .profile-dropdown-menu > ul,
  .mega-menu-container {
    transition: transform 0.25s ease-in-out;
    transform: translateY(calc(-100% - 65px));
  }

  .mega-menu-container {
    padding: 1.5rem 0;
  }

  .show .profile-dropdown-menu > ul,
  .show .mega-menu-container {
    transform: translateY(0);
  }

  .mega-dropdown {
    position: static;
  }

  .mega-dropdown-menu {
    width: 100%;
    margin-top: 0;
    position: absolute;
    left: 0;
    top: 65px;
  }

  .mega-dropdown-col {
    padding: 1rem 3.5rem;
  }

  .mega-menu-title,
  .featured-study__title {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: $blue-dark;
    text-transform: uppercase;
  }

  .featured-study__image {
    width: 100%;
    max-width: 14rem;
    margin-bottom: 0.75rem;
  }

  .app-title {
    display: flex;
    align-items: center;
  }

  .app-title__icon {
    width: 30px;
    height: 30px;
    margin-right: 0.75rem;
  }

  .genomics-platform-subtext {
    font-size: 12px;
  }

  /* Media Query Overrides ****************************************/

  @include media-breakpoint-down(sm) {

    .featured-study__image {
      display: none;
    }
  }

  @include media-breakpoint-only(sm) {

    .mega-dropdown-col {
      padding: 1rem;
    }
  }

  @include media-breakpoint-down(md) {

    .sjc-title {
      display: none;
    }
  }

  @include media-breakpoint-only(md) {

    .mega-dropdown-menu {
      font-size: 0.75rem;
      line-height: 0.9375rem;
    }

    .mega-dropdown-col {
      padding: 0.75rem;
    }

    .mega-dropdown-col li {
      height: 30px;
    }

    .mega-dropdown-col:last-child {
      padding-left: 1.125rem;
    }

    .app-icon {
      width: 30px;
      height: 22.5px;
    }

    .sjcgp-subtext {
      font-size: 9px;
    }
  }

  @include media-breakpoint-up(md) {

    .mega-dropdown-col:last-child {
      padding-left: 1.5rem;
      border-left: 1px solid #B3B3B3;
    }

    .featured-study {
      padding: 1.125rem 1rem;
      background-color: $white;
    }
  }

  @include media-breakpoint-up(lg) {

    .mega-dropdown-col {
      padding: 1rem;
    }
  }
}

.nav-menu-icon {

  .navbar-toggler &,
  .dropdown & {
    width: 1.25rem;
    height: 3px;
    content: '';
    background-color: $white;
    border-radius: 5rem;

    &:before,
    &:after {
      position: relative;
      display: block;
      width: 1.25rem;
      height: 3px;
      content: '';
      background-color: $white;
      border-radius: 5rem;
    }
  }

  .navbar-toggler &.bg-secondary {
    background-color: $secondary;

    &:before,
    &:after {
      background-color: $secondary;
    }
  }

  .navbar-toggler.collapsed &,
  .dropdown & {
    transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);

    &:before {
      top: -7px;
      transition: top 0.1s ease-in 0.25s;
    }

    &:after {
      bottom: -4px;
      transition: bottom 0.1s ease-in 0.25s, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

  }

  .navbar-toggler:not( .collapsed ) &,
  .dropdown.show & {
    transition: transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
    transform: rotate(225deg);

    &:before {
      top: 0;
      transition: top 0.1s ease-out;
    }

    &:after {
      bottom: 3px;
      transition: bottom 0.1s ease-out, transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
      transform: rotate(-90deg);
    }
  }
}

.sjc-subnav {
  font-size: 1rem;
  line-height: 1.5rem;
  background-color: $white;
  border-bottom: rgba(0, 0, 0, 0.15) 1px solid;
  padding-left: 1rem;
  padding-right: 1rem;

  .navbar-toggler {
    padding: 0.25rem 0.65rem;
  }

  .dropdown-menu {
    border-radius: 0;
  }

  .dropdown-item,
  .nav-link {
    font-size: 1rem;
    color: $blue-dark;

    &:hover {
      color: $blue-dark;
    }
  }

  .sub-menu-text {
    margin-left: auto;
  }

  @include media-breakpoint-down(sm) {

    .dropdown-menu {
      border: 0;
    }

    .dropdown-item:hover {
      background-color: unset;
    }
  }

  @include media-breakpoint-up(md) {

    .sub-menu-text {
      display: none;
    }

    .dropdown-menu {
      top: 117%;
    }

    .nav-link {

      &:after {
        display: block;
        content: '';
        border-bottom: solid 2px $blue-dark;
        transition: transform 0.25s ease-in-out;
        transform: scaleX(0);
      }

      &:hover:after {
        transform: scaleX(1);
      }
    }

    .nav-item.show .nav-link:after {
      transform: scaleX(1);
    }
  }
}
  • URL: /components/raw/omnibar/omnibar.scss
  • Filesystem Path: components/omnibar/omnibar.scss
  • Size: 7.2 KB

Omnibar

The Omnibar is St. Jude Cloud’s primary navigation. It is used on every app or site, always at the top of each view.