Upage

by Ivin Raj S

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<body>
    <main>
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
         <nav>
              <div class="nav-wrapper light-blue lighten-1">
                <ul id="nav-mobile" class="full side-nav">
                               
                    <li><a href="#">John Daglas</a>
                      <ul class="collection">
                        <li class="collection-item avatar">
                          <img src="http://globe-views.com/dcim/dreams/dog/dog-05.jpg" alt="" class="circle">
                          <span class="title">Title</span>
                          <p>First Line <br>
                             Second Line
                          </p>
                        </li>
                      </ul>
                    </li>
                <li><a href="#">Follower analysis</a></li>
                <li><a href="#">Tweet analysis</a></li>
                <li><a href="#">Retweet analysis</a></li>
                <li><a href="#">Tweet analysis</a></li>
                </ul>

                <!-- Include this line below -->
                <a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
                <!-- End -->

              </div>
        </nav>
<div class="row scrollspy grey lighten-4">
    <div class="container">
        <div class="row">
                <div class="col s2 m2">
                    <div class="card-panel green accent-4">
                      <span class="white-text">Tweets
                      </span>
                    </div>
                </div>
                <div class="col s2 m2 ">
                    <div class="card-panel deep-orange accent-2">
                         <i...

CSS

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    color:#000;
}
main {
    flex: 1 0 auto;
}
/* Remove footer margin added by materialize */
footer.page-footer {
  margin-top: 0px;
  padding-top: 0px;
}

ul.side-nav li {
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
ul.side-nav li:first-child {
	border-top: 1px solid rgba(0,0,0,0.1);
}
ul.side-nav.full, ul.side-nav.fixed {

}
.site-header {
	height: 56px;
	position: fixed;
	width: 100%;
	z-index: 99999;
}
nav {
    color:#000;
}

.material-icons{
    vertical-align: middle;
}

.row
{
  border:5px solid #42a5f5;  
    margin-top:10px;
    
}

JavaScript

$(".button-collapse").sideNav();
$(".dropdown-button").dropdown();
  $('.button-collapse').sideNav({menuWidth: 240, activationWidth: 70});