TureNavigationDemo

@import "custom-variables";
/* ********  REGION TOP BAR  *********** */

/* ตั้งค่าขนาด top bar */
.region-topbar{
	height: 85px
}
.layout-atlas .region-topbar .topbar-content{
	height:85px
}

/* ลบแถบสี topbar */
.layout-atlas .region-topbar::before {
	display: none !important;
}

/* ปรับระยะ Main Logo */
.layout-atlas .region-topbar .navbar-brand img {
    margin-left: 15px;
}

/* ********  SIDE NAVIGAION  *********** */

/* สีของ side bar navigator */
.layout-atlas .region-sidebar {
    background-color: #2c2e3d;
}

/* ขนาดของ icon หน้าเมนู */
.mx-navigationtree .navbar-inner > ul > li > a img{
	width: inherit !important; /* คืนค่า เขียนทับค่า default ของ theme */
    max-width: 36px; /* ตั้งค่าความข้างของ icon - ต้องใช้ภาพขนาดกว้างอย่างน้อย 36px */
    height: auto; /* ให้ความสูงคำนวณตามสัดส่วนเดิม */
    margin: 0 20px; /* ระยะห่างด้านข้างของ icon ส่วนนี้ทำให้ icon จัดอยู่ตรงกลางแถบ sidebar ได้ */
}

/* ความกว้างและสี background ของแถบ sidabar navigator */
.layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar {
    width: 75px !important;
    background-color: #2c2e3d;
}

/* ความสูงของแต่ละเมนู, สี background แต่ละเมนู, สีฟอนต์ของเมนู, สีขอบของเมนู*/
.layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree .navbar-inner > ul > li > a {
    height: 49px;
    border-color: transparent; /* ลบเส้นขั้นระหว่างเมนู */
	color:#525672;
    background-color: #2c2e3d;
	padding-left: 0;
}

/* ตั้งค่าความกว้างของ hamburger toggle ให้เท่ากับ ความข้าง sidenav */
.layout-atlas-responsive-default .region-sidebar .toggle-btn{
	width: 100%;
    height: 85px;
}

/* ตั้งค่าความกว้างและความสูงของปุ่ม hamburger toggle ให้เท่ากับ ความกว้าง sidenav */
.layout-atlas-responsive-default .region-sidebar .toggle-btn{
	width: 100%;
    height: 85px;
}

/* ตั้งค่า hamberger icon - เฉพาะตัว glyph */
.layout-atlas .toggle-btn .glyphicon.glyphicon-menu-hamburger {
    font-size: 24px;
    display: block;
    text-align: left;
    margin-left: 11px;
	color:#525672;
}

/* hover อักษรในแต่ละเมนู */
.layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper>.mx-navigationtree .navbar-inner>ul>li:hover>a{
	color:white;
	transition: 0.25s;
}
.layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper>.mx-navigationtree .navbar-inner>ul>li >a{
	transition: 0.25s;
}

/* hover ไอคอน สีขาวเท่านั้น ใช้เทคนิคเพิ่ม brightness ให้กับ icon โดยใช้ css */
.layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper>.mx-navigationtree .navbar-inner>ul>li:hover  img{
	-webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
	transition: 0.25s;
}

.layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper>.mx-navigationtree .navbar-inner>ul>li  img{
	transition: 0.25s;
}

/* hover ของ hamburger */
.layout-atlas .toggle-btn .glyphicon.glyphicon-menu-hamburger:hover{
	color:white;	transition: 0.25s;
}

.layout-atlas .toggle-btn .glyphicon.glyphicon-menu-hamburger{
	transition: 0.25s;
}