help: Add external link icon as suffix in sidebar for external links.

Fixes https://chat.zulip.org/#narrow/channel/19-documentation/topic/left.20sidebar.20icon.20for.20external.20links.3F/with/2257078

These links should also open in a new window.
This commit is contained in:
Shubham Padia
2025-09-09 07:29:30 +00:00
committed by Tim Abbott
parent c3fbe00eb0
commit f426936c6c
2 changed files with 35 additions and 0 deletions

View File

@@ -94,6 +94,11 @@ export default defineConfig({
{
label: "Zulip homepage",
link: "https://zulip.com",
attrs: {
class: "external-icon-sidebar",
target: "_blank",
rel: "noopener noreferrer",
},
},
{
label: "Help center home",
@@ -109,10 +114,20 @@ export default defineConfig({
{
label: "Choosing a team chat app",
link: "https://blog.zulip.com/2024/11/04/choosing-a-team-chat-app/",
attrs: {
class: "external-icon-sidebar",
target: "_blank",
rel: "noopener noreferrer",
},
},
{
label: "Why Zulip",
link: "https://zulip.com/why-zulip/",
attrs: {
class: "external-icon-sidebar",
target: "_blank",
rel: "noopener noreferrer",
},
},
"trying-out-zulip",
{
@@ -371,6 +386,11 @@ export default defineConfig({
{
label: "Download apps for every platform",
link: "https://zulip.com/apps/",
attrs: {
class: "external-icon-sidebar",
target: "_blank",
rel: "noopener noreferrer",
},
},
{
label: "Mobile app installation guides",

View File

@@ -253,3 +253,18 @@
footer {
font-size: 0.85em;
}
.external-icon-sidebar {
display: inline-flex;
align-items: center;
}
.external-icon-sidebar::after {
content: "";
width: 1em;
height: 1em;
margin-left: 0.4em;
background: currentcolor;
mask: url("../../../web/shared/icons/external-link.svg") no-repeat center /
contain;
}