A1 menu structure

A1 menu structure

by Csaba Hellinger

HTML

<div class="menu side open">
  <span class="menu-toggle">🍔</span>
  <span class="menu-logo">💬</span>
  <div class="menu-container">
    <span class="menu-items">
      <span class="menu-item">Home</span>
      <span class="menu-item">Movies</span>
      <span class="menu-item">Shows</span>
    </span>
    <span class="menu-icons">
      <span class="menu-item">🔍</span>
      <span class="menu-item">⚙️</span>
    </span>  
  </div>
</div>

<p>
Toggle the `side` and `open` classes on the menu to simulate states.
</p>

SCSS

html,
body {
  margin: 0;
  height: 100vh;
}

:root {
  --menu-height: 30px;
}

.menu {
  display: flex;
  height: var(--menu-height);
  
  .menu-toggle {
    display: none;    
  }

  .menu-logo {
    background: magenta;
    display: flex;
    align-items: center;
    padding: 0 5px;
  }

  .menu-container {
    background: orange;
    display: flex;
    flex-grow: 1;
  }

  .menu-items {
    background: lightblue;
    display: flex;
  }

  .menu-icons {
    background: lightgreen;
    margin-left: auto;
    display: flex;    
  }
  
  .menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
  }

  &.side {
    background: pink;

    .menu-toggle {
      display: flex;
      background: darkcyan;
      padding: 0 5px;
      align-items: center;
    }

    .menu-logo {
      position: absolute;
      left: 50%;
      top: 0;
      height: var(--menu-height);
      transform: translateX(-50%);
    }

    .menu-container {
      display: none;
    }
      
    &.open {
      
      .menu-container {
        display: block;
        position: absolute;
        top: var(--menu-height);
        left: 0;
        bottom: 0;
        width: 200px;
        flex-direction: column;
      }

      .menu-items {
        display: block;
      }

      .menu-icons {
        margin-left: 0;
        display: block;
      }

      .menu-item {
        display: block;
        padding: 5px 20px;
      }
    }
  }
}