pebble/devsite/source/_sass/elements/sectionmenu.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.
 */

$section-menu-width: 240px;

.sidebar__wrapper--sectionmenu {
  width: $sidebar-width + $section-menu-width;
}

.section-menu {
  border-right: 1px solid $gray-08;
  bottom: 0;
  left: $sidebar-width;
  margin-top: $header-height;
  position: absolute;
  top: 0;
  width: $section-menu-width;
  overflow-y: auto;

  > ul {
    padding: 1em;
  }

  @include bp-max ($sidebar-hide-at) {
    display: none;
  }
}

.content--section-menu {
  margin-left: $sidebar-width + $section-menu-width;

  @include bp-max ($sidebar-hide-at) {
    margin-left: 0;
  }
}

.section-menu__header {
  height: $header-height;
  padding: 0 1em;
  position: fixed;
  top: 0;
  width: $section-menu-width;

  h3 {
    border-bottom: 1px solid rgba(68,68,68,0.2);
    font-size: $base-font-size * 1.2;
    font-weight: 400;
    margin-top: 3px;
    padding: $base-line-height / 1.2 0;
    text-transform: uppercase;
    width: 100%;
  }
}

.documentation-menu {
  background-color: $color-docs;
  border-bottom: 1px solid rgba(68, 68, 68, 0.3);
  border-right: 1px solid darken($color-docs, 10);
  box-shadow: rgba(68, 68, 68, 0.3) 0 5px 5px -5px;
  display: none;
  margin: -1em;

  a {
    display: block;
    padding: 0.5em 1em;

    &:hover {
      background-color: darken($color-docs, 5);
    }
  }
}

.documentation-menu__arrow {
  float: right;
}

.documentation-menu--visible {
  display: block;
}

.section-menu__item {

  > a {
    color: $gray-02;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    margin: $base-line-height / 4 0;
    padding: 0.5em;
  }

  > ul {
    display: none;
  }

  &.open > ul {
    display: block;
  }
}

.section-menu__subitem {

  > a {
    color: $gray-02;
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 0.25em 1em;
    text-transform: none;

    span {
      display: inline-block;
      padding: 0.5em;
    }
  }

  ul {
    display: none;
  }

  &.open ul {
    display: block;
  }
}

.section-menu__subsubitem {

  > a {
    color: $gray-02;
    display: block;
    font-size: 12px;
    font-weight: normal;
    margin: 0 0 0.25em 2em;
    text-transform: none;

    span {
      display: inline-block;
      padding: 0.5em;
    }
  }
}

.section-menu--dark {

  &,
  a,
  .section-menu__header a {
    color: $white;
  }

  .section-menu__item.active > a,
  .section-menu__subitem.active > a,
  .section-menu__subsubitem.active > a span {
    background-color: $white;
    border-radius: $base-border-radius;
    color: $gray-02;
  }
}

.section-menu--light {

  &,
  a,
  .section-menu__header a {
    color: $gray-02;
  }

  .section-menu__item.active > a,
  .section-menu__subitem.active > a,
  .section-menu__subsubitem.active > a span {
    background-color: $gray-02;
    border-radius: $base-border-radius;
    color: $white;
  }
}

.section-menu--guides {
  background-color: $color-guides;
  border-right-color: darken($color-guides, 10);

  .section-menu__header {
    background-color: $color-guides;
  }
}

.section-menu--docs {
  background-color: $color-docs;
  border-right-color: darken($color-docs, 10);

  .section-menu__header {
    background-color: $color-docs;
  }
}

.section-menu--community {
  background-color: $color-community;
  border-right-color: darken($color-community, 10);

  .section-menu__header {
    background-color: $color-community;
  }
}

.section-menu--sdk {
  background-color: $color-sdk;
  border-right-color: darken($color-sdk, 10);

  .section-menu__header {
    background-color: $color-sdk;
  }
}

.section-menu--more {
  background-color: $color-more;
  border-right-color: darken($color-more, 10);

  .section-menu__header {
    background-color: $color-more;
  }
}

.section-menu--getting-started {
  background-color: $color-getting-started;
  border-right-color: darken($color-getting-started, 10);

  .section-menu__header {
    background-color: $color-getting-started;
  }
}