Sidebar basic struktur

Level 01 - 06

      

      aside // sidebar container
      ├── header
      │    ├── // logo
      │    ├── // sitetitle
      │    ╰── // short copy
      ├── nav // menu root
      │    ╰── ul // level 01
      │         ├── li
      │         │    ╰── a // simple menuitem  
      │         ├── li
      │         │    ╰── details // nested menuitem
      │         │         ├── summary
      │         │         ╰── ul // level 02
      │         │              ╰── li
      │         │                   ├── a
      │         │                   ├── // ... more items & levels
      │         │                   ╰── // max. level 06
      │         │
      │         ├── li
      │         │    ╰── a
      │         ╰── // ... more items & levels
      ╰── footer

Aside

root container 

    <!-- .gs-app-view root -->

      <aside class="sidebar gs-left-sidebar">

        <!-- header -->

        <!-- nav -->

        <!-- footer -->

      </aside>

    <!-- END .gs-app-view root -->

Header

optional

       <!-- aside root !-->

        <header>
          <figure>
            <img
              src="./fileadmin/admin/Dateikatalog/logos/FDZ-GML-landscape.svg"
              width="300"
              height="300"
              alt="Description"
            />
          </figure>
          <h3>Headline</h3>
          <p>Short copy</p>
        </header>

        <!-- nav item !-->

       <!-- END aside root !-->

Nav

Basic architecture

navigation root container 

      <!-- aside root!-->

        <nav role="navigation" aria-label="Sidebare">
          <ul role="menu">

            <!-- menuitems !-->

          </ul>
        </nav>

      <!-- END aside root!-->

Simple menuitem

         <!-- nav > ul root !-->

            <li role="presentation">
              <a role="menuitem" href="linkURL" >
                Link Description
              </a>
            </li>

         <!-- END nav > ul root !-->

Nested menuitem

       <!-- nav > ul root !-->

        <li role="group">
         <details>

           <summary>Headline / Description</summary>

           <ul role="menu">
             <li role="presentation">
               <a role="menuitem" href="#LinkDescription">
                 Link Description
               </a>
             </li>
             <!-- more menuitems simple or nested !-->
          </ul>

         <details>
        </li>

       <!-- END nav > ul root !-->

Footer

optional 

      <!-- aside root -->

         <footer>
          <h3>Headline</h3>
          <p>Short copy</p>
        </footer>

      <!-- END aside root -->