fix header + lang

AploCoin · Nov 20, 2024 · 1f78652 · 1f78652
1 parent ee7be8f
commit 1f78652
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 852 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -30,7 +30,7 @@
     "aboutAplo": "ABOUT APLO",
     "joinCommunity": "JOIN COMMUNITY",
     "chooseWallet": "Choose a Wallet",
-    "walletDescription": "To use Aplo, the first thing you are going to need is a wallet. Visit our Downloads page and get the right wallet for you. The Aplo wallets are available for a variety of platforms and contain everything you need to use Aplo immediately.",
+    "walletDescription": "Aplo supports any ethereum wallet, hooray!!!",
     "getCoins": "Get Some Coins",
     "getCoinsDescription": "After you install a wallet, you need to get some Aplo. There are multiple ways to acquire some coins to spend, like mining with any device you have or working in exchange for Aplo, but the easiest way is to use an exchange and convert your fiat money into APLO or sell GAS on them.",
     "useCurrency": "It's a Currency; Use It!",
@@ -48,7 +48,7 @@
     "contributeDescription": "Aplo is not simply a currency, it's a decentralized community and exists only thanks to the hundreds of volunteers that dedicate their time to the project. Join us!",
     "contributing": "CONTRIBUTING",
     "researchLab": "Aplo Research Lab (ARL)",
-    "researchLabDescription": "The ARL (Aplo Research Lab) is a very important part of Monero. Researchers and cryptographers from all over the world meet to find new ways to improve Aplo. Read their papers and join them!",
+    "researchLabDescription": "The ARL (Aplo Research Lab) is a very important part of APLO. Researchers and cryptographers from all over the world meet to find new ways to improve Aplo. Read their papers and join them!", 
     "meetCommunity": "Meet the community!",
     "meetCommunityDescription": "The members of the Aplo community are all over the world. You can find us on multiple platforms. Come meet us!",
     "hangouts": "HANGOUTS"

diff --git a/messages/ru.json b/messages/ru.json
@@ -30,7 +30,7 @@
     "aboutAplo": "О APLO",
     "joinCommunity": "ПРИСОЕДИНИТЬСЯ К СООБЩЕСТВУ",
     "chooseWallet": "Выберите Кошелек",
-    "walletDescription": "Для использования Aplo вам сначала нужен кошелек. Посетите нашу страницу загрузок и выберите подходящий кошелек. Кошельки Aplo доступны для различных платформ и содержат все необходимое для немедленного использования Aplo.",
+    "walletDescription": "Aplo поддерживает любой кошелек Ethereum, ура!!!",
     "getCoins": "Получить Монеты",
     "getCoinsDescription": "После установки кошелька вам нужно получить немного Aplo. Существует несколько способов получить монеты для трат, таких как майнинг или работа за Aplo, но самый простой способ - воспользоваться биржей и конвертировать свои фиатные деньги в XMR. Многие централизованные и децентрализованные биржи включают Aplo (XMR) в свои списки.",
     "useCurrency": "Это валюта; Используйте ее!",
@@ -48,7 +48,7 @@
     "contributeDescription": "Aplo - это не просто валюта, это децентрализованное сообщество, которое существует только благодаря сотням волонтеров, посвящающих свое время проекту. Присоединяйтесь к нам!",
     "contributing": "ВКЛАД",
     "researchLab": "Исследовательская лаборатория Aplo (ARL)",
-    "researchLabDescription": "ARL (Исследовательская лаборатория Aplo) является очень важной частью Monero. Исследователи и криптографы со всего мира встречаются, чтобы найти новые способы улучшить Aplo. Читайте их работы и присоединяйтесь к ним!",
+    "researchLabDescription": "ARL (Исследовательская лаборатория Aplo) — очень важная часть APLO. Исследователи и криптографы со всего мира встречаются, чтобы найти новые способы улучшения Aplo. Прочтите их статьи и присоединяйтесь к ним!",
     "meetCommunity": "Познакомьтесь с сообществом!",
     "meetCommunityDescription": "Члены сообщества Aplo находятся по всему миру. Вы можете найти нас на многих платформах. Приходите знакомиться!",
     "hangouts": "ВСТРЕЧИ"

diff --git a/messages/ua.json b/messages/ua.json
@@ -30,7 +30,7 @@
     "aboutAplo": "ПРО APLO",
     "joinCommunity": "ПРИЄДНАТИСЯ ДО СПІЛЬНОТИ",
     "chooseWallet": "Виберіть Гаманець",
-    "walletDescription": "Для використання Aplo вам спочатку потрібен гаманець. Відвідайте нашу сторінку завантажень і виберіть відповідний гаманець. Гаманці Aplo доступні для різних платформ і містять усе необхідне для негайного використання Aplo.",
+    "walletDescription": "Aplo підтримує будь-який гаманець Ethereum, юхуу!!!",
     "getCoins": "Отримати монети",
     "getCoinsDescription": "Після встановлення гаманця вам потрібно отримати деякі Aplo. Є кілька способів отримати монети для витрат, такі як майнінг або робота за Aplo, але найпростіший спосіб - скористатися біржею і конвертувати свої фіатні гроші в XMR. Багато централізованих і децентралізованих бірж перераховують Aplo (XMR).",
     "useCurrency": "Це валюта; Використовуйте її!",
@@ -48,7 +48,7 @@
     "contributeDescription": "Aplo - це не просто валюта, це децентралізована спільнота, яка існує завдяки сотням волонтерів, які присвячують свій час проекту. Приєднуйтесь до нас!",
     "contributing": "ВНЕСОК",
     "researchLab": "Лабораторія досліджень Aplo (ARL)",
-    "researchLabDescription": "ARL (Лабораторія досліджень Aplo) є дуже важливою частиною Monero. Дослідники та криптографи з усього світу зустрічаються, щоб знайти нові способи покращити Aplo. Читайте їхні роботи та приєднуйтесь до них!",
+    "researchLabDescription": "ARL (Aplo Research Lab) є дуже важливою частиною APLO. Дослідники та криптографи з усього світу зустрічаються, щоб знайти нові шляхи вдосконалення Aplo. Прочитайте їхні статті та приєднайтеся до них!",
     "meetCommunity": "Зустріньтеся зі спільнотою!",
     "meetCommunityDescription": "Члени спільноти Aplo є по всьому світу. Ви можете знайти нас на багатьох платформах. Приходьте знайомитись!",
     "hangouts": "ЗУСТРІЧІ"

diff --git a/src/components/language/LanguageSwitcher.tsx b/src/components/language/LanguageSwitcher.tsx
@@ -28,10 +28,10 @@ export default function LanguageSwitcher() {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger asChild className="!m-0">
         <Button variant="outline" className="flex items-center gap-2">
           <FlagIcon className="h-5 w-5" />
-          <span>{selectedLocale.toUpperCase()}</span>
+          <span>{typeof selectedLocale == "string"? selectedLocale.toUpperCase() : selectedLocale[0].toUpperCase()}</span>
           <ChevronDownIcon className="h-4 w-4" />
         </Button>
       </DropdownMenuTrigger>

diff --git a/src/components/navigation/MobileNavigation.tsx b/src/components/navigation/MobileNavigation.tsx
@@ -4,32 +4,22 @@ import { usePathname } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
 import { Murecho } from "next/font/google";
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarMenu,
-  SidebarMenuItem,
-  SidebarMenuButton,
-  SidebarHeader,
-  SidebarFooter,
-} from "@/components/ui/sidebar";
+import { Sheet, SheetContent, SheetHeader, SheetTrigger } from "@/components/ui/sheet";
 import LanguageSwitcher from "../language/LanguageSwitcher";
 import { clsx } from "clsx";
 
 const murecho = Murecho({ subsets: ["latin", "cyrillic"] });
 
 export default function MobileNavigation() {
   const t = useTranslations("Menu");
-  const [showMenu, setShowMenu] = useState(false);
+  const [open, setOpen] = useState(false);
   const [mainComponentHeight, setMainComponentHeight] = useState(0);
-  const mainComponentRef = useRef(null);
+  const mainComponentRef = useRef<null | HTMLDivElement>(null);
 
   const pathname = usePathname();
   const lang = pathname.substring(1, 3);
 
-  const toggleMenu = () => setShowMenu(!showMenu);
-  const closeMenu = () => setTimeout(() => setShowMenu(false), 300);
+  const closeMenu = () => setTimeout(() => setOpen(false), 300);
 
   useEffect(() => {
     if (mainComponentRef.current) {
@@ -48,12 +38,10 @@ export default function MobileNavigation() {
 
   return (
     <>
-      <div
-        style={{ height: `${mainComponentHeight}px`, marginBottom: "1.35vh" }}
-      ></div>
+      <div style={{ height: `${mainComponentHeight / 2}px`, marginBottom: "1.35vh" }}></div>
       <div
         ref={mainComponentRef}
-        className={`flex flex-column bg-white justify-between items-center pl-[3.73vw] pr-[3.73vw] z-10 w-full fixed top-0`}
+        className="flex flex-column bg-white justify-between items-center px-[3.73vw] z-10 w-full fixed top-0"
       >
         <Link href={`/${lang}`} onClick={closeMenu}>
           <Image
@@ -64,65 +52,55 @@ export default function MobileNavigation() {
             className="w-[12.8vw] h-auto p-1"
           />
         </Link>
-        <button onClick={toggleMenu}>
-          <div>
-          <Image
-              src="/menu/menu-m.svg"
-              width={24}
-              height={16}
-              alt="Icon open menu"
-              className="w-[9vw]"
-            />
-          </div>
-        </button>
-      </div>
-      <Sidebar open={showMenu} onOpenChange={setShowMenu} side="right">
-        <SidebarHeader />
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarMenu className="overflow-hidden">
-              <SidebarMenuItem key="switcher">
-                <div className="flex flex-row items-center space-y-3 w-full justify-between">
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetTrigger asChild>
+            <button>
+              <Image
+                src="/menu/menu-m.svg"
+                width={24}
+                height={16}
+                alt="Icon open menu"
+                className="w-[9vw]"
+              />
+            </button>
+          </SheetTrigger>
+          <SheetContent side="right" className="w-[280px] sm:w-[360px]">
+            <SheetHeader className="space-y-6">
+              <div className="flex flex-row items-center justify-between">
+                <Link
+                  href={`/${lang}/donate-aplo-project`}
+                  className="flex items-center justify-center w-auto rounded-sm px-3 py-1"
+                  style={{ background: "rgb(51, 128, 179)" }}
+                  onClick={closeMenu}
+                >
+                  <span
+                    className={clsx(
+                      murecho.className,
+                      "h-full !w-auto size-[clamp(10px,1vw,64px)] font-bold text-center uppercase"
+                    )}
+                    style={{ color: "rgb(255, 255, 255)" }}
+                  >
+                    {t("donate")}
+                  </span>
+                </Link>
+                <LanguageSwitcher />
+              </div>
+              <nav className="flex flex-col space-y-4">
+                {menuItems.map((item) => (
                   <Link
-                    href={`/${lang}/donate-aplo-project`}
-                    className="flex items-center justify-center w-auto rounded-sm pr-3 pl-3 pt-1 pb-1"
-                    style={{ background: "rgb(51, 128, 179)" }}
+                    key={item.title}
+                    href={item.url}
+                    className={clsx(murecho.className, "font-medium")}
+                    onClick={closeMenu}
                   >
-                    <span
-                      className={clsx(
-                        murecho.className,
-                        "h-full size-[clamp(10px, 1vw, 64px)] font-bold text-center uppercase"
-                      )}
-                      style={{ color: "rgb(255, 255, 255)" }}
-                    >
-                      {t("donate")}
-                    </span>
+                    {item.title}
                   </Link>
-                  <LanguageSwitcher />
-                </div>
-              </SidebarMenuItem>
-              {menuItems.map((item) => (
-                <SidebarMenuItem key={item.title}>
-                  <SidebarMenuButton asChild>
-                    <Link
-                      href={item.url}
-                      className={clsx(murecho.className, "font-medium size-4")}
-                      style={{
-                        marginTop: "2.46vh",
-                        marginBottom: "2.46vh",
-                      }}
-                      onClick={closeMenu}
-                    >
-                      {item.title}
-                    </Link>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              ))}
-            </SidebarMenu>
-          </SidebarGroup>
-        </SidebarContent>
-        <SidebarFooter />
-      </Sidebar>
+                ))}
+              </nav>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      </div>
     </>
   );
-}
+}
diff --git a/src/components/navigation/component.tsx b/src/components/navigation/component.tsx
@@ -1,7 +1,6 @@
 "use client";
 import dynamic from 'next/dynamic';
 import { useState, useEffect } from 'react';
-import { SidebarProvider } from '../ui/sidebar';
 
 const MobileNavigation = dynamic(() => import('./MobileNavigation'), { ssr: false });
 const DesktopNavigation = dynamic(() => import('./DesktopNavigation'), { ssr: false });
@@ -23,7 +22,7 @@ export default function Navigation() {
 
     return (
         <>
-            {isMobile ? <SidebarProvider style={{position: "absolute", zIndex: "50", minHeight: "unset"}}><MobileNavigation /></SidebarProvider> : <DesktopNavigation />}
+            {isMobile ? <MobileNavigation /> : <DesktopNavigation />}
         </>
     );
 }
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
@@ -64,10 +64,6 @@ const SheetContent = React.forwardRef<
       className={cn(sheetVariants({ side }), className)}
       {...props}
     >
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
       {children}
     </SheetPrimitive.Content>
   </SheetPortal>