From 88f53dcdbc77972017c5a52c305a67e85b4e57e7 Mon Sep 17 00:00:00 2001
From: dario-piotrowicz <dario.piotrowicz@gmail.com>
Date: Thu, 16 Jun 2022 08:16:52 +0100
Subject: [PATCH] feat(docs-infra): add open_in_new icon to external nav-item
 links (#46384)

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
---
 .../app/layout/nav-item/nav-item.component.html  |  2 +-
 aio/src/styles/1-layouts/sidenav/_sidenav.scss   | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/aio/src/app/layout/nav-item/nav-item.component.html b/aio/src/app/layout/nav-item/nav-item.component.html
index 0ec330e0b85..ce330468ebc 100644
--- a/aio/src/app/layout/nav-item/nav-item.component.html
+++ b/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>
 
diff --git a/aio/src/styles/1-layouts/sidenav/_sidenav.scss b/aio/src/styles/1-layouts/sidenav/_sidenav.scss
index d17b79ece94..b805d9e9171 100644
--- a/aio/src/styles/1-layouts/sidenav/_sidenav.scss
+++ b/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;