/**
 * Main sidebar for the page.
 *
 * This component comprises the main part of the UI shell controlling the
 * layout of page sidebars and their inclusion in mobile mode's hamburger
 * menu.
 */
@import (reference) "rb/css/pages/base.less";


#rb-ns-ui() {
  .page-sidebar() {
    @border-width: 1px;
    @default-width: 21em;
    @padding-top: 3em;
    @padding-right: 1em;
    @padding-left: 1em;
    @padding-bottom: 0;
    @padding: @padding-top @padding-right @padding-bottom @padding-left;
    @pane-transition-time: 0.2s;

    /**
     * Set the width of the sidebar for the current page in desktop mode.
     *
     * Args:
     *     @width (units):
     *         The width of the sidebar.
     */
    .set-width(@width) {
      #rb-ns-pages.base.on-shell-desktop-mode({
        /*
         * This may be called as a top-level rule, or as part of a CSS class
         * on ``<body>``. Support both.
         */
        &,
        body {
          &.-has-sidebar #content {
            margin-left: @width;
          }
        }

        .rb-c-page-sidebar {
          width: @width;
        }
      });
    }

    /**
     * Put the page sidebar in connected mode.
     *
     * This will make the active sidebar entry appear to be connected to a
     * box in the main content area (or to the page content area itself in
     * the mobile mode).
     */
    .set-connected() {
      #rb-ns-ui.sidebars.set-display-style(connected-right);

      .rb-c-page-sidebar__pane {
        padding-right: 0;
      }
    }

    .mobile-menu() {
      @width: 300px;
      @padding: 0.5em;
      @header-height: 50px;
      @footer-height: 50px;
    }
  }
}


/**
 * The main sidebar and mobile navigation menu shown on a page.
 *
 * This houses one or more sidebar panes, which may be shown on the page
 * in desktop mode (if ``<body>`` has the ``-has-sidebar`` CSS modifier
 * class applied) or when in mobile mode. Only one pane should be shown at
 * a time.
 *
 * When ``<body>`` has the ``-is-content-full-page`` CSS modifier class
 * applied, the main page sidebar will be scrollable. This is managed in
 * :file:`css/pages/base.less`.
 *
 * The page sidebar can transition between a desktop mode (where the sidebar
 * is shown on the left-hand side of the page) and a mobile mode (where it
 * comprises the entirety of the hamburger menu). Some of the elements used in
 * this component are specific to the mobile mode, and are hidden in desktop
 * mode.
 *
 * Modifiers:
 *     -is-connected:
 *         Whether the sidebar items are connected directly to a content box
 *         on the right. This will provide a visual indicator associating the
 *         active sidebar entry with the content.
 *
 * Structure:
 *     <div class="rb-c-page-sidebar">
 *      <header class="rb-c-page-sidebar__mobile-header">...</header>
 *      <div class="rb-c-page-sidebar__panes">...</div>
 *      <footer class="rb-c-page-sidebar__mobile-footer">...</footer>
 *     </div>
 */
.rb-c-page-sidebar {
  @_mobile-menu-vars: #rb-ns-ui.page-sidebar.mobile-menu();
  @_mobile-sidebar-vars: #rb-ns-ui.sidebars.mobile();
  @_page-sidebar-vars: #rb-ns-ui.page-sidebar();
  @_border-width: @_page-sidebar-vars[@border-width];

  box-sizing: border-box;
  position: absolute;
  transition: @_mobile-sidebar-vars[@animation];
  z-index: @z-index-deco;

  #rb-ns-pages.base.on-shell-mobile-mode({
    @_mobile-menu-width: @_mobile-menu-vars[@width];

    /* Note: Colors here are going to be set by the theme. */
    box-sizing: border-box;
    border: 0;
    border-right: @_border-width transparent solid;
    top: 0;
    left: -@_mobile-menu-width;
    height: 100%;
    width: @_mobile-menu-width;

    #rb-ns-ui.page-sidebar.set-connected();
  }, @else: {
    margin: 0 0 @page-container-padding @_border-width;

    &.-is-connected {
      #rb-ns-ui.page-sidebar.set-connected();
    }
  });

  /**
   * Footer shown at the bottom of the mobile menu.
   *
   * Structure:
   *     <footer class="rb-c-page-sidebar__mobile-footer">
   *      <ul>
   *       <li><a href="...">...</a></li>
   *      </ul>
   *     </footer>
   */
  &__mobile-footer {
    font-size: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;

    #rb-ns-pages.base.on-shell-mobile-mode({
      display: flex;
      justify-content: space-evenly;
    }, @else: {
      display: none;
    });

    li {
      display: inline-block;
      font-size: 12px;
      text-align: center;

      a {
        box-sizing: border-box;
        color: inherit;
        display: block;
        height: 100%;
        padding: 1em;
      }
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
  }

  /**
   * Header shown at the top of the mobile menu.
   *
   * Structure:
   *     <header class="rb-c-page-sidebar__mobile-header">
   *      <img class="djblets-o-avatar" ...>
   *      <span class="rb-c-page-sidebar__mobile-username">...</span>
   *      <ul class="rb-c-page-sidebar__mobile-user-actions">
   *       <li>...</li>
   *      </ul>
   *     </header>
   */
  &__mobile-header {
    @icon-size: 18px;

    font-size: 120%;
    height: @_mobile-menu-vars[@header-height];
    overflow: hidden;
    padding: 5px;
    white-space: nowrap;
    vertical-align: middle;

    #rb-ns-pages.base.on-shell-mobile-mode({
      display: block;
    }, @else: {
      display: none;
    });

    .djblets-o-avatar {
      display: inline-block;
      vertical-align: middle;
    }

    /**
     * A list of account-related actions the user can perform.
     *
     * This will be shown alongside the avatar and username (or below it if
     * the username is too long).
     *
     * Structure:
     *     <ul class="rb-c-page-sidebar__mobile-user-actions">
     *      <li>...</li>
     *     </ul>
     */
    .rb-c-page-sidebar__mobile-user-actions {
      float: right;
      font-size: 10px;
      line-height: inherit;
      list-style: none;
      margin: 4px 8px 0 0;
      padding: 0;
      white-space: nowrap;

      li {
        display: inline-block;
        margin: 0 0 0 2em;
        padding: 4px 0;
        text-align: center;

        a {
          color: inherit;
        }

        span {
          line-height: inherit;
        }

        .fa {
          font-size: @icon-size;
          vertical-align: middle;
        }
      }
    }
  }

  /**
   * The current user's username.
   *
   * Structure:
   *     <span class="rb-c-page-sidebar__mobile-username">...</span>
   */
  &__mobile-username {
    vertical-align: middle;
  }

  /**
   * A collection of panes in the sidebar.
   *
   * This is used primarily for pane placement and lookup purposes, and does
   * not include any styling.
   *
   * Structure:
   *     <div class="rb-c-page-sidebar__panes">
   *      <div class="rb-c-page-sidebar__pane">...</div>
   *      ...
   *     </div>
   */
  &__panes {
  }

  /**
   * A layered pane in the sidebar.
   *
   * Panes can scroll if there's too much content to display (and the page is
   * set up to constrain the height of ``.rb-c-page-sidebar``). The outer pane
   * handles the scrolling and basic state, and the
   * ``.rb-c-page-sidebar__pane-content` child element contains any content to
   * show in the pane.
   *
   * Panes can be shown or hidden. Only one pane should be shown at a time. By
   * default, transitioning that state will result in a fade-in/out effect,
   * though specialized panes can provide their own transition effect.
   *
   * Modifiers:
   *     -is-shown:
   *         The pane is currently shown on the screen.
   *
   * Structure:
   *     <div class="rb-c-page-sidebar__pane -is-shown">
   *      <div class="rb-c-page-sidebar__pane-content">
   *       ...
   *      </div>
   *     </div>
   */
  &__pane {
    box-sizing: border-box;
    opacity: 0;
    transition: @_page-sidebar-vars[@pane-transition-time] linear opacity,
                @_page-sidebar-vars[@pane-transition-time] linear visibility;
    visibility: hidden;

    #rb-ns-pages.base.on-shell-mobile-mode({
      position: absolute;
      top: @_mobile-menu-vars[@header-height];
      bottom: @_mobile-menu-vars[@footer-height];
      left: 0;
      right: -@_border-width;
    }, @else: {
      direction: rtl;  /* Position the scrollbar on the left. */
      padding: @_page-sidebar-vars[@padding];

      .rb-c-page-sidebar__pane-content {
        direction: ltr;  /* Restore the default direction of the content. */
      }
    });

    &.-is-shown {
      opacity: 1;
      visibility: visible;
    }
  }

  /**
   * Content shown in a sidebar pane.
   *
   * This is generally going to have a ``.rb-c-sidebar`` component inside of
   * it, but can display any form of content appropriate for the page.
   *
   * Structure:
   *     <div class="rb-c-page-sidebar__pane-content">
   *      ...
   *     </div>
   */
  &__pane-content {
    #rb-ns-pages.base.on-shell-mobile-mode({
      .rb-c-sidebar {
        /*
         * Give the sidebar some breathing room so it's not overlapping the
         * top or bottom set of links in the mobile sidebar.
         */
        @_padding: @_mobile-menu-vars[@padding];
        padding: @_padding 0 @_padding @_padding;
        width: 100%;

        /*
         * We might have a nested deprecated sidebar element. Fix its styling
         * here so that it may properly fit within the page.
         */
        #page_sidebar {
          position: relative;
          margin: 0;
        }
      }
    }, @else: {
      .rb-c-sidebar {
        position: relative;
      }
    });
  }
}

#rb-ns-pages.base.on-full-page-content-mode({
  /*
   * Make sure the sidebar is scrollable in order to allow the user to
   * access any parts of it.
   */
  .rb-c-page-sidebar__pane {
    .scrollable-y();
  }
});

#rb-ns-pages.base.on-shell-mobile-mode({
  /* On mobile, the sidebar must always be scrollable. */
  .rb-c-page-sidebar__pane {
    .scrollable-y();
  }
});


/* Set a default width for the sidebar. */
#rb-ns-ui.page-sidebar.set-width(
  @width: #rb-ns-ui.page-sidebar[@default-width]);
