<div class="container">

  <header>
    
    <div class="primary-bar user">
        <img src="https://www.kcl.ac.uk/SiteElements/Prospectus/images/user.png" class="user-image" alt="user image"/>
        <a class="menu-text">Username</a>
        <a class="button"><i class="fas fa-sign-out-alt"></i></a>
    </div>
    
    <div class="primary-bar">
      
        <a class="button"><i class="fas fa-plus-circle"></i></a>
        
        <ul class="menu">
          <li><a href="#0">One</a></li>
          <li><a href="#0">Two</a></li>
          <li><a href="#0">Three</a></li>
        </ul>

        <span class="menu-text">Site Title</span>
        <!--
        <a class="button"><i class="fas fa-globe"></i></a>
         -->
        <a class="secondary hollow button">Abbrechen</a>
        <a class="button">Speichern</a>

    </div>
    
  </header>
  
  <!-- Header End -->
  
  <div class="sidebar left">
    
    <ul class="multilevel-accordion-menu vertical menu" data-accordion-menu>
      <li>
        <div class="divider">Section 1</div>
        <a href="#">Item 1</a>
        <ul class="menu vertical sublevel-1">
          <li>
            <a href="#">Sub-item 1</a>
            <ul class="menu vertical sublevel-2">
              <li><a class="subitem" href="#">Thing 1</a></li>
              <li><a class="subitem" href="#">Thing 2</a></li>
              <li><a class="subitem" href="#">Thing 3</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Sub-item 2</a>
            <ul class="menu vertical sublevel-2">
              <li>
                <a href="#">Super-sub-item 1</a>
                <ul class="menu vertical sublevel-3">
                  <li><a class="subitem" href="#">Thing 1</a></li>
                  <li><a class="subitem" href="#">Thing 2</a></li>
                </ul>
              </li>
              <li><a class="subitem" href="#">Thing 2</a></li>
            </ul>
          </li>
          <li><a class="subitem" href="#">Thing 1</a></li>
          <li><a class="subitem" href="#">Thing 2</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Item 2</a>
        <ul class="menu vertical sublevel-1">
          <li><a class="subitem" href="#">Thing 1</a></li>
          <li><a class="subitem" href="#">Thing 2</a></li>
        </ul>
      </li>
      <li>
        <div class="divider">Section 2</div>
        <a href="#">Item 3</a>
        <ul class="menu vertical sublevel-1">
          <li><a class="subitem" href="#">Thing 1</a></li>
          <li><a class="subitem" href="#">Thing 2</a></li>
        </ul>
      </li>
      <li>
        <div class="divider">Section 3</div>
        <a href="#">Item 4</a>
        <ul class="menu vertical sublevel-1">
          <li>
            <a href="#">Sub-item 3</a>
            <ul class="menu vertical sublevel-2">
              <li><a class="subitem" href="#">Thing 1</a></li>
              <li><a class="subitem" href="#">Thing 2</a></li>
            </ul>
          </li>
          <li><a class="subitem" href="#">Thing 1</a></li>
          <li><a class="subitem" href="#">Thing 2</a></li>
        </ul>
      </li>
    </ul>
    
  </div>
  
  <!-- Sidebar End -->

  <div class="content">
   
    <div class="grid">      
      <div class="col">
        
        <ul class="multilevel-accordion-menu vertical menu" data-accordion-menu>
          <li>
            <a href="#">Item 1</a>
            <ul class="menu vertical sublevel-1">
              <li>
                <a href="#">Sub-item 1</a>
                <ul class="menu vertical sublevel-2">
                  <li><a class="subitem" href="#">Thing 1</a></li>
                  <li><a class="subitem" href="#">Thing 2</a></li>
                  <li><a class="subitem" href="#">Thing 3</a></li>
                </ul>
              </li>
              <li>
                <a href="#">Sub-item 2</a>
                <ul class="menu vertical sublevel-2">
                  <li>
                    <a href="#">Super-sub-item 1</a>
                    <ul class="menu vertical sublevel-3">
                      <li><a class="subitem" href="#">Thing 1</a></li>
                      <li><a class="subitem" href="#">Thing 2</a></li>
                    </ul>
                  </li>
                  <li><a class="subitem" href="#">Thing 2</a></li>
                </ul>
              </li>
              <li><a class="subitem" href="#">Thing 1</a></li>
              <li><a class="subitem" href="#">Thing 2</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Item 2</a>
            <ul class="menu vertical sublevel-1">
              <li><a class="subitem" href="#">Thing 1</a></li>
              <li><a class="subitem" href="#">Thing 2</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Item 3</a>
            <ul class="menu vertical sublevel-1">
              <li><a class="subitem" href="#">Thing 1</a></li>
              <li><a class="subitem" href="#">Thing 2</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Item 4</a>
            <ul class="menu vertical sublevel-1">
              <li>
                <a href="#">Sub-item 3</a>
                <ul class="menu vertical sublevel-2">
                  <li><a class="subitem" href="#">Thing 1</a></li>
                  <li><a class="subitem" href="#">Thing 2</a></li>
                </ul>
              </li>
              <li><a class="subitem" href="#">Thing 1</a></li>
              <li><a class="subitem" href="#">Thing 2</a></li>
            </ul>
          </li>
        </ul>
        
      </div>

      <div class="col">
        <table class="hover">
          <thead>
            <tr>
              <th>Pages</th>
              <th class="float-right">Options</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
              <td>
                <div class="small secondary button-group float-right">
                  <a class="button"><i class="fas fa-eye"></i></a>
                  <a class="button"><i class="fas fa-edit"></i></a>
                  <a class="button"><i class="fas fa-trash-alt"></i></a>
                </div>
              </td>
            </tr>
            <tr>
              <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
              <td>
                <div class="small secondary button-group float-right">
                  <a class="button"><i class="fas fa-eye"></i></a>
                  <a class="button"><i class="fas fa-edit"></i></a>
                  <a class="button"><i class="fas fa-trash-alt"></i></a>
                </div>
              </td>
            </tr>
            <tr>
              <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
              <td>
                <div class="small secondary button-group float-right">
                  <a class="button"><i class="fas fa-eye"></i></a>
                  <a class="button"><i class="fas fa-edit"></i></a>
                  <a class="button"><i class="fas fa-trash-alt"></i></a>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    
    <hr>
    
    <table class="hover">
          <thead>
            <tr>
              <th>User Name</th>
              <th>Full Name</th>
              <th>Online</th>
              <th class="float-right">Options</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>User Name</td>
              <td>Full Name</td>
              <td><i class="fa fa-check success"></i></td>
              <td>
                <div class="small secondary button-group float-right">
                  <a class="button"><i class="fa fa-key"></i></a>
                  <a class="button"><i class="fas fa-edit"></i></a>
                </div>
              </td>
            </tr>
            <tr>
              <td>User Name</td>
              <td>Full Name</td>
              <td><i class="fa fa-ban alert"></i></td>
              <td>
                <div class="small secondary button-group float-right">
                  <a class="button"><i class="fa fa-key"></i></a>
                  <a class="button"><i class="fas fa-edit"></i></a>
                </div>
              </td>
            </tr>
            <tr>
              <td>User Name</td>
              <td>Full Name</td>
              <td><i class="fa fa-toggle-on success"></i></td>
              <td>
                <div class="small secondary button-group float-right">
                  <a class="button"><i class="fa fa-key"></i></a>
                  <a class="button"><i class="fas fa-edit"></i></a>
                </div>
              </td>
            </tr>
            <tr>
              <td>User Name</td>
              <td>Full Name</td>
              <td><i class="fa fa-toggle-off alert"></i></td>
              <td>
                <div class="small secondary button-group float-right">
                  <a class="button"><i class="fa fa-key"></i></a>
                  <a class="button"><i class="fas fa-edit"></i></a>
                </div>
              </td>
            </tr>
            <tr>
              <td>User Name</td>
              <td>Full Name</td>
              <td><i class="fa fa-eye success"></i></td>
              <td>
                <div class="small secondary button-group float-right">
                  <a class="button"><i class="fa fa-key"></i></a>
                  <a class="button"><i class="fas fa-edit"></i></a>
                </div>
              </td>
            </tr>
            <tr>
              <td>User Name</td>
              <td>Full Name</td>
              <td><i class="fa fa-eye-slash alert"></i></td>
              <td>
                <div class="small secondary button-group float-right">
                  <a class="button"><i class="fa fa-key"></i></a>
                  <a class="button"><i class="fas fa-edit"></i></a>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
    
    <hr>
    
    <form>
      <label>Input Label
        <input type="text" placeholder=".small-12.columns" aria-describedby="exampleHelpText">
      </label>
      <p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
      <label>
        How many puppies?
        <input type="number" value="100">
      </label>
      <label>
        What books did you read over summer break?
        <textarea placeholder="None"></textarea>
      </label>
      <label>Select Menu
        <select>
          <option value="husker">Husker</option>
          <option value="starbuck">Starbuck</option>
          <option value="hotdog">Hot Dog</option>
          <option value="apollo">Apollo</option>
        </select>
      </label>
      <div class="row">
        <fieldset class="large-6 columns">
          <legend>Choose Your Favorite</legend>
          <input type="radio" name="pokemon" value="Red" id="pokemonRed" required><label for="pokemonRed">Red</label>
          <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
          <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
        </fieldset>
        <fieldset class="large-6 columns">
          <legend>Check these out</legend>
          <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
          <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
          <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
        </fieldset>
      </div>
      <div class="row">
        <div class="small-3 columns">
          <label for="middle-label" class="text-right middle">Label</label>
        </div>
        <div class="small-9 columns">
          <input type="text" id="middle-label" placeholder="Right- and middle-aligned text input">
        </div>
      </div>
      <div class="input-group">
        <span class="input-group-label">$</span>
        <input class="input-group-field" type="url">
        <div class="input-group-button">
          <input type="submit" class="button" value="Submit">
        </div>
      </div>
    </form>
    
    
    
  </div>
  <!-- Content End -->

  <footer>
    Footer
  </footer>
  
</div>

/* Variables */
/* ================================================= */

$white: #ffffff;
$highlight: #44aadd;

$sidebar-dark: #16212d;
$sidebar-middle: #223344;
$sidebar-light: #384b5f;
$sidebar-very-light: #4f6072;

$font-dark: #333333;
$font-middle: #555555;
$font-light: #777777;
$font-very-light: #999999;

$content-dark: #a5a5a5;
$content-middle: #d5d5d5;
$content-light: #e5e5e5;
$content-very-light: #f5f5f5;


$primary-color: $highlight;
$secondary-color: #767676;
$success-color: #3adb76;
$warning-color: #ffae00;
$alert-color: #cc4b37;

/* General */
/* ================================================= */

button,
.button,
.primary{
  background: $sidebar-light;
  &:hover {
    background: $highlight;
  }
}

hr {
  border: 1px solid $content-dark;
}

.primary {color: $primary-color;}
.secondary {color: $secondary-color;}
.success {color: $success-color;}
.warning {color: $warning-color;}
.alert {color: $alert-color;}

/* Layout */
/* ================================================= */

.container,
.grid,
header,
footer {
  display: grid;
  grid-template-columns: 1fr;
}

.container {
   grid-template-rows: auto 1fr auto;
   min-height: 100vh;
   grid-template-areas: 
    "head"
    "side"
    "cont"
    "foot";
}

header {
  grid-area: head;
  .primary-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0.5rem;
    background: $content-very-light;
    border-bottom: 1px solid $content-light;
    .menu,
    .button,
    span,
    a {
      align-self: stretch;
    }
    .menu {
      display: flex;
      li {
        display: flex;
        a {
          display: flex;
          align-content: center;
          align-items: center;
        }
      }
    }
    .button,
    .button-group {
      display: flex;
      align-items: center;
      margin: 0;
      flex-grow: 0;
      color: $white;
    }
    span,
    a {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .menu a:hover {
      background-color: $content-light !important;
      text-decoration: none;
    }
  }
  .user {
    background: $sidebar-middle;
    border-bottom: 1px solid $sidebar-dark;
    border-right: 1px solid $sidebar-middle;
    color: $white;
    padding: 0;
    .user-image {
      width: 3.5rem;
      flex-grow: 0;
    }
    a {
      color: $white;
      background: $sidebar-middle;
      &:hover {
        background: $sidebar-dark;
        color: $highlight;
      }
    }
  }
}

footer {
  display: none;
  grid-area: foot;
}

.content {
  padding: 1rem;
  .grid {
    grid-gap: 1rem;
  }
}

.sidebar {
  grid-area: side;
  background: $sidebar-middle;
  .vertical.menu {
    a {
      color: $white;
      &:hover {
        color: $highlight;
      }
    }
  }
}


/* Multilevel accordion menu */
/* ================================================= */

.content .multilevel-accordion-menu {
  .is-accordion-submenu-parent a {
    background: $content-very-light;
  }
  .is-accordion-submenu a {
    background: $content-light;
  }
  a {
    color: $highlight;
    &::after {
      // sets accodion arrow color and direction
      border-color: $highlight transparent transparent;
    }
  }
}

.multilevel-accordion-menu {
   li .divider {
    margin: 0;
    padding: 1rem 1rem 0.5rem 1rem;
    font-size: 0.85em;
    font-weight: bold;
    color: $font-light;
  }
  // background for main accordion items
  .is-accordion-submenu-parent a {
    background: $sidebar-middle;
  }

  // background for sub accordion items
  .is-accordion-submenu a {
    background: $sidebar-light;
    &:hover {
      background: $sidebar-light;
    }
  }

  // creates classes for nested elements, sub-item-*
  @for $i from 1 through 6 {
    .sublevel-#{$i} {
      text-indent: 0rem + $i;
    }
  }

  a {
    color: $white;
    &::after {
      // sets accodion arrow color and direction
      //border-color: $white transparent transparent;
    }
    &:hover {
      color: $highlight;
      background: $sidebar-dark;
    }
  }

  // padding for each list item
  .menu > li:not(.menu-text) > a {
    padding: 1.2rem 1rem;
  }
  
  // style for link on open menu item
  .is-accordion-submenu-parent[aria-expanded="true"] > a {
    background: $highlight;
    &:hover {
      color: $white;
    }
  }
  
  // style for folder icon on subitem anchors without a submenu
  .is-accordion-submenu-parent[aria-expanded="true"] a.subitem::before {
    content: "\f016";
    font-family: FontAwesome;
    margin-right: 1rem;
  }

  // changes folder icon to open when accordion is open
  .is-accordion-submenu-parent[aria-expanded="true"] > a {
    &::before {
      content: "\f07c";
      font-family: FontAwesome;
      margin-right: 1rem;
    }
    &::after {
      content: "\f107";
      font-family: FontAwesome;
      float: right;
    }
  }

  // changes folder icon to closed then accordion is closed
  .is-accordion-submenu-parent[aria-expanded="false"] > a {
    &::before {
      content: "\f07b";
      font-family: FontAwesome;
      margin-right: 1rem;
    }
    &::after {
      content: "\f105";
      font-family: FontAwesome;
      float: right;
    }
  }
}

.content {
  grid-area: cont;
  grid-gap: 1em;
  table {
    .button-group {
      margin: 0;
    }
  }
}

/* Tables */
/* ================================================= */




/* Media queries */
/* ================================================= */

@media screen and (min-width: 40em) {
  .container,
  .grid,
  header {
    grid-template-columns: 1fr 2fr;
  }
  .container {
    grid-template-areas: 
    "head head"
    "side cont"
    "foot foot";
  }
}

@media screen and (min-width: 60em) {
  .container,
  .grid,
  header {
    grid-template-columns: 1fr 3fr;
  }
}

$(document).foundation();