From ba519ce420cdd5472315ee1bd5f1e1c34932414f Mon Sep 17 00:00:00 2001
From: Aaron Sadler <aaron@aaronsadler.uk>
Date: Mon, 26 Jul 2021 17:37:31 +0100
Subject: [PATCH] Updated UI files

---
 .../UmbNav/js/umbnav.controller.js            |  11 +-
 .../UmbNav/js/umbnav.settings.controller.js   |  20 +-
 TestSite.V9/App_Plugins/UmbNav/lang/en-us.xml |   6 +
 .../App_Plugins/UmbNav/views/editor.html      |   2 +-
 .../App_Plugins/UmbNav/views/settings.html    | 180 ++++++++++--------
 TestSite.V9/TestSite.V9.csproj                |   5 +-
 .../UmbNav/js/umbnav.controller.js            |  11 +-
 .../UmbNav/js/umbnav.settings.controller.js   |  16 +-
 .../App_Plugins/UmbNav/lang/en-us.xml         |   6 +
 .../App_Plugins/UmbNav/views/editor.html      |   2 +-
 .../App_Plugins/UmbNav/views/settings.html    | 177 +++++++++--------
 11 files changed, 259 insertions(+), 177 deletions(-)

diff --git a/TestSite.V9/App_Plugins/UmbNav/js/umbnav.controller.js b/TestSite.V9/App_Plugins/UmbNav/js/umbnav.controller.js
index eaaf8e1..10b19ae 100644
--- a/TestSite.V9/App_Plugins/UmbNav/js/umbnav.controller.js
+++ b/TestSite.V9/App_Plugins/UmbNav/js/umbnav.controller.js
@@ -2,6 +2,7 @@
     var vm = this;
     var dialogOptions = $scope.model;
     vm.wideMode = Object.toBoolean(dialogOptions.config.hideLabel);
+    vm.allowChildNodes = Object.toBoolean(!dialogOptions.config.hideIncludeChildren);
     vm.items = [];
 
     if (dialogOptions.config.expandOnHoverTimeout > 0) {
@@ -83,6 +84,10 @@
 
     function openSettings(item, callback) {
 
+        if (item != null && item.itemType == null) {
+            item.itemType = 'link';
+        }
+
         var settingsEditor = {
             title: "Settings",
             view: "/App_Plugins/UmbNav/Views/settings.html",
@@ -92,6 +97,7 @@
             allowDisplay: dialogOptions.config.allowDisplay,
             allowCustomClasses: dialogOptions.config.allowCustomClasses,
             allowImageIcon: dialogOptions.config.allowImageIcon,
+            hideIncludeChildren: dialogOptions.config.hideIncludeChildren,
             currentTarget: item,
             submit: function (model) {
                 model.target.description = model.target.url + model.target.anchor;
@@ -145,13 +151,14 @@
             customClasses: data.customClasses,
             imageUrl: data.imageUrl,
             anchor: data.anchor,
-            url: url || "#",
+            url: url,
             children: data.children || [],
             icon: data.icon || "icon-link",
             published: data.published,
             naviHide: data.naviHide,
             culture: data.culture,
-            includeChildNodes: data.includeChildren
+            includeChildNodes: data.includeChildren,
+            itemType: data.itemType
         }
     }
 }
diff --git a/TestSite.V9/App_Plugins/UmbNav/js/umbnav.settings.controller.js b/TestSite.V9/App_Plugins/UmbNav/js/umbnav.settings.controller.js
index da5898e..b96aa18 100644
--- a/TestSite.V9/App_Plugins/UmbNav/js/umbnav.settings.controller.js
+++ b/TestSite.V9/App_Plugins/UmbNav/js/umbnav.settings.controller.js
@@ -11,10 +11,7 @@
     vm.toggleChildren = toggleChildren;
     vm.showAdvanced = false;
     vm.labels = {};
-    vm.labels.itemTypes = [
-        { 'value': 'link', 'label': 'Link' },
-        { 'value': 'label', 'label': 'Label' }
-    ];
+    vm.labels.itemTypes = {};
     localizationService.localizeMany(['defaultdialogs_openInNewWindow']).then(function (data) {
         vm.labels.openInNewWindow = data[0];
     });
@@ -40,11 +37,20 @@
         vm.labels.imageIconUrl = data[0];
     });
     localizationService.localizeMany(['umbnav_link']).then(function (data) {
-        vm.labels.link = data[0];
+        vm.labels.itemTypes.link = { 'value': 'link', 'label': data[0] };
+    });
+    localizationService.localizeMany(['umbnav_label']).then(function (data) {
+        vm.labels.itemTypes.label = { 'value': 'nolink', 'label': data[0] };
+    });
+    localizationService.localizeMany(['umbnav_menuItem']).then(function (data) {
+        vm.labels.menuItem = data[0];
     });
     localizationService.localizeMany(['umbnav_configuration']).then(function (data) {
         vm.labels.configuration = data[0];
     });
+    localizationService.localizeMany(['umbnav_linkTypeDescription']).then(function (data) {
+        vm.labels.linkTypeDescription = data[0];
+    });
     if (!$scope.model.title) {
         localizationService.localize('defaultdialogs_selectLink').then(function (value) {
             $scope.model.title = value;
@@ -64,7 +70,7 @@
     $scope.showTarget = $scope.model.hideTarget !== true;
     $scope.showDisplay = $scope.model.allowDisplay === true;
     $scope.showNoopener = $scope.model.hideNoopener !== true;
-    $scope.showNoreferrer = $scope.model.hideNoreferrer!== true;
+    $scope.showNoreferrer = $scope.model.hideNoreferrer !== true;
     $scope.showAnchor = $scope.model.hideAnchor !== true;
     $scope.showIncludeChildren = $scope.model.hideIncludeChildren !== true;
     $scope.showCustomClasses = $scope.model.allowCustomClasses === true;
@@ -135,7 +141,7 @@
         vm.openInNewWindow = $scope.model.target.target === '_blank';
         vm.hideLoggedIn = $scope.model.target.hideLoggedIn;
         vm.hideLoggedOut = $scope.model.target.hideLoggedOut;
-        vm.includeChildren = $scope.model.target.includeChildren;
+        vm.includeChildren = $scope.model.target.includeChildNodes;
         vm.showNoopener = $scope.model.target.noopener === 'noopener' && $scope.model.target.id === null || $scope.model.target.udi === null;
         vm.showNoreferrer = $scope.model.target.noreferrer === 'noreferrer' && $scope.model.target.id === null || $scope.model.target.udi === null;
     } else if (dialogOptions.anchors) {
diff --git a/TestSite.V9/App_Plugins/UmbNav/lang/en-us.xml b/TestSite.V9/App_Plugins/UmbNav/lang/en-us.xml
index c6bd046..11520c2 100644
--- a/TestSite.V9/App_Plugins/UmbNav/lang/en-us.xml
+++ b/TestSite.V9/App_Plugins/UmbNav/lang/en-us.xml
@@ -22,5 +22,11 @@
 		<key alias="ImageIconUrl">Image/Icon Url, id, udi or GUID</key>
 		<key alias="configuration">Advanced Configuration</key>
 		<key alias="link">Link</key>
+		<key alias="label">Label</key>
+		<key alias="menuItem">Menu Item</key>
+		<key alias="title">Title</key>
+		<key alias="itemType">Menu Item Type</key>
+		<key alias="linkTypeDescription">Select menu item type</key>
+		<key alias="linkTypeDescription">Select menu item type</key>
 	</area>
 </language>
\ No newline at end of file
diff --git a/TestSite.V9/App_Plugins/UmbNav/views/editor.html b/TestSite.V9/App_Plugins/UmbNav/views/editor.html
index ec87cdb..54a4088 100644
--- a/TestSite.V9/App_Plugins/UmbNav/views/editor.html
+++ b/TestSite.V9/App_Plugins/UmbNav/views/editor.html
@@ -42,7 +42,7 @@
                     <i ng-if="item.icon" class="umb-node-preview__icon {{ item.icon }}" aria-hidden="true"></i>
                     <div class="umb-node-preview__content">
 
-                        <div class="umb-node-preview__name" ng-attr-title="{{item.title || item.name}}">{{ item.title || item.name }} <span ng-if="item.includeChildNodes" class="umbnav-label umbnav-label-primary"><localize key="umbnav_includesChildNodes"></localize></span></div>
+                        <div class="umb-node-preview__name" ng-attr-title="{{item.title || item.name}}">{{ item.title || item.name }} <span ng-if="item.includeChildNodes && vm.allowChildNodes" class="umbnav-label umbnav-label-primary"><localize key="umbnav_includesChildNodes"></localize></span></div>
                         <div class="umb-node-preview__description" ng-if="item.description">{{ item.description }}</div>
                     </div>
                 </div>
diff --git a/TestSite.V9/App_Plugins/UmbNav/views/settings.html b/TestSite.V9/App_Plugins/UmbNav/views/settings.html
index 65bd228..2d2acb5 100644
--- a/TestSite.V9/App_Plugins/UmbNav/views/settings.html
+++ b/TestSite.V9/App_Plugins/UmbNav/views/settings.html
@@ -11,99 +11,120 @@
 
         <umb-editor-container class="block-form">
             <umb-box>
-                <umb-box-header ng-if="!vm.loading" title="{{vm.labels.link}}"></umb-box-header>
+                <umb-box-header ng-if="!vm.loading" title="{{vm.labels.menuItem}}"></umb-box-header>
                 <umb-box-content>
-                    <select ng-change="itemTypeChanged()" ng-model="model.target.itemType">
-                        <option ng-repeat="itemType in vm.labels.itemTypes" ng-value="itemType.value">{{itemType.key}}</option>
-                    </select>
-                    <div ng-class="{'flex': showAnchor}">
-
-                        <umb-control-group label="@defaultdialogs_urlLinkPicker" class="umb-linkpicker__url">
-                            <input type="text"
-                                   style="margin-right: 10px;"
-                                   localize="placeholder"
-                                   placeholder="@general_url"
-                                   class="umb-property-editor umb-textstring"
-                                   ng-model="model.target.url"
-                                   umb-auto-focus
-                                   ng-disabled="model.target.id || model.target.udi"/>
+                    <umb-control-group label="@umbnav_itemType">
+                        <div class="umb-property-editor">
+                            <div class=" flex items-center">
+                                <select ng-model="model.target.itemType">
+                                    <option value="{{vm.labels.itemTypes.link.value}}">{{vm.labels.itemTypes.link.label}}</option>
+                                    <option value="{{vm.labels.itemTypes.label.value}}">{{vm.labels.itemTypes.label.label}}</option>
+                                </select>
+                                <div class="ml2">
+                                    {{vm.labels.linkTypeDescription}}
+                                </div>
+                            </div>
+                        </div>
+                    </umb-control-group>
+                    <div ng-if="model.target.itemType == 'link'">
+                        <div ng-class="{'flex': showAnchor}">
+
+                            <umb-control-group label="@defaultdialogs_urlLinkPicker" class="umb-linkpicker__url">
+                                <input type="text"
+                                       style="margin-right: 10px;"
+                                       localize="placeholder"
+                                       placeholder="@general_url"
+                                       class="umb-property-editor umb-textstring"
+                                       ng-model="model.target.url"
+                                       umb-auto-focus
+                                       ng-disabled="model.target.id || model.target.udi" />
+                            </umb-control-group>
+
+                            <umb-control-group label="@defaultdialogs_anchorLinkPicker" class="umb-linkpicker__anchor" ng-if="showAnchor">
+                                <input type="text"
+                                       list="anchors"
+                                       localize="placeholder"
+                                       placeholder="@placeholders_anchor"
+                                       class="umb-property-editor umb-textstring"
+                                       ng-model="model.target.anchor" />
+
+                                <datalist id="anchors">
+                                    <option value="{{a}}" ng-repeat="a in anchorValues"></option>
+                                </datalist>
+                            </umb-control-group>
+                        </div>
+                        <umb-control-group label="@general_name"
+                                           ng-if="model.target.name">
+                            {{model.target.name}}
                         </umb-control-group>
 
-                        <umb-control-group label="@defaultdialogs_anchorLinkPicker" class="umb-linkpicker__anchor" ng-if="showAnchor">
+                        <umb-control-group label="@defaultdialogs_nodeNameLinkPicker">
                             <input type="text"
-                                   list="anchors"
                                    localize="placeholder"
-                                   placeholder="@placeholders_anchor"
+                                   placeholder="@placeholders_entername"
                                    class="umb-property-editor umb-textstring"
-                                   ng-model="model.target.anchor"/>
-
-                            <datalist id="anchors">
-                                <option value="{{a}}" ng-repeat="a in anchorValues"></option>
-                            </datalist>
+                                   ng-model="model.target.title"
+                                   ng-required="!model.target.name" />
                         </umb-control-group>
-                    </div>
-                    <umb-control-group label="@general_name"
-                                       ng-if="model.target.name">
-                        {{model.target.name}}
-                    </umb-control-group>
-
-                    <umb-control-group label="@defaultdialogs_nodeNameLinkPicker">
-                        <input type="text"
-                               localize="placeholder"
-                               placeholder="@placeholders_entername"
-                               class="umb-property-editor umb-textstring"
-                               ng-model="model.target.title"
-                               ng-required="!model.target.name"/>
-                    </umb-control-group>
 
-                    <div class="umb-control-group">
-                        <h5>
-                            <localize key="defaultdialogs_linkToPage">Link to page</localize>
-                        </h5>
-
-                        <div ng-hide="miniListView">
-                            <umb-tree-search-box hide-search-callback="hideSearch"
-                                                 search-callback="onSearchResults"
-                                                 search-from-id="{{searchInfo.searchFromId}}"
-                                                 search-from-name="{{searchInfo.searchFromName}}"
-                                                 datatype-key="{{searchInfo.dataTypeKey}}"
-                                                 show-search="{{searchInfo.showSearch}}"
-                                                 section="{{section}}">
-                            </umb-tree-search-box>
-
-                            <br/>
-
-                            <umb-tree-search-results ng-if="searchInfo.showSearch"
-                                                     results="searchInfo.results"
-                                                     select-result-callback="selectResult">
-                            </umb-tree-search-results>
-
-                            <div ng-hide="searchInfo.showSearch">
-                                <umb-tree section="content"
-                                          hideheader="true"
-                                          hideoptions="true"
-                                          api="dialogTreeApi"
-                                          on-init="onTreeInit()"
-                                          enablelistviewexpand="true"
-                                          isdialog="true"
-                                          enablecheckboxes="true"
-                                          customtreeparams="{{customTreeParams}}">
-                                </umb-tree>
+                        <div class="umb-control-group">
+                            <h5>
+                                <localize key="defaultdialogs_linkToPage">Link to page</localize>
+                            </h5>
+
+                            <div ng-hide="miniListView">
+                                <umb-tree-search-box hide-search-callback="hideSearch"
+                                                     search-callback="onSearchResults"
+                                                     search-from-id="{{searchInfo.searchFromId}}"
+                                                     search-from-name="{{searchInfo.searchFromName}}"
+                                                     datatype-key="{{searchInfo.dataTypeKey}}"
+                                                     show-search="{{searchInfo.showSearch}}"
+                                                     section="{{section}}">
+                                </umb-tree-search-box>
+
+                                <br />
+
+                                <umb-tree-search-results ng-if="searchInfo.showSearch"
+                                                         results="searchInfo.results"
+                                                         select-result-callback="selectResult">
+                                </umb-tree-search-results>
+
+                                <div ng-hide="searchInfo.showSearch">
+                                    <umb-tree section="content"
+                                              hideheader="true"
+                                              hideoptions="true"
+                                              api="dialogTreeApi"
+                                              on-init="onTreeInit()"
+                                              enablelistviewexpand="true"
+                                              isdialog="true"
+                                              enablecheckboxes="true"
+                                              customtreeparams="{{customTreeParams}}">
+                                    </umb-tree>
+                                </div>
                             </div>
-                        </div>
 
-                        <umb-mini-list-view ng-if="miniListView"
-                                            node="miniListView"
-                                            entity-type="Document"
-                                            on-select="selectListViewNode(node)"
-                                            on-close="closeMiniListView()">
-                        </umb-mini-list-view>
+                            <umb-mini-list-view ng-if="miniListView"
+                                                node="miniListView"
+                                                entity-type="Document"
+                                                on-select="selectListViewNode(node)"
+                                                on-close="closeMiniListView()">
+                            </umb-mini-list-view>
 
+                        </div>
+                    </div>
+                    <div ng-if="model.target.itemType == 'nolink'">
+                        <umb-control-group label="@umbnav_title">
+                            <input type="text"
+                                   localize="placeholder"
+                                   placeholder="@placeholders_entername"
+                                   class="umb-property-editor umb-textstring"
+                                   ng-model="model.target.title"
+                                   ng-required="!model.target.name" />
+                        </umb-control-group>
                     </div>
-
                 </umb-box-content>
             </umb-box>
-            <umb-box>
+            <umb-box ng-if="model.target.itemType == 'link'">
                 <umb-box-header ng-if="!vm.loading" title="{{vm.labels.configuration}}" ng-click="vm.showAdvanced = !vm.showAdvanced" style="cursor: pointer;">
                     <i class="icon icon-navigation-up" ng-if="vm.showAdvanced" title="expand"></i>
                     <i class="icon icon-navigation-down" ng-if="!vm.showAdvanced" title="collapse"></i>
@@ -134,7 +155,6 @@ <h5>
                                       text="{{vm.labels.includeChildNodes}}">
                         </umb-checkbox>
                     </umb-control-group>
-
                     <umb-control-group ng-if="showNoopener || showNoreferrer" label="@umbnav_seo">
                         <umb-checkbox ng-if="showNoopener" model="vm.showNoopener"
                                       on-change="vm.toggleshowNoopener(model, value)"
diff --git a/TestSite.V9/TestSite.V9.csproj b/TestSite.V9/TestSite.V9.csproj
index ba28b0e..8c5e600 100644
--- a/TestSite.V9/TestSite.V9.csproj
+++ b/TestSite.V9/TestSite.V9.csproj
@@ -52,10 +52,7 @@
       <None Remove="App_Plugins\UmbNav\views\settings.html" />
     </ItemGroup>
     <ItemGroup>
-      <Content Include="App_Plugins\UmbNav\css\editor.css">
-        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
-        <CopyToPublishDirectory>Always</CopyToPublishDirectory>
-      </Content>
+      <Content Include="App_Plugins\UmbNav\css\editor.css" />
       <Content Include="App_Plugins\UmbNav\js\angular-ui-tree.js" />
       <Content Include="App_Plugins\UmbNav\js\umbnav.controller.js" />
       <Content Include="App_Plugins\UmbNav\js\umbnav.resource.js" />
diff --git a/src/UmbNav.Web/App_Plugins/UmbNav/js/umbnav.controller.js b/src/UmbNav.Web/App_Plugins/UmbNav/js/umbnav.controller.js
index eaaf8e1..10b19ae 100644
--- a/src/UmbNav.Web/App_Plugins/UmbNav/js/umbnav.controller.js
+++ b/src/UmbNav.Web/App_Plugins/UmbNav/js/umbnav.controller.js
@@ -2,6 +2,7 @@
     var vm = this;
     var dialogOptions = $scope.model;
     vm.wideMode = Object.toBoolean(dialogOptions.config.hideLabel);
+    vm.allowChildNodes = Object.toBoolean(!dialogOptions.config.hideIncludeChildren);
     vm.items = [];
 
     if (dialogOptions.config.expandOnHoverTimeout > 0) {
@@ -83,6 +84,10 @@
 
     function openSettings(item, callback) {
 
+        if (item != null && item.itemType == null) {
+            item.itemType = 'link';
+        }
+
         var settingsEditor = {
             title: "Settings",
             view: "/App_Plugins/UmbNav/Views/settings.html",
@@ -92,6 +97,7 @@
             allowDisplay: dialogOptions.config.allowDisplay,
             allowCustomClasses: dialogOptions.config.allowCustomClasses,
             allowImageIcon: dialogOptions.config.allowImageIcon,
+            hideIncludeChildren: dialogOptions.config.hideIncludeChildren,
             currentTarget: item,
             submit: function (model) {
                 model.target.description = model.target.url + model.target.anchor;
@@ -145,13 +151,14 @@
             customClasses: data.customClasses,
             imageUrl: data.imageUrl,
             anchor: data.anchor,
-            url: url || "#",
+            url: url,
             children: data.children || [],
             icon: data.icon || "icon-link",
             published: data.published,
             naviHide: data.naviHide,
             culture: data.culture,
-            includeChildNodes: data.includeChildren
+            includeChildNodes: data.includeChildren,
+            itemType: data.itemType
         }
     }
 }
diff --git a/src/UmbNav.Web/App_Plugins/UmbNav/js/umbnav.settings.controller.js b/src/UmbNav.Web/App_Plugins/UmbNav/js/umbnav.settings.controller.js
index 59bbdeb..b96aa18 100644
--- a/src/UmbNav.Web/App_Plugins/UmbNav/js/umbnav.settings.controller.js
+++ b/src/UmbNav.Web/App_Plugins/UmbNav/js/umbnav.settings.controller.js
@@ -11,6 +11,7 @@
     vm.toggleChildren = toggleChildren;
     vm.showAdvanced = false;
     vm.labels = {};
+    vm.labels.itemTypes = {};
     localizationService.localizeMany(['defaultdialogs_openInNewWindow']).then(function (data) {
         vm.labels.openInNewWindow = data[0];
     });
@@ -36,11 +37,20 @@
         vm.labels.imageIconUrl = data[0];
     });
     localizationService.localizeMany(['umbnav_link']).then(function (data) {
-        vm.labels.link = data[0];
+        vm.labels.itemTypes.link = { 'value': 'link', 'label': data[0] };
+    });
+    localizationService.localizeMany(['umbnav_label']).then(function (data) {
+        vm.labels.itemTypes.label = { 'value': 'nolink', 'label': data[0] };
+    });
+    localizationService.localizeMany(['umbnav_menuItem']).then(function (data) {
+        vm.labels.menuItem = data[0];
     });
     localizationService.localizeMany(['umbnav_configuration']).then(function (data) {
         vm.labels.configuration = data[0];
     });
+    localizationService.localizeMany(['umbnav_linkTypeDescription']).then(function (data) {
+        vm.labels.linkTypeDescription = data[0];
+    });
     if (!$scope.model.title) {
         localizationService.localize('defaultdialogs_selectLink').then(function (value) {
             $scope.model.title = value;
@@ -60,7 +70,7 @@
     $scope.showTarget = $scope.model.hideTarget !== true;
     $scope.showDisplay = $scope.model.allowDisplay === true;
     $scope.showNoopener = $scope.model.hideNoopener !== true;
-    $scope.showNoreferrer = $scope.model.hideNoreferrer!== true;
+    $scope.showNoreferrer = $scope.model.hideNoreferrer !== true;
     $scope.showAnchor = $scope.model.hideAnchor !== true;
     $scope.showIncludeChildren = $scope.model.hideIncludeChildren !== true;
     $scope.showCustomClasses = $scope.model.allowCustomClasses === true;
@@ -131,7 +141,7 @@
         vm.openInNewWindow = $scope.model.target.target === '_blank';
         vm.hideLoggedIn = $scope.model.target.hideLoggedIn;
         vm.hideLoggedOut = $scope.model.target.hideLoggedOut;
-        vm.includeChildren = $scope.model.target.includeChildren;
+        vm.includeChildren = $scope.model.target.includeChildNodes;
         vm.showNoopener = $scope.model.target.noopener === 'noopener' && $scope.model.target.id === null || $scope.model.target.udi === null;
         vm.showNoreferrer = $scope.model.target.noreferrer === 'noreferrer' && $scope.model.target.id === null || $scope.model.target.udi === null;
     } else if (dialogOptions.anchors) {
diff --git a/src/UmbNav.Web/App_Plugins/UmbNav/lang/en-us.xml b/src/UmbNav.Web/App_Plugins/UmbNav/lang/en-us.xml
index c6bd046..11520c2 100644
--- a/src/UmbNav.Web/App_Plugins/UmbNav/lang/en-us.xml
+++ b/src/UmbNav.Web/App_Plugins/UmbNav/lang/en-us.xml
@@ -22,5 +22,11 @@
 		<key alias="ImageIconUrl">Image/Icon Url, id, udi or GUID</key>
 		<key alias="configuration">Advanced Configuration</key>
 		<key alias="link">Link</key>
+		<key alias="label">Label</key>
+		<key alias="menuItem">Menu Item</key>
+		<key alias="title">Title</key>
+		<key alias="itemType">Menu Item Type</key>
+		<key alias="linkTypeDescription">Select menu item type</key>
+		<key alias="linkTypeDescription">Select menu item type</key>
 	</area>
 </language>
\ No newline at end of file
diff --git a/src/UmbNav.Web/App_Plugins/UmbNav/views/editor.html b/src/UmbNav.Web/App_Plugins/UmbNav/views/editor.html
index ec87cdb..54a4088 100644
--- a/src/UmbNav.Web/App_Plugins/UmbNav/views/editor.html
+++ b/src/UmbNav.Web/App_Plugins/UmbNav/views/editor.html
@@ -42,7 +42,7 @@
                     <i ng-if="item.icon" class="umb-node-preview__icon {{ item.icon }}" aria-hidden="true"></i>
                     <div class="umb-node-preview__content">
 
-                        <div class="umb-node-preview__name" ng-attr-title="{{item.title || item.name}}">{{ item.title || item.name }} <span ng-if="item.includeChildNodes" class="umbnav-label umbnav-label-primary"><localize key="umbnav_includesChildNodes"></localize></span></div>
+                        <div class="umb-node-preview__name" ng-attr-title="{{item.title || item.name}}">{{ item.title || item.name }} <span ng-if="item.includeChildNodes && vm.allowChildNodes" class="umbnav-label umbnav-label-primary"><localize key="umbnav_includesChildNodes"></localize></span></div>
                         <div class="umb-node-preview__description" ng-if="item.description">{{ item.description }}</div>
                     </div>
                 </div>
diff --git a/src/UmbNav.Web/App_Plugins/UmbNav/views/settings.html b/src/UmbNav.Web/App_Plugins/UmbNav/views/settings.html
index eb98012..2d2acb5 100644
--- a/src/UmbNav.Web/App_Plugins/UmbNav/views/settings.html
+++ b/src/UmbNav.Web/App_Plugins/UmbNav/views/settings.html
@@ -11,96 +11,120 @@
 
         <umb-editor-container class="block-form">
             <umb-box>
-                <umb-box-header ng-if="!vm.loading" title="{{vm.labels.link}}"></umb-box-header>
+                <umb-box-header ng-if="!vm.loading" title="{{vm.labels.menuItem}}"></umb-box-header>
                 <umb-box-content>
-                    <div ng-class="{'flex': showAnchor}">
-
-                        <umb-control-group label="@defaultdialogs_urlLinkPicker" class="umb-linkpicker__url">
-                            <input type="text"
-                                   style="margin-right: 10px;"
-                                   localize="placeholder"
-                                   placeholder="@general_url"
-                                   class="umb-property-editor umb-textstring"
-                                   ng-model="model.target.url"
-                                   umb-auto-focus
-                                   ng-disabled="model.target.id || model.target.udi" />
+                    <umb-control-group label="@umbnav_itemType">
+                        <div class="umb-property-editor">
+                            <div class=" flex items-center">
+                                <select ng-model="model.target.itemType">
+                                    <option value="{{vm.labels.itemTypes.link.value}}">{{vm.labels.itemTypes.link.label}}</option>
+                                    <option value="{{vm.labels.itemTypes.label.value}}">{{vm.labels.itemTypes.label.label}}</option>
+                                </select>
+                                <div class="ml2">
+                                    {{vm.labels.linkTypeDescription}}
+                                </div>
+                            </div>
+                        </div>
+                    </umb-control-group>
+                    <div ng-if="model.target.itemType == 'link'">
+                        <div ng-class="{'flex': showAnchor}">
+
+                            <umb-control-group label="@defaultdialogs_urlLinkPicker" class="umb-linkpicker__url">
+                                <input type="text"
+                                       style="margin-right: 10px;"
+                                       localize="placeholder"
+                                       placeholder="@general_url"
+                                       class="umb-property-editor umb-textstring"
+                                       ng-model="model.target.url"
+                                       umb-auto-focus
+                                       ng-disabled="model.target.id || model.target.udi" />
+                            </umb-control-group>
+
+                            <umb-control-group label="@defaultdialogs_anchorLinkPicker" class="umb-linkpicker__anchor" ng-if="showAnchor">
+                                <input type="text"
+                                       list="anchors"
+                                       localize="placeholder"
+                                       placeholder="@placeholders_anchor"
+                                       class="umb-property-editor umb-textstring"
+                                       ng-model="model.target.anchor" />
+
+                                <datalist id="anchors">
+                                    <option value="{{a}}" ng-repeat="a in anchorValues"></option>
+                                </datalist>
+                            </umb-control-group>
+                        </div>
+                        <umb-control-group label="@general_name"
+                                           ng-if="model.target.name">
+                            {{model.target.name}}
                         </umb-control-group>
 
-                        <umb-control-group label="@defaultdialogs_anchorLinkPicker" class="umb-linkpicker__anchor" ng-if="showAnchor">
+                        <umb-control-group label="@defaultdialogs_nodeNameLinkPicker">
                             <input type="text"
-                                   list="anchors"
                                    localize="placeholder"
-                                   placeholder="@placeholders_anchor"
+                                   placeholder="@placeholders_entername"
                                    class="umb-property-editor umb-textstring"
-                                   ng-model="model.target.anchor" />
-
-                            <datalist id="anchors">
-                                <option value="{{a}}" ng-repeat="a in anchorValues"></option>
-                            </datalist>
+                                   ng-model="model.target.title"
+                                   ng-required="!model.target.name" />
                         </umb-control-group>
-                    </div>
-                    <umb-control-group label="@general_name"
-                                       ng-if="model.target.name">
-                        {{model.target.name}}
-                    </umb-control-group>
-
-                    <umb-control-group label="@defaultdialogs_nodeNameLinkPicker">
-                        <input type="text"
-                               localize="placeholder"
-                               placeholder="@placeholders_entername"
-                               class="umb-property-editor umb-textstring"
-                               ng-model="model.target.title"
-                               ng-required="!model.target.name" />
-                    </umb-control-group>
 
-                    <div class="umb-control-group">
-                        <h5>
-                            <localize key="defaultdialogs_linkToPage">Link to page</localize>
-                        </h5>
-
-                        <div ng-hide="miniListView">
-                            <umb-tree-search-box hide-search-callback="hideSearch"
-                                                 search-callback="onSearchResults"
-                                                 search-from-id="{{searchInfo.searchFromId}}"
-                                                 search-from-name="{{searchInfo.searchFromName}}"
-                                                 datatype-key="{{searchInfo.dataTypeKey}}"
-                                                 show-search="{{searchInfo.showSearch}}"
-                                                 section="{{section}}">
-                            </umb-tree-search-box>
-
-                            <br />
-
-                            <umb-tree-search-results ng-if="searchInfo.showSearch"
-                                                     results="searchInfo.results"
-                                                     select-result-callback="selectResult">
-                            </umb-tree-search-results>
-
-                            <div ng-hide="searchInfo.showSearch">
-                                <umb-tree section="content"
-                                          hideheader="true"
-                                          hideoptions="true"
-                                          api="dialogTreeApi"
-                                          on-init="onTreeInit()"
-                                          enablelistviewexpand="true"
-                                          isdialog="true"
-                                          enablecheckboxes="true"
-                                          customtreeparams="{{customTreeParams}}">
-                                </umb-tree>
+                        <div class="umb-control-group">
+                            <h5>
+                                <localize key="defaultdialogs_linkToPage">Link to page</localize>
+                            </h5>
+
+                            <div ng-hide="miniListView">
+                                <umb-tree-search-box hide-search-callback="hideSearch"
+                                                     search-callback="onSearchResults"
+                                                     search-from-id="{{searchInfo.searchFromId}}"
+                                                     search-from-name="{{searchInfo.searchFromName}}"
+                                                     datatype-key="{{searchInfo.dataTypeKey}}"
+                                                     show-search="{{searchInfo.showSearch}}"
+                                                     section="{{section}}">
+                                </umb-tree-search-box>
+
+                                <br />
+
+                                <umb-tree-search-results ng-if="searchInfo.showSearch"
+                                                         results="searchInfo.results"
+                                                         select-result-callback="selectResult">
+                                </umb-tree-search-results>
+
+                                <div ng-hide="searchInfo.showSearch">
+                                    <umb-tree section="content"
+                                              hideheader="true"
+                                              hideoptions="true"
+                                              api="dialogTreeApi"
+                                              on-init="onTreeInit()"
+                                              enablelistviewexpand="true"
+                                              isdialog="true"
+                                              enablecheckboxes="true"
+                                              customtreeparams="{{customTreeParams}}">
+                                    </umb-tree>
+                                </div>
                             </div>
-                        </div>
 
-                        <umb-mini-list-view ng-if="miniListView"
-                                            node="miniListView"
-                                            entity-type="Document"
-                                            on-select="selectListViewNode(node)"
-                                            on-close="closeMiniListView()">
-                        </umb-mini-list-view>
+                            <umb-mini-list-view ng-if="miniListView"
+                                                node="miniListView"
+                                                entity-type="Document"
+                                                on-select="selectListViewNode(node)"
+                                                on-close="closeMiniListView()">
+                            </umb-mini-list-view>
 
+                        </div>
+                    </div>
+                    <div ng-if="model.target.itemType == 'nolink'">
+                        <umb-control-group label="@umbnav_title">
+                            <input type="text"
+                                   localize="placeholder"
+                                   placeholder="@placeholders_entername"
+                                   class="umb-property-editor umb-textstring"
+                                   ng-model="model.target.title"
+                                   ng-required="!model.target.name" />
+                        </umb-control-group>
                     </div>
-
                 </umb-box-content>
             </umb-box>
-            <umb-box>
+            <umb-box ng-if="model.target.itemType == 'link'">
                 <umb-box-header ng-if="!vm.loading" title="{{vm.labels.configuration}}" ng-click="vm.showAdvanced = !vm.showAdvanced" style="cursor: pointer;">
                     <i class="icon icon-navigation-up" ng-if="vm.showAdvanced" title="expand"></i>
                     <i class="icon icon-navigation-down" ng-if="!vm.showAdvanced" title="collapse"></i>
@@ -131,7 +155,6 @@ <h5>
                                       text="{{vm.labels.includeChildNodes}}">
                         </umb-checkbox>
                     </umb-control-group>
-
                     <umb-control-group ng-if="showNoopener || showNoreferrer" label="@umbnav_seo">
                         <umb-checkbox ng-if="showNoopener" model="vm.showNoopener"
                                       on-change="vm.toggleshowNoopener(model, value)"