CRM Complete Page v1

by kapantzak

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

	<div id="main-menu-wrapper" class="main-menu-expanded">
    
		<div id="logo-wrapper" class="header-item">
			<span>epsilon CRM</span>
		</div>
		
		<div id="menu-group-icon" class="header-item group-inactive" title="Κατηγοριοποίηση μενού">
			<i class="fa fa-circle-o"></i>
		</div>
				
		<div id="header-toggle-buttons" class="header-item noselect">			
			<span id="toggle-main-menu-span" title="Συμπύκνωση μενού">
				<i id="toggle-main-menu" class="fa fa-eye-slash"></i>
			</span>        
			<span id="toggle-side-menu-span" data-state="0" title="Συμπύκνωση πλαϊνού μενού">
				<i id="toggle-side-menu" class="fa fa-backward"></i>				
			</span>
		</div>
				
		<div id="menu-placeholder-icon" class="header-item plc-inactive" title="Κεντρικό μενού">
			<i id="bars-menu-trigger" class="fa fa-bars"></i>
		</div>
		
		<div id="menu-wrapper-alt-plc" class="header-item">&nbsp;</div>
		
		<div id="menu-wrapper" class="header-item noselect" data-break-groups="false">        
			<a class="menu-button group-dark-blue" href="#">
				<i class="fa fa-home"></i>
				<span class="f-btn-text">Κεντρική</span>
			</a>        
			<a class="menu-button group-dark-blue" href="#">
				<i class="fa fa-gear"></i>
				<span class="f-btn-text">Διαχείριση</span>
			</a>
			<a class="menu-button group-orange" href="#">
				<i class="fa fa-calendar"></i>
				<span class="f-btn-text">Ημερολόγιο</span>
			</a>
			<a class="menu-button group-orange" href="#">
				<i class="fa fa-user"></i>
				<span class="f-btn-text">Πελάτες</span>
			</a>
			<a class="menu-button group-orange" href="#">
				<i class="fa fa-phone"></i>
				<span class="f-btn-text">Επικοινωνίες</span>
			</a>
			<a class="menu-button group-default"...

CSS

/*
MENU BUTTONS BORDERS
Search for 'toggle-borders' and toggle the css rules to enable / disable border manipulation on menu buttons
*/

/* Helper rules (delete if not necessary) */
.hidden {display:none}
a:visited,
a:focus,
a:hover 
{
    text-decoration: none;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
ul,li {
    padding: 0;
    margin: 0;
}
li {list-style:none}

body {
    font-family: 'Open Sans', sans-serif;
}

#main-menu-wrapper {
    display: table;
    width: 100%;       
    background-color: #f1f1f1;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
    position: relative;
    z-index: 108;
}

div.header-item {
    display: table-cell;
    vertical-align: middle;
}

#logo-wrapper {
    width: 230px;
    text-align: center;
}

#logo-wrapper > span {
    font-size: 32px;
    font-weight: 200;
    color: #3498db;
}

#header-toggle-buttons {    
    text-align: center;
    border-left: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
	background-color: #e9e9e9;
    color: #777;
}

#main-menu-wrapper.main-menu-expanded #header-toggle-buttons {
    width: 120px;
}

#main-menu-wrapper.main-menu-expanded #header-toggle-buttons.toggleNarrow {
    width: 35px;
}

#main-menu-wrapper.main-menu-collapsed #header-toggle-buttons {
    width: 82px;
}

#header-toggle-buttons > span { 
    cursor: pointer;
    text-align: center;
	transition: all 150ms ease-out;
}

#header-toggle-buttons > span:hover {
	background-color: #fff;
}

#main-menu-wrapper.main-menu-expanded #header-toggle-buttons > span {
    display: inline-block;
    padding: 10px 15px;
}

#main-menu-wrapper.main-menu-collapsed #header-toggle-buttons > span {
	display: inline;
    padding: 12px;
	/* float: right; */
}

#header-toggle-buttons {
    position: relative;
}

#side-menu-config {	
	
}

#main-menu-wrapper.narrow-view > #header-toggle-buttons {
    display:...

JavaScript

// Set side menu padding-top
var setSideMenuPos = function() {
    var mainMenuHeight = $('#main-menu-wrapper').outerHeight();
    var sideTop = parseInt(mainMenuHeight); // + 15
    $('#side-menu-wrapper').css({'padding-top': sideTop + 'px'});
}

// Main Menu
$(document).on('click', '#toggle-main-menu-span', function() {
    var that = $(this);
    var mainMenuWrapper = $('#main-menu-wrapper');
	var i = that.find('#toggle-main-menu');
        
    i.toggleClass('fa-eye-slash fa-eye');
    mainMenuWrapper.toggleClass('main-menu-expanded main-menu-collapsed');                       
    
    if (mainMenuWrapper.hasClass('main-menu-collapsed')) {
        that.attr('title', 'Επέκταση μενού');
        setIndicatorWidth();        
    } else {
        that.attr('title', 'Συμπύκνωση μενού');
    }
    if ($('#user-panel-wrapper').hasClass('user-panel-expanded')) {
        toggleUserMenu();        
    }
    wrapDetector('a.menu-button');
    setUserPanelPos();
    setSideMenuPos();
});

// Main Menu Group
$(document).on('click', '#menu-group-icon', function() {
	var that = $(this);
	var i = that.find('i.fa');
	var menu = $('#menu-wrapper');
	that.toggleClass('group-inactive group-active');
	if (that.hasClass('group-active')) {
		i.removeClass('fa-cirle-o').addClass('fa-dot-circle-o');
		menu.attr('data-break-groups', 'true');
		that.attr('title', 'Απενεργοποίηση κατηγοριοποίησης μενού');
		var state = true;
	} else {
		i.addClass('fa-cirle-o').removeClass('fa-dot-circle-o');
		menu.attr('data-break-groups', 'false');
		that.attr('title', 'Κατηγοριοποίηση μενού');
		var state = false;
	}	
	breakGroups(state);
});

$(document).on('click', '#user-panel-wrapper', function() {
    toggleUserMenu();
});

// User Menu
var toggleUserMenu = function() {
    var that = $('#user-panel-wrapper');
    var panelMenu = $('#user-panel-menu');
    that.toggleClass('user-panel-collapsed user-panel-expanded');
    that.find('#user-panel-arrow').toggleClass('fa-caret-down fa-caret-up');
 ...