From 114eacece593cb79d71bcb444a916af9e34b8fbb Mon Sep 17 00:00:00 2001 From: Hichem Fantar 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); +}