From 5734a7bc7aa059be5a544f6493940367facc4b65 Mon Sep 17 00:00:00 2001
From: Mike Sawka <mike.sawka@gmail.com>
Date: Wed, 27 Mar 2024 13:17:56 -0700
Subject: [PATCH] add offsite icon to sidebar links that take you off the app
 (#508)

---
 src/app/sidebar/main.less |  3 +++
 src/app/sidebar/main.tsx  | 10 ++++++++++
 2 files changed, 13 insertions(+)

diff --git a/src/app/sidebar/main.less b/src/app/sidebar/main.less
index 4296e1a8..8c39738f 100644
--- a/src/app/sidebar/main.less
+++ b/src/app/sidebar/main.less
@@ -136,6 +136,9 @@
             .actions {
                 .positional-icon-visible;
             }
+            .link-offsite {
+                .positional-icon-visible;
+            }
         }
 
         &:not(:hover) .status-indicator {
diff --git a/src/app/sidebar/main.tsx b/src/app/sidebar/main.tsx
index 18e9eb49..1ed22ce6 100644
--- a/src/app/sidebar/main.tsx
+++ b/src/app/sidebar/main.tsx
@@ -334,12 +334,22 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
                                     frontIcon={<i className="fa-sharp fa-regular fa-circle-question icon" />}
                                     contents="Documentation"
                                     onClick={() => openLink("https://docs.waveterm.dev")}
+                                    endIcons={[
+                                        <CenteredIcon key="offsite" className="link-offsite hoverEffect">
+                                            <i className="fa-sharp fa-solid fa-arrow-up-right-from-square"></i>
+                                        </CenteredIcon>,
+                                    ]}
                                 />
                                 <SideBarItem
                                     key="discord"
                                     frontIcon={<i className="fa-brands fa-discord icon" />}
                                     contents="Discord"
                                     onClick={() => openLink("https://discord.gg/XfvZ334gwU")}
+                                    endIcons={[
+                                        <CenteredIcon key="offsite" className="link-offsite hoverEffect">
+                                            <i className="fa-sharp fa-solid fa-arrow-up-right-from-square"></i>
+                                        </CenteredIcon>,
+                                    ]}
                                 />
                             </div>
                         </div>