From 114eacece593cb79d71bcb444a916af9e34b8fbb Mon Sep 17 00:00:00 2001
From: Hichem Fantar <hichemfantar2049@gmail.com>
Date: Mon, 17 Jun 2024 16:17:52 +0100
Subject: [PATCH] chore: Update header navigation with Discord server link

---
 docusaurus.config.ts |  6 ++++++
 src/css/custom.css   | 15 +++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 41b9867..5085186 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -84,6 +84,12 @@ const config: Config = {
 				//   label: "Blog",
 				//   position: "left",
 				// },
+				{
+					href: "https://discord.com/invite/5rJgQTnV4s",
+					position: "right",
+					className: "header-discord-link",
+					"aria-label": "Discord server",
+				},
 				{
 					href: "https://github.com/open-webui/open-webui",
 					position: "right",
diff --git a/src/css/custom.css b/src/css/custom.css
index e3ba23f..7b4e7f3 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -600,3 +600,18 @@ td {
 .header-github-link:hover::before {
 	background-color: var(--ifm-navbar-link-hover-color);
 }
+
+.header-discord-link::before {
+	content: "";
+	width: 24px;
+	height: 24px;
+	display: flex;
+	background-color: var(--ifm-navbar-link-color);
+	mask-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19.73 4.87a18.2 18.2 0 0 0-4.6-1.44c-.21.4-.4.8-.58 1.21-1.69-.25-3.4-.25-5.1 0-.18-.41-.37-.82-.59-1.2-1.6.27-3.14.75-4.6 1.43A19.04 19.04 0 0 0 .96 17.7a18.43 18.43 0 0 0 5.63 2.87c.46-.62.86-1.28 1.2-1.98-.65-.25-1.29-.55-1.9-.92.17-.12.32-.24.47-.37 3.58 1.7 7.7 1.7 11.28 0l.46.37c-.6.36-1.25.67-1.9.92.35.7.75 1.35 1.2 1.98 2.03-.63 3.94-1.6 5.64-2.87.47-4.87-.78-9.09-3.3-12.83ZM8.3 15.12c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.89 2.27-2 2.27Zm7.4 0c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.88 2.27-2 2.27Z' class=''%3E%3C/path%3E%3C/svg%3E");
+	transition: background-color var(--ifm-transition-fast)
+		var(--ifm-transition-timing-default);
+}
+
+.header-discord-link:hover::before {
+	background-color: var(--ifm-navbar-link-hover-color);
+}