Admin Webapp structure

by jorgeluis

HTML

<div id="main-container">

  <div id="announcements">
    this is an announcement
  </div>
  
  
  <div class="navbar" id="header">
  
    logo and navbar elements go here
    
  </div>
  
  
  <div id="content">
  
  
    <div id="sidebar">
      <nav id="main-nav">
        <a class="nav-item" href="#" title="Link text">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21">
            <g fill="none" fill-rule="evenodd">
              <circle cx="10.5" cy="10.5" r="10" stroke="#008BF8"/>
              <text fill="#008FFF" font-family="SFProText-Bold, SF Pro Text" font-size="18" font-weight="bold">
                <tspan x="6" y="17">?</tspan>
              </text>
            </g>
          </svg>
        </a>
      </nav>
    </div>
    
    <div id="page">
      #page
    </div>

  </div>

</div>

SCSS

html, body {
  height: 100%;
  position: relative;
}
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#main-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#announcements {
  padding: 1rem;
  background: red;
}

.navbar {
  padding: 1rem;
  background: white;
}

#content {
  display: flex;
  flex-direction: row;
  flex: 1;
}

#sidebar {
  padding: 1rem;
  width: 60px;
  background: #333;
  color: white;
  height: 100%;
  
  @media screen and (min-width: 1024px) {
    width: 180px;
  }
}

#page {
  flex: 1;
  padding: 1rem;
  background: #ddd;
  color: #333;
}

/* sidebar nav */
#main-nav {  
  > .nav-item {
    height: 28px;
    display: flex;
  }
}