Add Sidebar Menu Levels

Author: AramManukyan

src/app/_common/sidebar/sidebar.hbs

@@ -20,7 +20,7 @@
 						<i class="fa arrow"></i>
 					</a>
 
-					<ul>
+					<ul class="nav">
 						<li {{#is pagename "===" "items-list"}}class="active"{{/is}} >
 							<a href="items-list.html">
 								Items List
@@ -41,7 +41,7 @@
 						<i class="fa arrow"></i>
 					</a>
 
-					<ul>
+					<ul class="nav">
 						<li {{#is pagename "===" "charts-flot"}}class="active"{{/is}} >
 							<a href="charts-flot.html">
 								Flot Charts
@@ -62,7 +62,7 @@
 						<i class="fa arrow"></i>
 					</a>
 
-					<ul>
+					<ul class="nav">
 						<li {{#is pagename "===" "static-tables"}}class="active"{{/is}} >
 							<a href="static-tables.html">
 								Static Tables
@@ -92,7 +92,7 @@
 						<i class="fa arrow"></i>
 					</a>
 
-					<ul>
+					<ul class="nav">
 						<li {{#is pagename "===" "buttons"}}class="active"{{/is}}>
 							<a href="buttons.html">
 								Buttons
@@ -134,7 +134,7 @@
 						<i class="fa arrow"></i>
 					</a>
 
-					<ul>
+					<ul class="nav">
 						<li {{#is pagename "===" "login"}}class="active"{{/is}}>
 							<a href="login.html">
 								Login
@@ -179,6 +179,91 @@
 					</ul>
 				</li>
 
+				<li>
+					<a href="">
+						<i class="fa fa-sitemap"></i> Menu Levels
+						<i class="fa arrow"></i>
+					</a>
+
+					<ul class="nav">
+
+						<li>
+							<a href="#">
+								Second Level Item
+								<i class="fa arrow"></i>
+							</a>
+
+							<ul class="nav">
+								
+								<li>
+									<a href="#">
+										Third Level Item
+									</a>
+								</li>
+
+								<li>
+									<a href="#">
+										Third Level Item
+									</a>
+								</li>
+
+							</ul>
+						</li>
+						
+						<li>
+							<a href="#">
+								Second Level Item
+							</a>
+						</li>
+
+						<li>
+							<a href="#">
+								Second Level Item
+								<i class="fa arrow"></i>
+							</a>
+
+							<ul class="nav">
+								
+								<li>
+									<a href="#">
+										Third Level Item
+									</a>
+								</li>
+
+								<li>
+									<a href="#">
+										Third Level Item
+									</a>
+								</li>
+
+								<li>
+									<a href="#">
+										Third Level Item
+										<i class="fa arrow"></i>
+									</a>
+
+									<ul class="nav">
+
+										<li>
+											<a href="#">
+												Fourth Level Item
+											</a>
+										</li>
+
+										<li>
+											<a href="#">
+												Fourth Level Item
+											</a>
+										</li>
+									</ul>
+
+								</li>
+							</ul>
+						</li>
+
+					</ul>
+				</li>
+
 				<li {{#is pagename "===" "docs"}}class="active"{{/is}} >
 					<a href="https://github.com/modularcode/modular-admin-html">
 						<i class="fa fa-github-alt"></i> Theme Docs

src/app/_common/sidebar/sidebar.scss

@@ -136,7 +136,7 @@
 		}
 
 		// Second level items
-		& > li > ul > li {
+		& > li > .nav> li {
 
 			// Second level and deeper items links
 			// Have bit darker background and more padding 
@@ -153,6 +153,19 @@
 			&.active a {
 				color: $sidebar-color-text-active;
 			}
+
+			// Third level items	
+			& > .nav > li {
+				a {
+					padding-left: 60px;
+				}
+
+				& > .nav > li {
+					a {
+						padding-left: 70px;
+					}
+				}
+			}		
 		}
 	}