my shell theme

by niki4810

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="brand" href="#">Project Name</a>

            <div class="nav-collapse collapse">
                <p class="navbar-text pull-right">Logged in as <a href="#" class="navbar-link">Username</a>

                </p>
                <ul class="nav">
                    <li class="active"><a href="#">Home</a>

                    </li>
                    <li><a href="#about">About</a>

                    </li>
                    <li><a href="#contact">Contact</a>

                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>
<!-- breadcrumb -->
<div id="breadcrumb-bar" class="clearfix">
    <div class="leftnav-toggle-button leftnav-toggle-button-expanded"> <i class="icon-align-justify"></i>

    </div>
    <div class="page-icon-section">
        <img src="http://www.iconshock.com/img_jpg/SOPHISTIQUE/business/jpg/32/sales_icon.jpg" />
    </div>
    <div class="breadcrumb-content">
        <ul class="breadcrumb">
            <li><a href="#">Home</a>  <span class="divider">/</span>

            </li>
            <li><a href="#">Library</a>  <span class="divider">/</span>

            </li>
            <li><a href="#">Library</a>  <span class="divider">/</span>

            </li>
            <li class="active">Data</li>
        </ul>
    </div>
</div>
<!-- main container -->
<div id="maincontainer" class="row-fluid">
    <div id="sidebar"...

CSS

body {
    /*    background-color: #ccc; */
}
/* bootstrap overrides */
 .nav-tabs > .active > a, .nav-tabs > .active > a:hover {
    color: #ffffff;
    background-color: blue;
}
.nav-stacked > .active > a, .nav-stacked > .active > a:hover {
    color: #ffffff;
    background-color: blue;
}
.nav-tabs>li>a {
    padding-top : 4px;
    padding-bottom: 4px;
}
#mainContainer {
    padding-left : 0px;
    padding-right:0px;
}
#maincontent {
    margin-left:0px;
    padding-left:5px;
    padding-right:5px;
}
/*clearfix solution*/
 .clearfix:before, .clearfix:after {
    content :"";
    display : table;
}
.clearfix:after {
    clear : both;
}
.clearfix {
    zoom:1;
}
/* breadcrumb styles */
 #breadcrumb-bar {
    border-top : 4px solid orange;
    margin-top:40px;
    background-color : #F5F5F5;
}
.leftnav-toggle-button {
    border : 1px solid #000;
    float:left;
    height: 36px;
    width: 36px;
    cursor : pointer;
}
.leftnav-toggle-button-expanded {
    background-color: #E5E5E5;
    -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
    -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
.leftnav-toggle-button-collapsed {
    background-color: #f5f5f5;
}
.leftnav-toggle-button i {
    position: relative;
    left: 10px;
    top: 5px;
}
.page-icon-section {
    border : 1px solid #000;
    float:left;
    height: 36px;
    width: 36px;
}
.page-icon-section img {
    padding : 2px;
}
.breadcrumb-content {
    /* border : 1px solid #000; */
    float:left;
}
.breadcrumb {
    margin-bottom:0px;
}
/* side bar styles */
 #sidebar {
    margin-left: 0px;
}
#sidebar .nav > li.active:before {
    content :"";
    float:right;
    margin-top :5px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right:10px solid #fff;
}

JavaScript

$(function () {
                $.fn.slideFadeToggle  = function(speed, easing, callback) {
        return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};
			    $(".leftnav-toggle-button").click(function (e) {
			        $("#sidebar").slideFadeToggle();
			            $("#maincontent").toggleClass("span10").toggleClass("span12");
			            $(e.currentTarget).toggleClass("leftnav-toggle-button-expanded").toggleClass("leftnav-toggle-button-collapsed")
			       
			    });

			});