Merge pull request #51 from sitcon-tw/fix/sidebar-layout-broken

fix: apply postion sticky to sidebar
sitcon-tw · Dec 7, 2024 · 32b660e · 32b660e
2 parents 5fcb78c + 909617b
commit 32b660e
Show file tree

Hide file tree

Showing 5 changed files with 1,076 additions and 998 deletions.
diff --git a/app/cfp/(submission)/_components/table-of-content-mobile.tsx b/app/cfp/(submission)/_components/table-of-content-mobile.tsx
@@ -0,0 +1,100 @@
+"use client";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useNavbar } from "@/app/cfp/_components/navbar-context";
+
+export default function TableOfContentMobile({
+  theme = "light",
+  sections = [],
+  submitUrl,
+}: {
+  theme: "red" | "light";
+  sections: { id: string; title: string }[];
+  submitUrl: string;
+}) {
+  const [showDropdown, setShowDropdown] = useState(false);
+  const { isNavbarExpanded } = useNavbar();
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          break;
+        }
+      }
+    });
+
+    for (const section of sections) {
+      const targetElement = document.querySelector(`#${section.id}`);
+      if (!targetElement) continue;
+      observer.observe(targetElement);
+    }
+  }, [sections]);
+
+  return (
+    <>
+      <nav className="relative md:hidden">
+        <AnimatePresence>
+          {!isNavbarExpanded && (
+            <motion.a
+              key="submit"
+              href={submitUrl}
+              target="_blank"
+              initial={{ scale: 0.95, opacity: 0, filter: "blur(0.5em)" }}
+              animate={{ scale: 1, opacity: 1, filter: "blur(0)" }}
+              exit={{ scale: 0.95, opacity: 0, filter: "blur(0.5em)" }}
+              transition={{ duration: 0.25 }}
+              whileTap={{ scale: 0.95 }}
+              className={`fixed bottom-2 left-2 right-2 z-30 rounded-md bg-background-light p-3 text-center text-lg shadow-2xl shadow-black brightness-150`}
+            >
+              立刻投稿
+            </motion.a>
+          )}
+        </AnimatePresence>
+        <div
+          onClick={() => setShowDropdown((prev) => !prev)}
+          className={`${theme === "light" ? "bg-background-light" : "bg-foreground"} flex h-[40px] items-center justify-between rounded-xl px-4 transition active:scale-95`}
+        >
+          <h2
+            className={`font-bold ${theme === "light" ? "text-foreground" : "text-red"}`}
+          >
+            本頁目錄
+          </h2>
+          <span
+            className={`material-symbols-outlined ${theme === "light" ? "text-foreground" : "text-red"} `}
+          >
+            {showDropdown ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+          </span>
+        </div>
+        {/* dropDown */}
+        {showDropdown && (
+          <div
+            className={`absolute top-[50px] z-10 w-full rounded-lg ${theme === "light" ? "bg-background-light" : "bg-background-light"} p-2 shadow-lg`}
+          >
+            {sections.map((section, index) => (
+              <motion.div
+                key={section.id}
+                initial={{ opacity: 0, y: -20, backgroundColor: "#D3C4B7" }}
+                animate={{ opacity: 1, y: 0, backgroundColor: "#000000" }}
+                transition={{
+                  duration: 0.1,
+                  delay: index * 0.03,
+                  ease: "easeInOut",
+                }} // 動畫時間
+              >
+                <Link
+                  href={`#${section.id}`}
+                  className={`flex w-full justify-center border-b border-foreground/30 p-0 py-4 transition duration-300 ${theme === "light" ? "bg-background-light text-foreground" : "bg-background-light text-red"}`}
+                  onClick={() => setShowDropdown(false)}
+                >
+                  <div className=" ">{section.title}</div>
+                </Link>
+              </motion.div>
+            ))}
+          </div>
+        )}
+      </nav>
+    </>
+  );
+}
diff --git a/app/cfp/(submission)/_components/table-of-content.tsx b/app/cfp/(submission)/_components/table-of-content.tsx
@@ -1,21 +1,16 @@
 "use client";
 import Link from "next/link";
 import { useState, useEffect } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { useNavbar } from "@/app/cfp/_components/navbar-context";
 
 export default function TableOfContent({
-  theme = "light",
   sections = [],
   submitUrl,
 }: {
   theme: "red" | "light";
   sections: { id: string; title: string }[];
   submitUrl: string;
 }) {
-  const [showDropdown, setShowDropdown] = useState(false);
   const [currentSection, setCurrentSection] = useState<null | string>(null);
-  const { isNavbarExpanded } = useNavbar();
 
   useEffect(() => {
     const observer = new IntersectionObserver((entries) => {
@@ -39,7 +34,7 @@ export default function TableOfContent({
   return (
     <>
       {/* pc & tablet */}
-      <nav className="md: fixed right-5 top-[100px] hidden w-min max-w-[200px] md:block lg:w-[200px]">
+      <nav className="sticky right-5 top-[100px] hidden w-min max-w-[200px] self-start md:block lg:w-[200px]">
         <Link
           href={submitUrl}
           target="_blank"
@@ -69,68 +64,6 @@ export default function TableOfContent({
           ))}
         </ul>
       </nav>
-      {/* mobile */}
-      <nav className="relative md:hidden">
-        <AnimatePresence>
-          {!isNavbarExpanded && (
-            <motion.a
-              key="submit"
-              href={submitUrl}
-              target="_blank"
-              initial={{ scale: 0.95, opacity: 0, filter: "blur(0.5em)" }}
-              animate={{ scale: 1, opacity: 1, filter: "blur(0)" }}
-              exit={{ scale: 0.95, opacity: 0, filter: "blur(0.5em)" }}
-              transition={{ duration: 0.25 }}
-              whileTap={{ scale: 0.95 }}
-              className={`fixed bottom-2 left-2 right-2 z-30 rounded-md bg-background-light p-3 text-center text-lg shadow-2xl shadow-black brightness-150`}
-            >
-              立刻投稿
-            </motion.a>
-          )}
-        </AnimatePresence>
-        <div
-          onClick={() => setShowDropdown((prev) => !prev)}
-          className={`${theme === "light" ? "bg-background-light" : "bg-foreground"} flex h-[40px] items-center justify-between rounded-xl px-4 transition active:scale-95`}
-        >
-          <h2
-            className={`font-bold ${theme === "light" ? "text-foreground" : "text-red"}`}
-          >
-            本頁目錄
-          </h2>
-          <span
-            className={`material-symbols-outlined ${theme === "light" ? "text-foreground" : "text-red"} `}
-          >
-            {showDropdown ? "keyboard_arrow_up" : "keyboard_arrow_down"}
-          </span>
-        </div>
-        {/* dropDown */}
-        {showDropdown && (
-          <div
-            className={`absolute top-[50px] z-10 w-full rounded-lg ${theme === "light" ? "bg-background-light" : "bg-background-light"} p-2 shadow-lg`}
-          >
-            {sections.map((section, index) => (
-              <motion.div
-                key={section.id}
-                initial={{ opacity: 0, y: -20, backgroundColor: "#D3C4B7" }}
-                animate={{ opacity: 1, y: 0, backgroundColor: "#000000" }}
-                transition={{
-                  duration: 0.1,
-                  delay: index * 0.03,
-                  ease: "easeInOut",
-                }} // 動畫時間
-              >
-                <Link
-                  href={`#${section.id}`}
-                  className={`flex w-full justify-center border-b border-foreground/30 p-0 py-4 transition duration-300 ${theme === "light" ? "bg-background-light text-foreground" : "bg-background-light text-red"}`}
-                  onClick={() => setShowDropdown(false)}
-                >
-                  <div className=" ">{section.title}</div>
-                </Link>
-              </motion.div>
-            ))}
-          </div>
-        )}
-      </nav>
     </>
   );
 }