pebble/devsite/source/_sass/elements/sidebar.scss

/**
 * 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;
  }
}