Always visible sidebar example
HTML
<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<script src="https://semantic-ui.com/dist/semantic.js"></script>
<div class="flexbox">
<div class="sidebar">
<div class="ui left vertical inverted visible sidebar menu">
<a class="item">
Overview
</a>
<a class="item">
Upcoming
</a>
</div>
</div>
<div class="main">
<div class="ui container">
<div class="ui cards">
<div class="card">
<div class="content">
<div class="header">
Test
</div>
<div class="meta">
Test
</div>
</div>
<div class="extra content">
<div class="ui two buttons">
<div class="ui basic green button">Edit</div>
<div class="ui basic red button">Delete</div>
</div>
</div>
</div>
<div class="card">
<div class="content">
<div class="header">
Test
</div>
<div class="meta">
Test
</div>
</div>
<div class="extra content">
<div class="ui two buttons">
<div class="ui basic green button">Edit</div>
<div class="ui basic red button">Delete</div>
</div>
</div>
</div>
<div class="card">
<div class="content">
<div class="header">
Test
</div>
<div class="meta">
Test
</div>
</div>
<div class="extra content">
<div class="ui two buttons">
<div class="ui basic green button">Edit</div>
<div class="ui basic red button">Delete</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.flexbox {
display: flex;
}
.sidebar {
flex: 0 0 auto;
width: 260px;
}
.main {
flex: 1 1 auto;
}
.ui.container {
margin-left: 3em !important;
margin-right: 3em !important;
width: auto !important;
max-width: 960px !important;
}
JavaScript
// Add javascript here