Cacher is the code snippet organizer for pro developers

// It needs to include bootstrap mixins and variables
$menu: 'menu';

.#{$menu} {
	box-shadow: 0px 0px 9px 1px rgba(205, 205, 205, 0.64);
    z-index: 2;
    position: relative;
	@include clearfix;


	&__item {
		background: $gray-medium;
		color: #898989;
		text-transform: uppercase;
		font-size: 14px;
		float: left;
		text-align: center;
		height: 135px;
		line-height: 1.9;

		&+.#{$menu}__item {
			border-left: dashed 1px #e3e3e3;
		}
	}

	&__title {
		padding-top: 8px;
	}

	&__info {
		padding: 0 5px;

		&--selected {
			background: rgba(94, 94, 94, 0.08);
		}
	}

	&__info {
		height: 65px;
	}

	&__action {
		height: 70px;
		border-top: solid 1px #d9d9d9;
		border-bottom: solid 1px #d9d9d9;

		&--disabled {
			.popover {
				background: $dark-red;
				color: $white;

				.arrow {
					margin-top: -7px;
					border-left: 10px solid transparent;
    				border-right: 10px solid transparent;
    				border-bottom: 18px solid $dark-red;

    				&::after {
    					display: none;
    				}
				}

				&-content {
					i {
						font-size: 28px;
					}
					>* {
						@include dib(middle);
					}
					span {
						width: 82%;
						margin-left: 10px;
					}
				}
			}
		}
	}

	&__amount {
		font-weight: bold;
		color: #6d6e6d;
		font-size: 18px;
		line-height: 1.2;
	}

	&__action {
		@include clearfix;
		background: $white;
	}

	&__link {
		position: relative;
		overflow: hidden;
		color: #676766;
		font-size: 12px;
		text-transform: uppercase;
		padding: 9px 5px;
		height: 100%;
		transition: background .2s linear,
					color .2s linear;

		&:hover:not([class*=bg-]), &--selected {
			background: $gray-medium;
			color: #343434;
		}

		[class^='icon-'] {
			color: #b3b3b3;
			font-size: 30px;
		}

		&.bg-red, &.bg-green {
			[class^='icon-'], .#{$menu}__icon-text {
				color: $white;
			}
		}

		&:after {
			@include after-before;
			left: 0;
			top: 0;
			@include square(100%);
			cursor: pointer;
		}
	}

	&__icon-text {
		margin-top: -10px;
	}
}


@media(max-width: $screen-sm-max) {
	.#{$menu} {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		white-space: nowrap;

		&__item {
			float: none;
			display: inline-block;
			vertical-align: top;

			&+.#{$menu}__item {
				margin-left: -3.5px;
			}
		}
	}
}

nav.menu
	each item, index in menu
		.menu__item(class=item.action.length > 1 ? 'menu-15-#{item.action.length}':'menu-15')
			.menu__info(class=pageMainName === item.title ? 'menu__info--selected':'')
				if item.title
					.menu__title=item.title
					.menu__amount(class=item.color)=item.amount
			.menu__action(class=item.alert ? 'menu__action--disabled':'')
				each itemAction, i in item.action
					if item.alert
						a.menu__link(data-toggle='popover' data-content='<i class="icon-operation-fail"></i><span>You must close Shift and Z-shift first.</span>' class=item.action.length === 1 ? 'col-xs-12': item.action.length === 2 ? 'col-xs-6' : 'col-xs-4' class=pageName === item.title + '-' + itemAction ? itemAction === 'in' ? 'bg-red' : itemAction === 'out' ? 'bg-green' : 'menu__link--selected' : '')
							i(class='icon-#{item.icon[i]}')
							.menu__icon-text=itemAction
					else
						a.menu__link(href=(item.link === false ? 'login.html' : item.title + '-' + itemAction + '.html') class=item.action.length === 1 ? 'col-xs-12': item.action.length === 2 ? 'col-xs-6' : 'col-xs-4' class=pageName === item.title + '-' + itemAction ? itemAction === 'in' ? 'bg-red' : itemAction === 'out' ? 'bg-green' : 'menu__link--selected' : '')
							i(class='icon-#{item.icon[i]}')
							.menu__icon-text=itemAction

// grid for menu items
$cols: 14;
$empty: 0.00001;
@each $col, $up in ('15', 1 + $empty), ('15-2', 2 + $empty), ('15-3', 3 + $empty) {
	.menu-#{$col} {
		width: (100 * 1 / $cols) * $up + %;

		@media(max-width: $screen-sm-max) {
			width: (100 * 1 / $cols) * $up * 1.2 + %;
		}

		@media(max-width: $screen-xs-max) {
			width: (100 * 1 / $cols) * $up * 1.5 + %;
		}

		@media(max-width: $screen-xs-min) {
			width: (100 * 1 / $cols) * $up * 3 + %;
		}
	}
}