From 0739550acdb4615f75a44d2b0199a5121b34caf0 Mon Sep 17 00:00:00 2001
From: Tobias Fredriksson <tobias.fredriksson@officeitpartner.se>
Date: Fri, 30 Aug 2019 11:18:26 +0200
Subject: [PATCH] Adds support for background image & images as seen on
 materializecss website for New-UDSideNav. Issue #713.

---
 .../Components/ud-navigation.jsx              | 33 +++++++++++++++----
 .../Cmdlets/NewSideNavCommand.cs              |  7 ++++
 src/UniversalDashboard/Models/SideNav.cs      |  6 ++++
 3 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/UniversalDashboard.Materialize/Components/ud-navigation.jsx b/src/UniversalDashboard.Materialize/Components/ud-navigation.jsx
index d9074ad1..9990fa40 100644
--- a/src/UniversalDashboard.Materialize/Components/ud-navigation.jsx
+++ b/src/UniversalDashboard.Materialize/Components/ud-navigation.jsx
@@ -153,6 +153,8 @@ class UDSideNavItem extends React.Component {
             icon,
             href = '#!',
             waves,
+			image,
+			background,
             text,
             name,
             ...props
@@ -161,16 +163,33 @@ class UDSideNavItem extends React.Component {
             subheader: subheader,
             'waves-effect': waves
           };
-
+		  
           var linkText = text ? text : name;
-      
           return (
             <li {...props}>
-              {(
-                <a className={cx(linkClasses)} href={href} onClick={this.onItemClick.bind(this)}>
-                  {icon && <UdIcon icon={icon} style={{width: '30px'}}/>}   {linkText}
-                </a>
-              )}
+			{(background != '' && background != null) &&
+				<div class='user-view'><div class='background'><img src={background}/></div>
+				{image &&
+					<a className={cx(linkClasses)} href={href} onClick={this.onItemClick.bind(this)}><img src={image} class='circle'/></a>
+				}
+				<a className={cx(linkClasses)} href={href} onClick={this.onItemClick.bind(this)}>
+					{icon && <UdIcon icon={icon} style={{width: '30px'}}/>}   {linkText}
+				</a>
+				</div>
+			}
+			{((background == '' || background == null) && (image != null && image != '')) &&
+				<div class='user-view'>
+					<a className={cx(linkClasses)} href={href} onClick={this.onItemClick.bind(this)}><img src={image} class='circle'/></a>
+				<a className={cx(linkClasses)} href={href} onClick={this.onItemClick.bind(this)}>
+					{icon && <UdIcon icon={icon} style={{width: '30px'}}/>}   {linkText}
+				</a>
+				</div>
+			}
+			{((background == '' || background == null) && (image == null || image == '')) &&
+				<a className={cx(linkClasses)} href={href} onClick={this.onItemClick.bind(this)}>
+					{icon && <UdIcon icon={icon} style={{width: '30px'}}/>}   {linkText}
+				</a>
+			}
             </li>
           );
     }
diff --git a/src/UniversalDashboard/Cmdlets/NewSideNavCommand.cs b/src/UniversalDashboard/Cmdlets/NewSideNavCommand.cs
index 12a67295..efb5c6a6 100644
--- a/src/UniversalDashboard/Cmdlets/NewSideNavCommand.cs
+++ b/src/UniversalDashboard/Cmdlets/NewSideNavCommand.cs
@@ -55,6 +55,11 @@ public class NewSidNavItemCommand : ComponentCmdlet
         [Alias("PageName")]
         public string Url { get; set; }
 
+        [Parameter()]
+        public string Image { get; set; }
+        [Parameter()]
+        public string Background { get; set; }
+
         [Parameter(ParameterSetName = "SubHeader")]
         [Parameter(ParameterSetName = "Url")]
         [Parameter(ParameterSetName = "OnClick")]
@@ -77,6 +82,8 @@ protected override void BeginProcessing()
                 SubHeader = SubHeader.IsPresent,
                 Children = GetItemsFromScriptBlock<SideNavItem>(Children)?.ToArray(),
                 Text = Text,
+                Image = Image,
+                Background = Background,
                 Url = Url,
                 Icon = Icon.GetIconName(),
                 Callback = OnClick.TryGenerateEndpoint(Id, SessionState)
diff --git a/src/UniversalDashboard/Models/SideNav.cs b/src/UniversalDashboard/Models/SideNav.cs
index a2dc154e..86d8a3b7 100644
--- a/src/UniversalDashboard/Models/SideNav.cs
+++ b/src/UniversalDashboard/Models/SideNav.cs
@@ -31,6 +31,12 @@ public class SideNavItem : Component
         [JsonProperty("icon")]
         public string Icon { get; set; }
 
+        [JsonProperty("image")]
+        public string Image { get; set; }
+
+        [JsonProperty("background")]
+        public string Background { get; set; }
+
         [JsonProperty("text")]
         public string Text { get; set; }