/** * Copyright 2025 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ $sidebar-width: 105px; $sidebar--wide-width: $header-logo-width; $sidebar-hide-at: xs; .sidebar__wrapper { position: fixed; width: $sidebar-width; top: 0; bottom: 0; left: 0; z-index: 10; @include bp-max ($sidebar-hide-at) { display: none; } } .sidebar { background-color: #f6f6f6; bottom: 0; left: 0; padding-top: $header-height; position: absolute; top: 0; width: $sidebar-width; @include bp-max ($sidebar-hide-at) { display: none; } } .sidebar--wide { width: $sidebar--wide-width; } .sidebar__header { background-color: #222; border-bottom: 2px solid $black; color: $white; font-size: $base-font-size * 1.2; height: $header-height; left: 0; padding: $base-line-height / 1.2 0; position: absolute; text-align: center; top: 0; width: $sidebar-width; &:hover { background-color: $black; color: $white; } span { display: inline-block; } li ul { display: none; } li.active { ul { display: block; } > a { background-color: lighten($base-link-color, 30); color: #fff; } } } .sidebar--wide .sidebar__header { width: $sidebar--wide-width; } .content { margin-left: $sidebar-width; height: 100%; @include bp-max ($sidebar-hide-at) { margin-left: 0; } } .content--narrow { margin-left: $sidebar--wide-width; @include bp-max ($sidebar-hide-at) { margin: 0; } } .sidebar__legal { position: absolute; left: 0; right: 0; bottom: 3 * $base-line-height; font-size: 0.85em; padding: 1em 0; text-align: center; a { color: $gray-03; &:hover { text-decoration: underline; } } } .sidebar__footer { background-color: $color-appstore; border-right: 1px solid darken($color-appstore, 10); bottom: 0; color: $white; font-weight: bold; height: 3 * $base-line-height; left: 0; padding: $base-line-height 0; position: absolute; right: 0; text-align: center; text-transform: uppercase; &:hover, &.active { background-color: darken($color-appstore, 10); border-color: darken($color-appstore, 20); color: $white; } } .sidebar--narrow { .mainmenu__item { span { background-color: #444; border-radius: $base-border-radius; color: $white; display: none; left: 80px; margin-top: -1.2em; padding: 0.5em; position: absolute; top: 50%; white-space: nowrap; z-index: 100; } &:hover { span { display: block; } } } } .mainmenu { border-right: 1px solid $gray-08; height: 100%; // I would like to enable scrolling on the Y axis but it breaks the tooltips. // overflow-x: visible; // overflow-y: scroll; padding-top: 1em; li:first-child { margin-top: -13px; } .mainmenu__item a { background-position: center center; background-repeat: no-repeat; background-size: 3em; color: $gray-02; display: block; font-size: 13px; font-weight: bold; height: 4em; margin: 0.5em 0; padding: 1.2em; position: relative; text-transform: uppercase; @media screen and ( max-height: 640px ){ margin: 0; } &:hover { background-color: #e3e3e3; } @media screen and (max-height: 600px) { background-size: 2.5em; height: 3em; padding: 0.75em; } } .mainmenu__item.active a { background-color: #e3e3e3; } .mainmenu__item--overview a { background-image: url('../images/menu/overview.svg'); } .mainmenu__item--getting-started a { background-image: url('../images/menu/getting-started.svg'); } .mainmenu__item--guides a { background-image: url('../images/menu/guides.svg'); } .mainmenu__item--docs a { background-image: url('../images/menu/docs.svg'); } .mainmenu__item--community a { background-image: url('../images/menu/community.svg'); } .mainmenu__item--sdk a { background-image: url('../images/menu/sdk.svg'); } .mainmenu__item--blog a { background-image: url('../images/menu/blog.svg'); } .mainmenu__item--examples a { background-image: url('../images/menu/examples.svg'); } .mainmenu__item--more a { background-image: url('../images/menu/more.svg'); } } .sidebar--wide .mainmenu__item a { background-position: 1em center; background-size: 3em; padding-left: 5em; @media screen and (max-height: 600px) { background-size: 2.5em; padding-left: 4.5em; } }