Add new Badge parameter for sidebar items

config.json

@@ -42,6 +42,27 @@
             "text": "Components",
             "link": "/components/"
         },
+        {
+            "badge": "New",
+            "badge_variant": "Note",
+            "text": "Document Title",
+            "link": "#"
+        },
+        {
+            "badge": "Outdated",
+            "badge_variant": "Warning",
+            "text": "Document Title",
+            "link": "#"
+        },
+        {
+            "badge": "Deprecated",
+            "badge_variant": "Dangerous",
+            "text": "Document Title",
+            "link": "#"
+        },
+        {
+            "heading": "Heading"
+        },
         {
             "text": "Document Title",
             "link": "#"

src/components/Sidebar.astro

@@ -6,14 +6,42 @@ import { SiteSettings, SidebarItems } from '@config'
 <div class="sidebar">
     <div class="desktop-s">
         {SidebarItems.map((item) => (
-            item.heading ? <h2>{item.heading}</h2> : <a href={SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link}>{item.text}</a>
+            item.heading ?
+                <h2>{item.heading}</h2>
+                :
+                <a href={
+                    SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link
+                }>
+                    {item.text}
+                    {() => {
+                        if (item.badge === undefined) {
+                            return null
+                        } else {
+                            return <span class={'sidebar-badge badge-variant-' + item.badge_variant}>{item.badge}</span>
+                        }
+                    }}
+                </a>
         ))}    
     </div>
 
     <details class="mobile-s">
         <summary>Menu</summary>
         {SidebarItems.map((item) => (
-            item.heading ? <h2>{item.heading}</h2> : <a href={SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link}>{item.text}</a>
+            item.heading ?
+                <h2>{item.heading}</h2>
+                :
+                <a href={
+                    SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link
+                }>
+                    {item.text}
+                    {() => {
+                        if (item.badge === undefined) {
+                            return null
+                        } else {
+                            return <span class={'sidebar-badge badge-variant-' + item.badge_variant}>{item.badge}</span>
+                        }
+                    }}
+                </a>
         ))}    
     </details>
 </div>
@@ -23,4 +51,14 @@ import { SiteSettings, SidebarItems } from '@config'
 var CurrentURLPath = window.location.pathname
 document.querySelector('.sidebar a[href="' + SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + CurrentURLPath + '"]').style.background = '#323232' 
 document.querySelector('.sidebar .mobile-s a[href="' + SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + CurrentURLPath + '"]').style.background = '#323232' 
-</script>
+</script>
+
+<!-- { 
+    ()=> {
+      if (item.badge === "external") {
+        return <p>Log Out</p>
+      } else {
+        return <p>Sign In</p>
+      }
+    }
+} -->

src/styles/index.scss

@@ -19,6 +19,13 @@ a {
     text-decoration: underline;
 }
 
+ul {
+    padding-left: 24px;
+    li {
+        padding: 4px 0px;
+    }
+}
+
 table {
     font-family: Arial, Helvetica, sans-serif;
     border-collapse: collapse;
@@ -263,19 +270,48 @@ header {
 
             h2 {
                 margin: 12px 0px 12px 12px;
+                font-size: 18px;
+                cursor: default;
             }
 
             a {
                 text-decoration: none;
                 font-size: 14px;
                 background: transparent;
-                color: white;
+                color: rgba(255, 255, 255, 0.75);
                 border-radius: 6px;
                 padding: 8px 16px;
                 border: 1px transparent solid;
                 &:hover {
                     border-color: #323232;
                 }
+                .sidebar-badge {
+                    background: transparent;
+                    border-radius: 6px;
+                    padding: 2px 4px;
+                    float: right;
+                    display: block;
+                    margin: -3px -6px 0px 0px;
+                    border: 1px white solid;
+                    font-size: 12px;
+                    transform: translate(0px, 1px);
+                }
+                .badge-variant-Warning {
+                    border-color: var(--aside-warning);
+                    color: var(--aside-warning);
+                }
+                .badge-variant-Note {
+                    border-color: var(--aside-note);
+                    color: var(--aside-note);
+                }
+                .badge-variant-Success {
+                    border-color: var(--aside-success);
+                    color: var(--aside-success);
+                }
+                .badge-variant-Dangerous {
+                    border-color: var(--aside-dangerous);
+                    color: var(--aside-dangerous);
+                }
             }
         }