feat(docs-infra): add open_in_new icon to external nav-item links (#4…

…6384)

add a mat open_in_new icon to the blog external link present in the
left sidenav on smaller screens so that it can be distinguished from
the other (/internal) links

this is a continuation of #45876

PR Close #46384

aio/src/app/layout/nav-item/nav-item.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="!node.children">
   <a href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
     class="vertical-menu-item">
-    <span>{{node.title}}</span>
+    <span class="vertical-menu-item-text">{{node.title}}</span>
   </a>
 </div>
 

aio/src/styles/1-layouts/sidenav/_sidenav.scss

@@ -91,6 +91,22 @@ aio-nav-menu {
       }
     }
 
+    a.vertical-menu-item {
+      &[href^="http:"],
+      &[href^="https:"] {
+        .vertical-menu-item-text {
+          display: inline-flex;
+          align-items: center;
+          &::after {
+            content: "\e89e"; // codepoint for "open_in_new"
+            margin-left: 0.3rem;
+            line-height: normal;
+            font-family: "Material Icons";
+          }
+        }
+      }
+    }
+
     button.vertical-menu-item {
       border: none;
       background-color: transparent;