Replace menu (#131)

DNNCommunity · May 27, 2023 · ea7d1b2 · ea7d1b2
1 parent aca5d6e
commit ea7d1b2
Show file tree

Hide file tree

Showing 14 changed files with 408 additions and 338 deletions.
diff --git a/manifest.dnn b/manifest.dnn
@@ -1,6 +1,6 @@
 <dotnetnuke type="Package" version="9.0">
   <packages>
-    <package name="nvisionative.DNNCommunityTheme" type="Skin" version="1.2.1">
+    <package name="nvisionative.DNNCommunityTheme" type="Skin" version="1.3.0">
       <friendlyName>DNNCommunityTheme</friendlyName>
       <description>A DNN Theme by and for the DNN Community</description>
       <iconFile>MyIcon.png</iconFile>

diff --git a/menus/desktop/RazorMenu.cshtml b/menus/desktop/RazorMenu.cshtml
@@ -0,0 +1,39 @@
+@using DotNetNuke.Web.DDRMenu;
+@using System.Dynamic;
+@inherits DotNetNuke.Web.Razor.DotNetNukeWebPage<dynamic>
+
+<ul class="h-100" id="nav-desktop">
+    @RenderPages(Model.Source.root.Children)
+</ul>
+
+@helper RenderPages(IEnumerable<MenuNode> pages)
+{
+    if (!pages.Any())
+    {
+        return;
+    }
+
+    foreach (var page in pages)
+    {
+        var hasChildren = page.HasChildren();
+        var attrTarget = !string.IsNullOrEmpty(page.Target) ? ("target=\"" + page.Target + "\"") :string.Empty;
+
+        <li class="@(page.Selected ? "selected" : string.Empty)">
+            @if (page.Enabled)
+            {
+                <a href="@page.Url" @attrTarget>@page.Text</a>
+            }
+            else
+            {
+                <a href="javascript:void(0);" @attrTarget>@page.Text</a>
+            }
+
+            @if (hasChildren)
+            {
+                <ul>
+                    @RenderPages(page.Children)
+                </ul>
+            }
+        </li>
+    }
+}
diff --git a/menus/main/MainMenu-menudef.xml → menus/desktop/menudef.xml b/menus/main/MainMenu-menudef.xml → menus/desktop/menudef.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
-  <template>MainMenu.txt</template>
+  <template>RazorMenu.cshtml</template>
 </manifest>
diff --git a/menus/main/MainMenu.txt b/menus/main/MainMenu.txt
diff --git a/menus/mobile/RazorMenu.cshtml b/menus/mobile/RazorMenu.cshtml
@@ -0,0 +1,50 @@
+@using DotNetNuke.Web.DDRMenu;
+@using System.Dynamic;
+@inherits DotNetNuke.Web.Razor.DotNetNukeWebPage<dynamic>
+
+<span class="hamburger material-icons" id="nav-mobile"><i class="fa fa-2x fa-bars"></i></span>
+
+<nav class="nav-drill" id="nav-mobile">
+    <ul class="nav-items">
+        @RenderPages(Model.Source.root.Children)
+    </ul>
+</nav>
+
+@helper RenderPages(IEnumerable<MenuNode> pages)
+{
+    if (!pages.Any())
+    {
+        return;
+    }
+
+    foreach (var page in pages)
+    {
+        var hasChildren = page.HasChildren();
+        var pageDesc = Html.Raw(!string.IsNullOrEmpty(page.Description) ? ("<br/><span class=\"link-description\">" + @page.Description + "</span>") :string.Empty);
+        var attrTarget = !string.IsNullOrEmpty(page.Target) ? ("target=\"" + page.Target + "\"") :string.Empty;
+
+        <li class="nav-item @(hasChildren ? "nav-expand " : string.Empty)@(page.Selected ? "selected" : string.Empty)">
+            @if (page.Enabled)
+            {
+                <a class="nav-link" href="@page.Url" @attrTarget>@page.Text @pageDesc</a>
+            }
+            else
+            {
+                <a href="javascript:void(0);" @attrTarget>@page.Text @pageDesc</a>
+            }
+
+            @if (hasChildren)
+            {
+                <a href="javascript:void(0);" class="nav-link nav-expand-link"><i class="fa fa-chevron-right"></i></a>
+                <ul class="nav-items nav-expand-content">
+                    <li class="nav-item">
+                        <a class="nav-link nav-back-link" href="javascript:;">
+                            <em class="fa fa-chevron-left mr-1"></em>Back to @page.Text
+                        </a>
+                    </li>
+                    @RenderPages(page.Children)
+                </ul>
+            }
+        </li>
+    }    
+}
diff --git a/menus/mobile/menudef.xml b/menus/mobile/menudef.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<manifest>
+  <template>RazorMenu.cshtml</template>
+</manifest>
diff --git a/partials/_header.ascx b/partials/_header.ascx
@@ -13,11 +13,16 @@
   </div>
   <div class="container-fluid">
     <div class="container">
-      <div class="row nav-main">
-        <dnn:LOGO id="dnnLOGO" runat="server" />
-        <nav id="nav-items">
-          <dnn:MENU id="menu" MenuStyle="menus/main" runat="server" NodeSelector="*"></dnn:MENU>
-        </nav>
+      <div class="row justify-content-between flex-nowrap">
+      	<div class="col-auto">
+	        <dnn:LOGO id="dnnLOGO" runat="server" />
+		</div>
+		<div class="col-auto ms-auto d-none d-xl-block">
+          <dnn:MENU id="menu_desktop" MenuStyle="menus/desktop" runat="server" NodeSelector="*,0,2"></dnn:MENU>
+        </div>
+        <div class="col-auto ms-auto d-flex align-items-center d-xl-none">
+          <dnn:MENU id="menu_mobile" MenuStyle="menus/mobile" runat="server" NodeSelector="*,0,2"></dnn:MENU>
+        </div>
       </div>
     </div>
   </div>

diff --git a/partials/_header.ascx.bak b/partials/_header.ascx.bak
@@ -0,0 +1,27 @@
+<header class="bg-secondary sticky-top">
+  <div class="container-fluid user-controls bg-light-grey">
+    <div class="container">
+      <div class="row justify-content-end">
+        <ul>
+          <li><dnn:Login runat="server" id="dnnLogin" /></li>
+          <li><dnn:User runat="server" id="dnnUser" /></li>
+          <li style="display:none;"><dnn:Search runat="server" id="dnnSearch" ShowSite="false" ShowWeb="false" Submit="<i class='fa fa-search'></i>" /></li>
+          <li style="display:none;"><dnn:Language runat="server" id="dnnLanguage" ShowMenu="false" ShowLinks="false" /></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row nav-main">
+        <dnn:LOGO id="dnnLOGO" runat="server" />
+        <div class="col-auto ms-auto d-none d-xl-block">
+          <dnn:MENU id="menu_desktop" MenuStyle="menus/desktop" runat="server" NodeSelector="*,0,2"></dnn:MENU>
+        </div>
+        <div class="col-auto ms-auto d-flex align-items-center d-xl-none">
+          <dnn:MENU id="menu_mobile" MenuStyle="menus/mobile" runat="server" NodeSelector="*,0,2"></dnn:MENU>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
diff --git a/partials/_includes.ascx b/partials/_includes.ascx
@@ -8,3 +8,4 @@
 <dnn:DnnJsInclude runat="server" FilePath="dist/js/jquery.slimmenu.min.js" ForceProvider="DnnFormBottomProvider" Priority="100" PathNameAlias="SkinPath" />
 <dnn:DnnJsInclude runat="server" FilePath="dist/js/bootstrap.bundle.min.js" ForceProvider="DnnFormBottomProvider" Priority="110" PathNameAlias="SkinPath" />
 <dnn:DnnJsInclude runat="server" FilePath="dist/js/custom.min.js" ForceProvider="DnnFormBottomProvider" Priority="120" PathNameAlias="SkinPath" />
+<dnn:DnnJsInclude runat="server" FilePath="dist/js/customMenu.min.js" ForceProvider="DnnFormBottomProvider" Priority="130" PathNameAlias="SkinPath" />
diff --git a/project-details.json b/project-details.json
@@ -1,6 +1,6 @@
 {
 	"project": "DNNCommunityTheme",
-	"version": "1.2.1",
+	"version": "1.3.0",
 	"author": "David Poindexter",
 	"company": "nvisionative",
 	"url": "www.nvisionative.com",

diff --git a/src/js/custom.js b/src/js/custom.js
@@ -1,13 +0,0 @@
-jQuery( document ).ready(function($) { 
-  /* SlimMenu Prep */
-  $('#navigation').slimmenu({
-    resizeWidth: '800',
-    collapserTitle: '',
-    animSpeed: 0,
-    easingEffect: null,
-    indentChildren: false,
-    childrenIndenter: '&nbsp;',
-    expandIcon: '',
-    collapseIcon: ''
-  });
-});

diff --git a/src/js/customMenu.js b/src/js/customMenu.js
@@ -0,0 +1,31 @@
+/*jshint esversion: 6 */
+
+// add event listeners to expands
+const navExpand = [].slice.call(document.querySelectorAll('.nav-expand'));
+
+navExpand.forEach(item => {
+	item.querySelector('.nav-expand-link').addEventListener('click', () => item.classList.add('active'));
+	item.querySelector('.nav-back-link').addEventListener('click', () => item.classList.remove('active'));
+});
+
+// setup and add overlay
+let overlay = document.createElement('div');
+overlay.setAttribute('id', 'body-overlay');
+document.body.appendChild(overlay).classList.add('d-none');
+
+// target hamburger menu
+const responsiveMenu = document.getElementById('nav-mobile');
+const bodyOverlay = document.getElementById('body-overlay');
+
+responsiveMenu.addEventListener('click', function() {
+	// toggle menu
+	document.body.classList.toggle('nav-is-toggled');
+	bodyOverlay.classList.toggle('d-none');
+});
+
+// if overlay is clicked
+bodyOverlay.addEventListener('click', function(e) {
+	// toggle menu and overlay
+	document.body.classList.toggle('nav-is-toggled');
+	bodyOverlay.classList.toggle('d-none');
+});