Simple layout with Semantic UI - css

Question

I want to make a simple layout in semantic UI i am new to it, i struggled to make thing work correctly attached is the design :
what you see is the mobile layout. Requirement : The header is fixed, the sidebar is fixed when we scroll through the blog content. We have a simple inverted L shaped, the only moving part is the content.
What is the minimum code to do this in a clean way?

Answer 1

After a few tweak i managed to get this layout
here is the CSS code :
`
/* custom css by me*/
.lateral {
height: 70px;
border-bottom: 1px solid #fff;
margin-left: -1em;
margin-right: -1em;
color: #fff; }
.lateral-item {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding-left: 14px !important; }
.menu-item {
padding-top: 15px !important;
padding-bottom: 0px !important; }
.text-container {
margin-top: 90px !important; }
.lateral-sidebar {
border: 1px solid #FFFFFF;
background-color: #00A42F;
padding-right: 0px !important; }
.custom-green {
background-color: #00A42F !important; }
/* pointer */
.ui.vertical.pointing.menu .item:after {
position: absolute;
top: 50%;
right: 0%;
bottom: auto;
left: auto;
-webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(50%) translateY(-50%) rotate(45deg);
transform: translateX(50%) translateY(-50%) rotate(45deg);
margin: 0em -0.5px 0em 0em;
border: none;
border-top: 1px solid #fff;
border-right: 1px solid #fff; }
.ui.inverted.menu .item:before {
background: rgba(255, 255, 255, 0) none repeat scroll 0 0; }
`
And the HTML Code
`
<div class="ui menu inverted custom-green" style="width: 100%;border:none">
<div class="item custom-green" style="width: 100px;" >
<img class="ui mini image circular centered" src="photo.jpg" />
</div>
<div style="width:100%">
<div>
<div class="ui menu custom-green" style="border: none;box-shadow:none">
<span href="#" class="item">Name</span>
<div class="right menu" style="border: none;box-shadow:none">
Disconnect
</div>
</div>
</div>
<div>
<div class="ui menu custom-green" style="border:none;">
<span style="border:none" href="#" class="item">Page Title</span>
</div>
</div>
</div>
</div>
</div>
`
this is done with Semantic UI, i am not sure if the code is minimal but i needed to override the original css rules.