<div>
    <ul id="slide-out" class="sidenav sidenav-fixed z-depth-0" >
		<nav class="white lighten-2  ">
			<div class="col s1"></div>
			<a href="#" class="brand-logo"><img src="https://nethcarp.com/img/nethcarp_logo.png" alt="logo"></a>
		</nav>
		<li>
			<div class="" style="margin-left: 10%;">
			  <a href="#modal-post" class="waves-effect waves-light btn blue darken-4 no-uppercase modal-trigger" style="border-radius: 45px;">
			    <i class="material-icons left">add</i><b>Create Post</b></a>
			</div>
		</li>
		<div style="height: 30%; " class="side-bar">
			<li><a href="index"><i class="material-icons">business</i>Listing</a></li>
			<!-- <li><a href="search"><i class="material-icons">search</i>Search</a></li> -->
			<li><a href="notifications"><i class="material-icons">notifications</i>Notification</a></li>
			<li><a href="register_business"><i class="material-icons">add_to_photos</i>New Service</a></li>
			<li><a href="my_business"><i class="material-icons">branding_watermark</i>My Business</a></li>
		</div>
		<div>
		   <li><div class="divider"></div></li>
		   <img  src="images/23309port.png" height="250" width="250"> 
		</div>
	</ul>

</div>

<!-- Modal Structure -->
<div id="modal-post" class="modal">
	  <h4></h4>
	  <div class="collection white z-depth-0 " style="border:0px">
                    <div class="collection-item avatar " style="border:0px">
                            <img class="circle " src="images/david.jpg">
                            <span class="title"><b>Extreme Clinic</b></span>
                            <br>beauty, spa and salon
                            <span class="right">
                                <i class="tiny material-icons">access_alarm</i> <i>closed</i>
                            </span><br>
                            <small><i>Offers Emmergency service</i></small>
                    </div>
                    
					<div class="collection-item" style="border:0px">
                        <span contenteditable>Type a message..</span>
						 <p id="demo">
						  <input type="file" multiple id="gallery-photo-add">
						</p>
						
                        <div id="gallery-container" >
						     <div class="gallery" style="display: inline-block; position: relative" >
							     
							 </div>
						</div>
                    </div>
					
                    <div class="right-space">
					   <button type="submit" name="login" class="waves-effect waves-light btn-small right blue darken-4 no-uppercase">Submit</button>
                    </div>
            </div>
</div >
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview){
        if (input.files){
            var filesAmount = input.files.length;
            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();
                
                reader.onload = function(event){
					$('.gallery').append('<div id="updImg" style="position:relative; display:inline-block;">'+
					                         '<img  src='+event.target.result+' style="height:100px; width:100px; margin-left:10px">'+
										     '<div onclick="del(event)" class="uploadImageOverlap pointer"><i class="tiny material-icons">cancel</i></div>'+
										 '</div>'
										)
				}
                reader.readAsDataURL(input.files[i]);
			}
        }
    };
	
	$('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

function del(event){
    event.target.parentElement.parentElement.remove();
}

$('#gallery-container').css('overflow', 'hidden');
$('#gallery-container').mouseenter(function(){
    $(this).css('overflow', 'auto');
});
$('#gallery-container').mouseleave(function(){
    $(this).css('overflow', 'hidden');
});

$('.side-bar').css('overflow', 'hidden');
$('.side-bar').mouseenter(function(){
    $(this).css('overflow', 'auto');
});
$('.side-bar').mouseleave(function(){
    $(this).css('overflow', 'hidden');
});

$(document).ready(function(){
    $('.modal').modal();
  });
  


</script>