Merge pull request #33 from sunnybraille/request

feat: Mobile UI sidebar
sunnybraille · Mar 6, 2024 · 2292bfe · 2292bfe
2 parents 5d257dc + ec891f6
commit 2292bfe
Show file tree

Hide file tree

Showing 7 changed files with 483 additions and 46 deletions.
diff --git a/my-app/package-lock.json b/my-app/package-lock.json
diff --git a/my-app/package.json b/my-app/package.json
@@ -15,6 +15,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-drag-drop-files": "^2.3.10",
+    "react-icons": "^5.0.1",
+    "react-modern-drawer": "^1.2.2",
+    "react-pro-sidebar": "^1.1.0",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",

diff --git a/my-app/src/components/ContrastToggleButton.tsx b/my-app/src/components/ContrastToggleButton.tsx
@@ -1,16 +1,18 @@
 import React from "react";
 import { useHighContrast } from "./HighContrastMode";
 import { useLanguage } from "../LanguageContext";
+import { useMediaQuery } from "react-responsive";
+
 
 const ContrastToggleButton = () => {
+  const isMobile = useMediaQuery({ maxWidth: 768 });
   const { isHighContrast, toggleHighContrast } = useHighContrast();
   const { language } = useLanguage();
   const textClassName = language === "ko" ? "font-kor" : "font-eng";
 
-  const normalMode = language === "ko" ? "일반 모드로 변경" : "To Normal Mode";
+  const normalMode = isMobile && language === "ko" ? "일반 모드" : language === "ko" ? "일반 모드로 변경" : "Normal Mode";
+  const highContrastMode = isMobile && language === "ko" ? "고대비 모드" : language === "ko" ? "고대비 모드로 변경" : "Contrast Mode";
 
-  const highContrastMode =
-    language === "ko" ? "고대비 모드로 변경" : "To High Contrast Mode";
 
   return (
     <button

diff --git a/my-app/src/components/LanguageToggleButton.tsx b/my-app/src/components/LanguageToggleButton.tsx
@@ -1,12 +1,19 @@
 import React from "react";
 import { useLanguage } from "../LanguageContext";
 import { useHighContrast } from "./HighContrastMode";
+import { useMediaQuery } from "react-responsive";
+
 
 const LanguageToggleButton: React.FC = () => {
+  const isMobile = useMediaQuery({ maxWidth: 768 });
   const { language, toggleLanguage } = useLanguage();
   const textClassName = language === "ko" ? "font-kor" : "font-eng";
   const { isHighContrast } = useHighContrast();
 
+  const buttonText = language === "ko"
+    ? isMobile ? "English" : "View in English"
+    : isMobile ? "한국어" : "한국어로 보기";
+
   return (
     <button
       onClick={toggleLanguage}
@@ -16,7 +23,7 @@ const LanguageToggleButton: React.FC = () => {
         isHighContrast ? "bg-black text-stone-800" : "text-white"
       }`}
     >
-      {language === "ko" ? "View in English" : "한국어로 보기"}
+      {buttonText}
     </button>
   );
 };