Semantic App Layout

by ethanpil

HTML

<script src="//cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css">
  <div class="ui visible left sidebar labeled icon inverted vertical menu">

    <div class="header item">
      <h2><i class="world icon" id="collapse"></i> App</h2>
    </div>
    <div class="item">
      <i class="sitemap icon"></i> Content
      <div class="menu">
        <a class="item">Pages</a>
        <a class="item">Posts</a>
        <a class="item">Products</a>
      </div>
    </div>

    <a class="item"><i class="send icon"></i> Publish</a>
    <a class="item"><i class="settings icon"></i> Settings</a>
    <a class="active item"><i class="info circle icon"></i> About</a>
  </div>


  <div id="page">
    <h1>Hi</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula leo in tellus condimentum suscipit. Integer sed ligula laoreet, auctor nibh ut, consequat risus. Maecenas sed facilisis ipsum. Nullam rhoncus at dolor sed consectetur. Aliquam
      suscipit risus vitae risus laoreet vehicula. Mauris quis velit tristique, efficitur magna in, facilisis neque. Maecenas vulputate justo nec rutrum iaculis.</p>
    <p>Nulla nec iaculis odio, vitae finibus erat. Integer nec ipsum elit. Quisque malesuada neque purus, et viverra mi sagittis eget. Curabitur lacinia dolor id felis tincidunt vestibulum. Etiam convallis accumsan erat, ac auctor felis auctor sed. Aliquam
      pellentesque sed mauris ullamcorper aliquet. Nunc vehicula elit vel mi auctor, non lobortis enim tincidunt. Donec eu lectus sem. Donec et ex quam. Nam semper blandit sapien eget ullamcorper.</p>
    <p>Quisque egestas egestas cursus. Pellentesque venenatis tempus aliquam. Phasellus augue est, pulvinar ut sodales in, hendrerit euismod nulla. Nunc elementum ornare mi, at lacinia arcu pellentesque in. Pellentesque metus sapien, feugiat vel sollicitudin
      eget, ullamcorper id nibh. Integer urna metus,...

CSS

#page {
  padding: 1em;
  margin-left: 120px;
}

.sidebar {
width: 120px;
}