fix TOC item clicks, dim deprecated items, minimal deprecated entities

src/components/Sidebar.module.scss

@@ -148,3 +148,9 @@
         border-left-color: $green;
     }
 }
+
+[data-deprecated='true'] {
+    code {
+        opacity: .5;
+    }
+}

src/templates/Typedoc/Entities.jsx

@@ -145,13 +145,9 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
             className={styles.property}
             data-private={!isPublic}
             data-deprecated={!!deprecation}
+            id={`${parentAnchor}-${slugify(name)}`}
         >
-            <h3
+            <h3 className={styles.propertyName}>{name}</h3>
-                id={`${parentAnchor}-${slugify(name)}`}
-                className={styles.propertyName}
-            >
-                {name}
-            </h3>
 
             <div
                 className={styles.propertyType}
@@ -167,7 +163,7 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
                 </div>
             )}
 
-            {comment && (
+            {comment && !deprecation && (
                 <div className={styles.propertyDescription}>
                     {comment.text || comment.shortText}
                 </div>

src/templates/Typedoc/Entities.module.scss

@@ -32,6 +32,10 @@
             opacity: .5;
         }
 
+        code {
+            opacity: 1;
+        }
+
         .sourceLink {
             display: none;
         }
@@ -107,10 +111,10 @@
 
 .deprecation {
     font-size: $font-size-small;
-    margin-bottom: $spacer / 4;
+    margin-top: $spacer / 4;
 
     strong {
-        color: $red;
+        color: $brand-grey-light;
     }
 }
 

src/templates/Typedoc/Toc.jsx

@@ -11,13 +11,22 @@ export default class Toc extends PureComponent {
     }
 
     subItems = (children, parentName) =>
-        children.filter(filterByKindOfProperty).map(({ name }) => (
+        children.filter(filterByKindOfProperty).map(({ name, decorators }) => {
-            <li key={name}>
+            const deprecation = (decorators || []).filter(
-                <a href={`#${parentName}-${slugify(name)}`}>
+                ({ name }) => name === 'deprecated'
-                    <code>{name}</code>
+            )[0] // Assuming deprecated annotation
-                </a>
+
-            </li>
+            return (
-        ))
+                <li key={name}>
+                    <a
+                        data-deprecated={!!deprecation}
+                        href={`#${parentName}-${slugify(name)}`}
+                    >
+                        <code>{name}</code>
+                    </a>
+                </li>
+            )
+        })
 
     items = this.props.data.map(({ name, children }) => {
         let subIds = []