Merge pull request #38 from Redot-Engine/feature/sidebar-mobile-impro…

…vements Refactor and Enhance MobileSidebar UI
Redot-Engine · Jan 10, 2025 · 14dc0c9 · 14dc0c9
2 parents b686df6 + 995a078
commit 14dc0c9
Show file tree

Hide file tree

Showing 35 changed files with 98 additions and 27 deletions.
diff --git a/components/MobileSidebar.tsx b/components/MobileSidebar.tsx
@@ -1,15 +1,20 @@
 import {
   Sheet,
+  SheetClose,
   SheetContent,
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
 import Link from "next/link";
 import { header } from "@/constants/header";
-import { IconMenu } from "@tabler/icons-react";
+import { IconArrowRight, IconMenu, IconX } from "@tabler/icons-react";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+import { socialsLinks } from "@/constants/socials";
 
 export const MobileSidebar = () => {
   const t = useTranslations("header");
@@ -19,28 +24,57 @@ export const MobileSidebar = () => {
       <SheetTrigger aria-label="Open Menu">
         <IconMenu />
       </SheetTrigger>
-      <SheetContent side="left">
-        <SheetTitle className="mb-4 flex flex-col gap-2 text-xl font-medium">
-          <Image
-            src="/logo.webp"
-            alt="Redot Engine Logo"
-            width={30}
-            height={30}
-            style={{ filter: "invert(100%)" }}
-          />
-          Redot Engine
+      <SheetContent className="max-w-[350px] rounded-r-md pb-6" side="left">
+        <SheetTitle className="mb-4">
+          <div className="flex flex-row items-center justify-between pb-6">
+            <Image
+              src="/logo_large.svg"
+              alt="Redot Engine Logo"
+              width={160}
+              height={50}
+              className="invert"
+              priority
+            />
+            <SheetPrimitive.Close className="rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+              <IconX className="h-5 w-5" />
+              <span className="sr-only">Close</span>
+            </SheetPrimitive.Close>
+          </div>
+          <Separator />
         </SheetTitle>
-        <div className="flex flex-col items-start justify-start gap-1">
-          {header.map((link) => (
-            <Link key={link.label} href={link.href}>
-              <span className="block text-lg">{t(link.label)}</span>
-            </Link>
-          ))}
-          <Button size="sm" asChild>
-            <Link className="mt-2 w-full" href="/download">
-              {t("downloadButton")}
-            </Link>
-          </Button>
+        <div className="flex h-full flex-col items-start justify-between pb-32">
+          <div className="flex w-full flex-col">
+            {header.map((link) => (
+              <SheetClose key={link.label} asChild>
+                <Link
+                  href={link.href}
+                  className="flex items-center justify-between py-2 text-base font-medium hover:underline sm:px-4"
+                  target={link.newTab ? "_blank" : "_self"}
+                  rel={link.newTab ? "noopener noreferrer" : undefined}
+                >
+                  {t(link.label)}
+                  {link.newTab && <IconArrowRight className="h-4 w-4" />}
+                </Link>
+              </SheetClose>
+            ))}
+          </div>
+
+          <div className="flex w-full flex-col gap-4">
+            <SheetClose asChild>
+              <Button variant="outline" asChild>
+                <Link className="w-full" href={socialsLinks.discord}>
+                  {t("discordButton")}
+                </Link>
+              </Button>
+            </SheetClose>
+            <SheetClose asChild>
+              <Button asChild>
+                <Link className="w-full" href="/download">
+                  {t("downloadButton")}
+                </Link>
+              </Button>
+            </SheetClose>
+          </div>
         </div>
       </SheetContent>
     </Sheet>

diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
@@ -3,7 +3,6 @@
 import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -65,10 +64,6 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
     </SheetPrimitive.Content>
   </SheetPortal>
 ));

diff --git a/locales/bg/translation.json b/locales/bg/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine сега е стабилен!"
     },
     "downloadButton": "Изтегли",
+    "discordButton": "Присъединете се към Discord",
     "links": {
       "documentation": "Документация",
       "blog": "Блог",

diff --git a/locales/cs/translation.json b/locales/cs/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine je nyní stabilní!"
     },
     "downloadButton": "Stáhnout",
+    "discordButton": "Připojte se na Discord",
     "links": {
       "documentation": "Dokumentace",
       "blog": "Blog",

diff --git a/locales/da/translation.json b/locales/da/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine er nu stabil!"
     },
     "downloadButton": "Download",
+    "discordButton": "Deltag i Discord",
     "links": {
       "documentation": "Dokumentation",
       "blog": "Blog",

diff --git a/locales/de/translation.json b/locales/de/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine ist jetzt stabil!"
     },
     "downloadButton": "Herunterladen",
+    "discordButton": "Tritt Discord bei",
     "links": {
       "documentation": "Dokumentation",
       "blog": "Blog",

diff --git a/locales/el/translation.json b/locales/el/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Η Redot Engine είναι πλέον σταθερή!"
     },
     "downloadButton": "Λήψη",
+    "discordButton": "Συμμετάσχετε στο Discord",
     "links": {
       "documentation": "Τεκμηρίωση",
       "blog": "Blog",

diff --git a/locales/en-GB/translation.json b/locales/en-GB/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine is now stable!"
     },
     "downloadButton": "Download",
+    "discordButton": "Join Discord",
     "links": {
       "documentation": "Documentation",
       "blog": "Blog",

diff --git a/locales/en/translation.json b/locales/en/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine is now stable!"
     },
     "downloadButton": "Download",
+    "discordButton": "Join Discord",
     "links": {
       "documentation": "Documentation",
       "blog": "Blog",

diff --git a/locales/es-LA/translation.json b/locales/es-LA/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "¡Redot Engine ya es estable!"
     },
     "downloadButton": "Descargar",
+    "discordButton": "Únete a Discord",
     "links": {
       "documentation": "Documentación",
       "blog": "Blog",

diff --git a/locales/es/translation.json b/locales/es/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "¡Redot Engine ya es estable!"
     },
     "downloadButton": "Descargar",
+    "discordButton": "Únete a Discord",
     "links": {
       "documentation": "Documentación",
       "blog": "Blog",

diff --git a/locales/fi/translation.json b/locales/fi/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine on nyt vakaa!"
     },
     "downloadButton": "Lataa",
+    "discordButton": "Liity Discordiin",
     "links": {
       "documentation": "Dokumentaatio",
       "blog": "Blogi",

diff --git a/locales/fr/translation.json b/locales/fr/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine est maintenant stable !"
     },
     "downloadButton": "Télécharger",
+    "discordButton": "Rejoignez Discord",
     "links": {
       "documentation": "Documentation",
       "blog": "Blog",

diff --git a/locales/hi/translation.json b/locales/hi/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine अब स्थिर है!"
     },
     "downloadButton": "डाउनलोड",
+    "discordButton": "डिस्कॉर्ड से जुड़ें",
     "links": {
       "documentation": "दस्तावेज़",
       "blog": "ब्लॉग",

diff --git a/locales/hr/translation.json b/locales/hr/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine je sada stabilan!"
     },
     "downloadButton": "Preuzmi",
+    "discordButton": "Pridružite se Discordu",
     "links": {
       "documentation": "Dokumentacija",
       "blog": "Blog",

diff --git a/locales/hu/translation.json b/locales/hu/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "A Redot Engine most stabil!"
     },
     "downloadButton": "Letöltés",
+    "discordButton": "Csatlakozz a Discordhoz",
     "links": {
       "documentation": "Dokumentáció",
       "blog": "Blog",

diff --git a/locales/it/translation.json b/locales/it/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine è ora stabile!"
     },
     "downloadButton": "Scarica",
+    "discordButton": "Unisciti a Discord",
     "links": {
       "documentation": "Documentazione",
       "blog": "Blog",

diff --git a/locales/ja/translation.json b/locales/ja/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engineは現在安定版です！"
     },
     "downloadButton": "ダウンロード",
+    "discordButton": "Discordに参加する",
     "links": {
       "documentation": "ドキュメント",
       "blog": "ブログ",

diff --git a/locales/ko/translation.json b/locales/ko/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine이 이제 안정적입니다!"
     },
     "downloadButton": "다운로드",
+    "discordButton": "Discord에 참여하기",
     "links": {
       "documentation": "문서",
       "blog": "블로그",

diff --git a/locales/lt/translation.json b/locales/lt/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine dabar stabilus!"
     },
     "downloadButton": "Atsisiųsti",
+    "discordButton": "Prisijunkite prie Discord",
     "links": {
       "documentation": "Dokumentacija",
       "blog": "Blogas",

diff --git a/locales/nl/translation.json b/locales/nl/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine is nu stabiel!"
     },
     "downloadButton": "Downloaden",
+    "discordButton": "Word lid van Discord",
     "links": {
       "documentation": "Documentatie",
       "blog": "Blog",

diff --git a/locales/no/translation.json b/locales/no/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine er nå stabil!"
     },
     "downloadButton": "Last ned",
+    "discordButton": "Bli med i Discord",
     "links": {
       "documentation": "Dokumentasjon",
       "blog": "Blogg",

diff --git a/locales/pl/translation.json b/locales/pl/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine jest teraz stabilne!"
     },
     "downloadButton": "Pobierz",
+    "discordButton": "Dołącz do Discorda",
     "links": {
       "documentation": "Dokumentacja",
       "blog": "Blog",

diff --git a/locales/pt-BR/translation.json b/locales/pt-BR/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine agora está estável!"
     },
     "downloadButton": "Baixar",
+    "discordButton": "Junte-se ao Discord",
     "links": {
       "documentation": "Documentação",
       "blog": "Blog",

diff --git a/locales/ro/translation.json b/locales/ro/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine este acum stabil!"
     },
     "downloadButton": "Descarcă",
+    "discordButton": "Alăturați-vă Discord",
     "links": {
       "documentation": "Documentație",
       "blog": "Blog",

diff --git a/locales/ru/translation.json b/locales/ru/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine теперь стабильна!"
     },
     "downloadButton": "Скачать",
+    "discordButton": "Присоединяйтесь к Discord",
     "links": {
       "documentation": "Документация",
       "blog": "Блог",

diff --git a/locales/sv/translation.json b/locales/sv/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine är nu stabil!"
     },
     "downloadButton": "Ladda ner",
+    "discordButton": "Gå med i Discord",
     "links": {
       "documentation": "Dokumentation",
       "blog": "Blogg",

diff --git a/locales/th/translation.json b/locales/th/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine ตอนนี้เสถียรแล้ว!"
     },
     "downloadButton": "ดาวน์โหลด",
+    "discordButton": "เข้าร่วม Discord",
     "links": {
       "documentation": "เอกสาร",
       "blog": "บล็อก",

diff --git a/locales/tr/translation.json b/locales/tr/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine artık stabil!"
     },
     "downloadButton": "İndir",
+    "discordButton": "Discord'a Katıl",
     "links": {
       "documentation": "Dokümantasyon",
       "blog": "Blog",

diff --git a/locales/uk/translation.json b/locales/uk/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine тепер стабільний!"
     },
     "downloadButton": "Завантажити",
+    "discordButton": "Приєднуйтесь до Discord",
     "links": {
       "documentation": "Документація",
       "blog": "Блог",

diff --git a/locales/vi/translation.json b/locales/vi/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine hiện đã ổn định!"
     },
     "downloadButton": "Tải xuống",
+    "discordButton": "Tham gia Discord",
     "links": {
       "documentation": "Tài liệu",
       "blog": "Blog",

diff --git a/locales/zh-Hans/translation.json b/locales/zh-Hans/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine 现已稳定！"
     },
     "downloadButton": "下载",
+    "discordButton": "加入 Discord",
     "links": {
       "documentation": "文档",
       "blog": "博客",

diff --git a/locales/zh-TW/translation.json b/locales/zh-TW/translation.json
@@ -5,6 +5,7 @@
       "mainMessage": "Redot Engine 現已穩定！"
     },
     "downloadButton": "下載",
+    "discordButton": "加入 Discord",
     "links": {
       "documentation": "文件",
       "blog": "部落格",