luci-theme-material: add support for modmenu

Improve support for modmenu.

Signed-off-by: Ansuel Smith <ansuelsmth@gmail.com>

4 files changed, 52 insertions, 4 deletions

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
index c41afc5b6a..dbb2d148c5 100644
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -430,6 +430,52 @@ header > .fill > .container > .status > * {
 	cursor: pointer;
 }
 
+.modemenu-buttons {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	color: #fff;
+	color: var(--header-color);
+	background: #09c;
+	background: var(--header-bg);
+	padding: .5rem;
+	transition: box-shadow .2s;
+	box-shadow: 0 2px 5px rgb(0 0 0 / 26%);
+}
+
+#modemenu {
+	margin: 0.25rem;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+}
+
+#modemenu > li > a {
+	font-size: .8rem;
+	font-weight: bold;
+	padding: .3rem .8rem;
+	white-space: nowrap;
+	text-decoration: none;
+	text-transform: uppercase;
+	color: #fff !important;
+	border-radius: 3px;
+	background-color: #bfbfbf;
+	text-shadow: none;
+}
+
+#modemenu > li > a.active {
+	background-color: #5bc0de !important;
+}
+
+#modemenu > li.divider {
+	margin-left: .25rem;
+	margin-right: .25rem;
+	border: .5rem solid var(--submenu-bg-hover);
+	border-left: 1px solid var(--submenu-bg-hover);
+	border-right: 1px solid var(--submenu-bg-hover);
+	border-radius: 1rem;
+}
+
 #xhr_poll_status {
 	display: flex;
 }
diff --git a/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js b/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js
index 3499d5d19f..a994c4f463 100644
--- a/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js
+++ b/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js
@@ -117,12 +117,12 @@ return baseclass.extend({
 			if (isActive)
 				this.renderMainMenu(children[i], children[i].name);
 
-			if (i > 0 || i < children.length)
+			if (i > 0 && i < children.length)
 				ul.appendChild(E('li', {'class': 'divider'}, [E('span')]))
 		}
 
-		if (ul.children.length > 1)
-			ul.style.display = '';
+		if (children.length > 1)
+			ul.parentElement.style.display = '';
 	},
 
 	renderTabMenu: function(tree, url, level) {
diff --git a/themes/luci-theme-material/luasrc/view/themes/material/footer.htm b/themes/luci-theme-material/luasrc/view/themes/material/footer.htm
index 4786b77452..f572504f4b 100644
--- a/themes/luci-theme-material/luasrc/view/themes/material/footer.htm
+++ b/themes/luci-theme-material/luasrc/view/themes/material/footer.htm
@@ -22,7 +22,6 @@
 	</div>
 	<footer class="mobile-hide">
 	<a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %>
-	<ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul>
 	</footer>
 	</div>
 </div>
diff --git a/themes/luci-theme-material/luasrc/view/themes/material/header.htm b/themes/luci-theme-material/luasrc/view/themes/material/header.htm
index 1d9849a98a..2b890da034 100644
--- a/themes/luci-theme-material/luasrc/view/themes/material/header.htm
+++ b/themes/luci-theme-material/luasrc/view/themes/material/header.htm
@@ -72,6 +72,9 @@
 	<div style="" class="loading"><span><div class="loading-img"></div><%:Collecting data...%></span></div>
 	<div class="main-left" id="mainmenu" style="display:none"></div>
 	<div class="main-right">
+		<div class="modemenu-buttons" style="display:none">
+			<ul id="modemenu"></ul>
+		</div>
 		<div class="darkMask"></div>
 		<div id="maincontent">
 			<div class="container">