Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor and Enhance MobileSidebar UI #38

Merged
merged 3 commits into from
Jan 10, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 56 additions & 22 deletions components/MobileSidebar.tsx
Original file line number Diff line number Diff line change
@@ -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");
Expand All @@ -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>
Expand Down
5 changes: 0 additions & 5 deletions components/ui/sheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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>
));
Expand Down
1 change: 1 addition & 0 deletions locales/bg/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine сега е стабилен!"
},
"downloadButton": "Изтегли",
"discordButton": "Присъединете се към Discord",
"links": {
"documentation": "Документация",
"blog": "Блог",
Expand Down
1 change: 1 addition & 0 deletions locales/cs/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine je nyní stabilní!"
},
"downloadButton": "Stáhnout",
"discordButton": "Připojte se na Discord",
"links": {
"documentation": "Dokumentace",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/da/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine er nu stabil!"
},
"downloadButton": "Download",
"discordButton": "Deltag i Discord",
"links": {
"documentation": "Dokumentation",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/de/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine ist jetzt stabil!"
},
"downloadButton": "Herunterladen",
"discordButton": "Tritt Discord bei",
"links": {
"documentation": "Dokumentation",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/el/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Η Redot Engine είναι πλέον σταθερή!"
},
"downloadButton": "Λήψη",
"discordButton": "Συμμετάσχετε στο Discord",
"links": {
"documentation": "Τεκμηρίωση",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/en-GB/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine is now stable!"
},
"downloadButton": "Download",
"discordButton": "Join Discord",
"links": {
"documentation": "Documentation",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine is now stable!"
},
"downloadButton": "Download",
"discordButton": "Join Discord",
"links": {
"documentation": "Documentation",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/es-LA/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "¡Redot Engine ya es estable!"
},
"downloadButton": "Descargar",
"discordButton": "Únete a Discord",
"links": {
"documentation": "Documentación",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/es/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "¡Redot Engine ya es estable!"
},
"downloadButton": "Descargar",
"discordButton": "Únete a Discord",
"links": {
"documentation": "Documentación",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/fi/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine on nyt vakaa!"
},
"downloadButton": "Lataa",
"discordButton": "Liity Discordiin",
"links": {
"documentation": "Dokumentaatio",
"blog": "Blogi",
Expand Down
1 change: 1 addition & 0 deletions locales/fr/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine est maintenant stable !"
},
"downloadButton": "Télécharger",
"discordButton": "Rejoignez Discord",
"links": {
"documentation": "Documentation",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/hi/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine अब स्थिर है!"
},
"downloadButton": "डाउनलोड",
"discordButton": "डिस्कॉर्ड से जुड़ें",
"links": {
"documentation": "दस्तावेज़",
"blog": "ब्लॉग",
Expand Down
1 change: 1 addition & 0 deletions locales/hr/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine je sada stabilan!"
},
"downloadButton": "Preuzmi",
"discordButton": "Pridružite se Discordu",
"links": {
"documentation": "Dokumentacija",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/hu/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "A Redot Engine most stabil!"
},
"downloadButton": "Letöltés",
"discordButton": "Csatlakozz a Discordhoz",
"links": {
"documentation": "Dokumentáció",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/it/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine è ora stabile!"
},
"downloadButton": "Scarica",
"discordButton": "Unisciti a Discord",
"links": {
"documentation": "Documentazione",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/ja/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engineは現在安定版です!"
},
"downloadButton": "ダウンロード",
"discordButton": "Discordに参加する",
"links": {
"documentation": "ドキュメント",
"blog": "ブログ",
Expand Down
1 change: 1 addition & 0 deletions locales/ko/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine이 이제 안정적입니다!"
},
"downloadButton": "다운로드",
"discordButton": "Discord에 참여하기",
"links": {
"documentation": "문서",
"blog": "블로그",
Expand Down
1 change: 1 addition & 0 deletions locales/lt/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine dabar stabilus!"
},
"downloadButton": "Atsisiųsti",
"discordButton": "Prisijunkite prie Discord",
"links": {
"documentation": "Dokumentacija",
"blog": "Blogas",
Expand Down
1 change: 1 addition & 0 deletions locales/nl/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine is nu stabiel!"
},
"downloadButton": "Downloaden",
"discordButton": "Word lid van Discord",
"links": {
"documentation": "Documentatie",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/no/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine er nå stabil!"
},
"downloadButton": "Last ned",
"discordButton": "Bli med i Discord",
"links": {
"documentation": "Dokumentasjon",
"blog": "Blogg",
Expand Down
1 change: 1 addition & 0 deletions locales/pl/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine jest teraz stabilne!"
},
"downloadButton": "Pobierz",
"discordButton": "Dołącz do Discorda",
"links": {
"documentation": "Dokumentacja",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/pt-BR/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine agora está estável!"
},
"downloadButton": "Baixar",
"discordButton": "Junte-se ao Discord",
"links": {
"documentation": "Documentação",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/ro/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine este acum stabil!"
},
"downloadButton": "Descarcă",
"discordButton": "Alăturați-vă Discord",
"links": {
"documentation": "Documentație",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/ru/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine теперь стабильна!"
},
"downloadButton": "Скачать",
"discordButton": "Присоединяйтесь к Discord",
"links": {
"documentation": "Документация",
"blog": "Блог",
Expand Down
1 change: 1 addition & 0 deletions locales/sv/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine är nu stabil!"
},
"downloadButton": "Ladda ner",
"discordButton": "Gå med i Discord",
"links": {
"documentation": "Dokumentation",
"blog": "Blogg",
Expand Down
1 change: 1 addition & 0 deletions locales/th/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine ตอนนี้เสถียรแล้ว!"
},
"downloadButton": "ดาวน์โหลด",
"discordButton": "เข้าร่วม Discord",
"links": {
"documentation": "เอกสาร",
"blog": "บล็อก",
Expand Down
1 change: 1 addition & 0 deletions locales/tr/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine artık stabil!"
},
"downloadButton": "İndir",
"discordButton": "Discord'a Katıl",
"links": {
"documentation": "Dokümantasyon",
"blog": "Blog",
Expand Down
1 change: 1 addition & 0 deletions locales/uk/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine тепер стабільний!"
},
"downloadButton": "Завантажити",
"discordButton": "Приєднуйтесь до Discord",
"links": {
"documentation": "Документація",
"blog": "Блог",
Expand Down
1 change: 1 addition & 0 deletions locales/vi/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions locales/zh-Hans/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine 现已稳定!"
},
"downloadButton": "下载",
"discordButton": "加入 Discord",
"links": {
"documentation": "文档",
"blog": "博客",
Expand Down
1 change: 1 addition & 0 deletions locales/zh-TW/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"mainMessage": "Redot Engine 現已穩定!"
},
"downloadButton": "下載",
"discordButton": "加入 Discord",
"links": {
"documentation": "文件",
"blog": "部落格",
Expand Down
Loading