Skip to content
JavaScript Reference

_sidebar.scss

Sidebar für Subnavigationen links oder typische <aside>-Inhalte rechts

Für ein Sidebar-Layout müssen einige Styles zurückgesetzt bzw. neu angepasst werden. Seiten mit Sidebar bekommen ein eigenes Seitenlayout mit folgenden Klassen:

  • .sidebar, damit werden Styles zurückgesetzt
  • eine Klasse für die Gestaltung des <main>-Bereichs, z.B. .sidebar-left-grid für eine Sidebar links mit Grid-Layout
Section titled “.sidebar”
  • @include wrapper-inside wird von .mod_article .inside nach main .inside verschoben
  • padding-block wird von .mod_article als margin-blocknach main .inside verschoben
  • .mod_article rückt ins Grid-Layout, daher wird kein margin oder padding auf .inside mehr benötigt
  • padding-block-start beim ersten .mod_article entfällt ebenso
_sidebar.scss
body#top.sidebar {
  main > .inside {
    margin-block: $content-element-padding-block;
    @include wrapper-inside;


    .mod_article {
      .inside {
        margin-inline: unset;
        --padding: 0;
      }
      &:first-of-type {
        padding-block-start: unset;
      }
    }
  }
}

<main>-Bereich

Section titled “<main>-Bereich”

Eine Sidebar links mit Breadcrumb- und Submenü mit Grid-Layout könnte z.B. so aussehen:

_sidebar.scss
body#top.sidebar-left-grid {
  main > .inside {
    display: grid;
    grid-template-columns: 16% 80%;
    grid-column-gap: 4%;
    .mod_breadcrumb {
      grid-column: 1/3;
      ul {
        margin-block: 0 3rem;
      }
    }
    .nav_sub {
      grid-column: 1/2;
    }
    .mod_article {
      grid-column: 2/3;
    }


    @media screen and (max-width: $tweakpoint-tablet) {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-column-gap: unset;
      grid-row-gap: 1rem;
      .mod_breadcrumb {
        ul {
          margin-block: 0 1rem;
        }
      }
      .nav_sub {
        display: none;
      }
      .mod_article {
        grid-column: 1/2;
      }
    }
  }
}