App Layout Object

by Farzad Cyrus

HTML

<p class="button-group"><strong>Left Sidebar:</strong><button id="sidebar-left-open">Open</button><button id="sidebar-left-close">Close</button></p>

    
    <p class="button-group"><strong>Right Sidebar:</strong><button id="sidebar-right-open">Open</button>
        <button id="sidebar-right-close">Close</button></p>
    


    <div class="notification">
    </div>
    
<div id="content">
    <div class="sidebar sidebar-left">Left Sidebar</div>
    <div class="main">Main Content</div>
    <div class="sidebar sidebar-right">Right Sidebar</div>
</div>

CSS

body {
    background:#eeeeee;
    padding:20px;
    margin:0;
    font-family:sans-serif, arial;
    font-size:14px;
    position:relative;
    width:100%;
}
* {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    
    -webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
.button-group {
    float:right;
    width:auto;
    clear:none;
    display: inline-block;
}
.button-group:first-child {
    float:left;
}
.notification {
    border:1px solid #E67;
    background: #E78;
    padding:20px;
    width:80%;
    height:auto;
    line-height:24px;
    margin:20px auto;
    color:#ffffff;
    float: none;
    clear: both;
}

#content {
    width: 100%;
    height:300px;
    position:relative;
    background:#ffffff;
    border:1px solid #cccccc;
    overflow:hidden;
}
.main,
.sidebar {
    position:relative;
    float:left;
    height:100%;
    padding:40px;
    text-align:center;
    text-transform:uppercase;
}
.main {
    width:100%;
    padding:40px 30%;
}
.sidebar {
    width:30%;
    border-width:0;
    border-color:#cccccc;
    border-style:solid;
    position:absolute;
    top:0;
}
.sidebar-left {
    border-width: 0 1px 0 0;
    left:-30%;
}
.sidebar-right {
    border-width: 0 0 0 1px;
    right:-30%;
}

.sidebar-left.active {left:0;}
.sidebar-right.active {right:0;}

JavaScript

////////////////////////////////////////////////////////////////////////////////////////////////////////

var app = app || {};

app.layout = (function() {
	var options = {
		header: {
			object: $('#header'),
			visible: false
		},
		content: {
			object: $('#content'),
			visible: false
		},
		sidebarLeft: {
			object: $('.sidebar-left'),
			visible: true
		},
		sidebarRight: {
			object: $('.sidebar-right'),
			visible: false
		},
		footer: {
			object: $('#footer'),
			visible: false
		}
	};
	return {
		// SIDEBAR LEFT
		sidebarLeft: {
			init: function() {
				if(options.sidebarLeft.object.hasClass('active')) {
					options.sidebarLeft.visible = true;
				}
			}(),
			open: function() {
				if (this.isActive() == false) {
					options.sidebarLeft.visible = true;
					options.sidebarLeft.object.addClass('active');
				}
			},
			close: function() {
				if (this.isActive() == true) {
					options.sidebarLeft.visible = false;
					options.sidebarLeft.object.removeClass('active');
				}
			},
			isActive: function() {
				return options.sidebarLeft.visible;
			}
		},
		sidebarRight: {
			init: function() {
				if(options.sidebarRight.object.hasClass('active')) {
					options.sidebarRight.visible = true;
				}
			}(),
			open: function() {
				if (this.isActive() == false) {
					options.sidebarRight.visible = true;
					options.sidebarRight.object.addClass('active');
				}
			},
			close: function() {
				if (this.isActive() == true) {
					options.sidebarRight.visible = false;
					options.sidebarRight.object.removeClass('active');
				}
			},
			isActive: function() {
				return options.sidebarRight.visible;
			}
		},
		// HEADER
		header: {},
		// CONTENT
		content: {},
		// FOOTER
		footer: {}
	};
})();
////////////////////////////////////////////////////////////////////////////////////////////////////////

// Which panel are active

    
    if(app.layout.sidebarLeft.isActive() == true){
        app.layout.sidebarLeft.close();
       ...