feat: more PC compatibility

bibbi-team · Feb 26, 2024 · 17f4c31 · 17f4c31
1 parent 2546a55
commit 17f4c31
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 22 deletions.
diff --git a/components/WindowDimensions.tsx b/components/WindowDimensions.tsx
@@ -26,7 +26,7 @@ export default function useWindowDimensions() {
 }
 
 export function useViewPortDetector() {
-    const { _, width } = useWindowDimensions();
+    const { height, width } = useWindowDimensions();
     const [isMobile, setIsMobile] = useState(width < 650);
     useEffect(() => {
         setIsMobile(width < 650);

diff --git a/components/layout/NavigationBar.tsx b/components/layout/NavigationBar.tsx
@@ -6,9 +6,11 @@ import {motion, LayoutGroup} from "framer-motion"
 import Link from "next/link";
 import {useEffect, useState} from "react";
 import {detectPlatform} from "@/src/util";
+import {useViewPortDetector} from "@/components/WindowDimensions";
 
 export default function NavigationBar({isFull}: {isFull: boolean}) {
     const [appDownloadUrl, setAppDownloadUrl] = useState("/");
+    const isMobile = useViewPortDetector();
     useEffect(() => {
         const platform = detectPlatform();
         if (platform === "ios") {
@@ -25,43 +27,59 @@ export default function NavigationBar({isFull}: {isFull: boolean}) {
                initial={{ opacity:0 }}
                animate={{ opacity:1 }}
            >
-               <FullNavigationBar appDownloadUrl={appDownloadUrl}/>
+               <FullNavigationBar isMobile={isMobile} appDownloadUrl={appDownloadUrl}/>
            </motion.div>}
        {!isFull &&  <motion.div
            key={"titled-nav-bar"}
            exit={{ opacity:0 }}
            initial={{ opacity:0 }}
            animate={{ opacity:1 }}
-       ><TitledNavigationBar/>
+       ><TitledNavigationBar isMobile={isMobile}/>
        </motion.div>}
    </LayoutGroup>
 }
 
-function FullNavigationBar({appDownloadUrl}: {appDownloadUrl: string}) {
-    return <div className={"flex justify-between items-center w-screen bg-a39d text-white py-3.5 px-5 z-20"}>
-        <div className={"flex gap-4 items-center"}>
-            <Link href={"/"}>
-                <PageLogo className={"fill-s938f"}/>
-            </Link>
-        </div>
-        <div className={"flex gap-4 items-center"}>
-            <Link href={appDownloadUrl}>
-                <AppDownloadButton/>
-            </Link>
+function FullNavigationBar({appDownloadUrl, isMobile}: {appDownloadUrl: string, isMobile: boolean}) {
+    return <div className={"flex flex-row justify-between items-center w-screen bg-a39d text-white py-3.5 px-5 z-20 "}>
+        <div className={"max-w-screen-xl mx-auto w-full flex flex-row justify-between items-center"}>
+            <div className={"flex gap-4 items-center"}>
+                <Link href={"/"}>
+                    <PageLogo className={"fill-s938f"}/>
+                </Link>
+            </div>
+            <div className={"flex gap-4 items-center"}>
+                {isMobile ? <Link href={appDownloadUrl}>
+                    <AppDownloadButton/>
+                </Link>: <NavigationBarLinks isFull={true}/> }
+            </div>
         </div>
+
     </div>
 }
 
-function TitledNavigationBar() {
+function TitledNavigationBar({isMobile}: {isMobile: boolean}) {
     return <div className={"flex justify-between items-center w-screen text-white py-3.5 px-5 z-20"}>
-        <div className={"flex gap-4 items-center"}>
-            <Link href={"/"}>
-                <PageLogo className={"fill-s1938f33"}/>
-            </Link>
-        </div>
-        <div className={"flex gap-4 items-center"}>
-            <div className={"h-8"}/>
+        <div className={"max-w-screen-xl mx-auto w-full flex flex-row justify-between items-center"}>
+            <div className={"flex gap-4 items-center"}>
+                <Link href={"/"}>
+                    <PageLogo className={"fill-s1938f33"}/>
+                </Link>
+            </div>
+            <div className={"flex gap-4 items-center"}>
+                {isMobile ? <div className={"h-8"}/>: <NavigationBarLinks isFull={false}/> }
+            </div>
         </div>
+
+    </div>
+}
+
+function NavigationBarLinks({isFull}: {isFull: boolean}) {
+    return <div className={"inline"}>
+        <ul className={isFull ? "flex flex-row gap-x-8 text-slate-50 text-lg font-light" : "flex flex-row gap-x-8 text-black text-lg font-medium"}>
+            <li><Link href={"/"}>소개 페이지</Link></li>
+            <li><Link href={"/0ed00a05cf74414898b8dbff7614683f"}>공지사항</Link></li>
+            <li><Link href={"/download"}>다운로드</Link></li>
+        </ul>
     </div>
 }