JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<div id="top">Welcome, Scott
    <div id="logout">Logout</div>
</div>
<div id="left">
    <div class="item">
        <div class="icon"></div>
        <div class="desc">Pending Orders</div>
    </div>
    <div class="item">
        <div class="icon"></div>
        <div class="desc">Complete Orders</div>
    </div>
    <div class="item">
        <div class="icon"></div>
        <div class="desc">Categories</div>
    </div>
    <div class="item">
        <div class="icon"></div>
        <div class="desc">Manufacturers</div>
    </div>
    <div class="item">
        <div class="icon"></div>
        <div class="desc">Items</div>
    </div>
    <div id="shrink" class="item">
        <div class="icon"></div>
        <div class="desc">Minimize</div>
    </div>
</div>
<div id="right"></div>

CSS

body {
    margin:0px;
    font-family:Tahoma;
}
#left {
    width:256px;
    position:absolute;
    top:48px;
    bottom:0px;
    background:#72C1F2;
    color:#406C87;
}
#top {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height:48px;
    background:#EFEFEF;
}
#right {
    position:absolute;
    top:48px;
    left:256px;
    right:0px;
    bottom:0px;
    background:#FEFEFE;
    padding:8px;
}
#shrink {
    position:absolute;
    bottom:0px;
    left:0px;
}
.item {
    height:32px;
    margin:8px;
    position:relative;
}
.icon {
    height:32px;
    width:32px;
    background:rgba(255, 255, 255, 0.35);
    margin-right:8px;
    float:left;
}
.desc {
    height:32px;
    background:rgba(255, 255, 255, 0.35);
    margin-left:40px;
    line-height:32px;
    padding-left:8px;
    width:192px;
}
.item:hover div {
    background:rgba(255, 255, 255, 0.55);
    cursor:pointer;
}
#logout {
    background:#F27872;
    color:#FFF;
    float:right;
    margin:8px;
    height:32px;
    line-height:32px;
    padding:0px 8px;
}
#logout:hover {
    background:#F28F8A;
    cursor:pointer;
}

JavaScript

$(document).ready(function () {
    $("#shrink").on("click", function () {
        if ($("#left").css("width") == "48px") {
            $("#left").animate({
                width: "256px"
            }, 250);
            $("#right").animate({
                left: "256px"
            }, 250);
        } else {
            $("#left").animate({
                width: "48px"
            }, 250);
            $("#right").animate({
                left: "48px"
            }, 250);
        }
    });
});