data8/_sass/components/_components.textbook.scss

/**
 * The website contains two main components: the sidebar and the textbook page.
 * This file specifies the layout and includes classes to show/hide the sidebar
 * on small screens.
 *
 * The actual styling for the sidebar and page are located in their respective
 * component SCSS files. This file manages the layout and width only.
 *
 * By default, the sidebar is not visible.
 *
 * [1]: The entire page is positioned relative so that when the page overflows
 *   (e.g. sidebar open on small screens) the user can't scroll left/right.
 * [2]: The sidebar and the textbook page are positioned absolute so that we
 *   can use translate() on the textbook page to reveal the sidebar.
 * [3]: Setting the background color hides the sidebar when it's behind the
 *   page (otherwise the page is transparent).
 *
 * When the sidebar is visible:
 *
 * [4]: Shift the textbook page over to the left. On small screens, the page
 *   will overflow since the sidebar takes up most of the screen.
 * [5]: On larger screens, the page and sidebar have enough room to read them
 *   simultaneously, so make sure that the page doesn't overflow.
 */

$left-sidebar-width: 300px;
$textbook-page-max-width: 950px;
$right-sidebar-width: 220px;
$topbar-height: 60px;

.c-textbook {
  /* [1] */
  position: relative;
  height: 100vh;
  overflow: hidden;
  margin: 0 0 0 auto;
}

.c-topbar {
  background-color: $book-background-color;
  position: fixed;
  top: 0;
  height: $topbar-height;
  width: 100%;
  left: 0;
  padding: $spacing-unit-small $spacing-unit-small 0 $spacing-unit-med * 2;
  z-index: 1;
  transition: top 250ms, transform 250ms ease; // For animations
}

@include mq($until: tablet) {
  .c-topbar.hidetop {
    // At desktop, we stop hiding the navbar
    top: -250px;
  }
}

.c-textbook__sidebar,
.c-textbook__page {
  /* [2] */
  height: 100vh;
  overflow: auto;
  position: fixed;
  background-color: $book-background-color;; /* [3] */
}

.c-textbook__sidebar {
  width: $left-sidebar-width;
  top: 0;
  left: 0;
}

.c-textbook__page {

  width: $textbook-page-width;
  transition: transform 250ms ease;
  left: 0;
  padding: 0 $spacing-unit $spacing-unit-small $spacing-unit-small * 3;
  overflow-x: visible;

  @include mq($from: laptop) {
    // At desktop, we show the right TOC
    padding-right: calc(100% - #{$left-sidebar-width} - #{$textbook-page-max-width});
  }

  &:focus {
    /* [2] */
    outline: none;
  }
}

.sidebar__right {
  // By default we hide the sidebar
  display: none;

  // Spacing for the sidebar
  width: $right-sidebar-width - $spacing-unit-small; // To account for the small margin on the right
  position: relative;
  float: right;
  z-index: 1; // Keep sidebar under page content

  @include mq($from: tablet) {
    // Show right TOC at laptop size
    display: block;
  }
}

.js-show-sidebar {
  .c-textbook__page, .c-topbar {
    /* [4] */
    transform: translate($left-sidebar-width, 0);

    @include mq($from: tablet) {
      /* [5] */
      width: calc(100% - #{$left-sidebar-width});
    }
  }
}

.c-textbook__content {
  clear: both;
  padding-top: $topbar-height * 1.5;
  width: 95%;
}

.c-page__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
}

// Make sure that the bottom content has the same width as non-sidebar content
.footer, .c-page__nav {
  @include mq($from: laptop) {
    width: $textbook-page-with-sidebar-width;
  }
}

// Scrollbar width
::-webkit-scrollbar {
  width: 5px;
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
}

main, nav {
  scrollbar-width: thin;
}