Sidebar moved to the right-side +

hooks: useMutationObserver and useOverflowDetection init + PageFrame and Editor: Overflowing detection + BgContainer: image position fixed + minor changes
HGZdev · Nov 3, 2024 · 6759630 · 6759630
1 parent 4fcf65f
commit 6759630
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 52 deletions.
diff --git a/src/client/Components/BgContainer.tsx b/src/client/Components/BgContainer.tsx
@@ -2,9 +2,8 @@ import styled from "styled-components";
 
 const {VITE_BASE_URL} = import.meta.env;
 
-const BgContainer = styled.div<{}>`
+const BgContainer = styled.div`
   position: relative;
-
   background-image: url(${VITE_BASE_URL}/images/bgImage.jpg);
   background-size: cover;
   background-position: center;

diff --git a/src/client/Components/Navbar.tsx b/src/client/Components/Navbar.tsx
@@ -9,29 +9,23 @@ const BASE_URL = VITE_HASH_ROUTER ? "" : VITE_BASE_URL;
 
 const Navbar: React.FC<{
   onToggleSidebar: MouseEventHandler<HTMLButtonElement>;
-}> = ({onToggleSidebar}) => {
+  hasSidebar: boolean;
+}> = ({onToggleSidebar, hasSidebar}) => {
   const navigate = useNavigate();
   const location = useLocation();
 
   const isActive = (path: string) => location.pathname === `${BASE_URL}${path}`;
 
   return (
-    <div
-      // data-theme="navbar"
-      className="flex justify-between items-center bg-base-100"
-    >
-      <NavButton onClick={onToggleSidebar} className="md:hidden">
-        <FiMenu size={24} />
-      </NavButton>
-
+    <div className="flex justify-between items-center bg-base-100">
       <div className="flex flex-1 justify-start md:justify-start">
         <NavButton onClick={() => navigate(`${BASE_URL}/`)} className="btn-lg">
           <Logo className="w-5" />
           <span className="hidden md:inline-block">Tablet Weaving Editor</span>
         </NavButton>
       </div>
 
-      <div className="px-4">
+      <div>
         <ul className="flex p-0 mt-0">
           <li>
             <NavButton
@@ -67,6 +61,11 @@ const Navbar: React.FC<{
           </li>
         </ul>
       </div>
+      {hasSidebar && (
+        <NavButton onClick={onToggleSidebar} className="md:hidden">
+          <FiMenu size={24} />
+        </NavButton>
+      )}
     </div>
   );
 };

diff --git a/src/client/Components/PageFrame.tsx b/src/client/Components/PageFrame.tsx
@@ -5,55 +5,58 @@ import BgContainer from "./BgContainer";
 
 interface PageFrameProps {
   Main: React.ComponentType;
-  LeftBar?: React.ComponentType<{onToggleSidebar: () => void}>;
+  Sidebar?: React.ComponentType<{onToggleSidebar: () => void}>;
   Header?: React.ComponentType<{onToggleSidebar: () => void}>;
 }
 
+const useSidebar = () => {
+  const [isSidebarVisible, setSidebarVisible] = useState(false);
+  const toggleSidebar = () => setSidebarVisible((prev) => !prev);
+  return {isSidebarVisible, toggleSidebar};
+};
+
 const PageFrame: React.FC<PageFrameProps> = ({
-  LeftBar,
-  Main,
   Header = Navbar,
+  Main,
+  Sidebar,
 }) => {
-  const [isSidebarVisible, setSidebarVisible] = useState(false);
-  const hasSidebar = !!LeftBar;
-  const toggleSidebar = () => {
-    LeftBar && setSidebarVisible(!isSidebarVisible);
-  };
+  const {isSidebarVisible, toggleSidebar} = useSidebar();
+  const hasSidebar = Boolean(Sidebar);
 
   return (
     <BgContainer
-      className={`relative min-h-screen grid grid-rows-[auto_1fr_auto] grid-cols-[1fr] ${
-        hasSidebar ? "md:grid-cols-[auto_1fr]" : "md:grid-cols-[1fr]"
-      }  `}
+      className={`relative min-h-screen grid grid-rows-[auto_1fr_auto] grid-cols-[1fr] md:bg-fixed overflow-hidden ${
+        hasSidebar ? "md:grid-cols-[1fr_auto]" : "md:grid-cols-[1fr]"
+      }`}
     >
       {/* Navbar */}
-      <nav className="grid-area-navbar row-start-1 col-start-1 col-end-3 shadow-md z-20">
-        <Header onToggleSidebar={toggleSidebar} />
+      <nav className="row-start-1 col-start-1 col-end-3 shadow-md z-20">
+        <Header onToggleSidebar={toggleSidebar} hasSidebar={!!Sidebar} />
       </nav>
 
-      {/* Sidebar */}
-      {LeftBar && (
-        <div
-          className={`grid-area-sidebar transition-all duration-500 ease-in-out transform ${
-            isSidebarVisible
-              ? "translate-x-0 opacity-100"
-              : "-translate-x-full opacity-0 md:translate-x-0 md:opacity-100"
-          } absolute md:relative h-full z-10 md:z-0`}
-        >
-          <LeftBar onToggleSidebar={toggleSidebar} />
-        </div>
-      )}
-
       {/* Main Content */}
       <main
+        className="flex overflow-x-auto  pb-[15rem]"
         style={{backgroundColor: "rgba(255, 255, 255, 0.6)"}}
-        className="grid-area-main flex pb-[15rem]"
       >
         <Main />
       </main>
 
+      {/* Sidebar */}
+      {Sidebar && (
+        <aside
+          className={`transition-all duration-500 ease-in-out transform ${
+            isSidebarVisible
+              ? "translate-x-0 opacity-100"
+              : "translate-x-full opacity-0 md:translate-x-0 md:opacity-100"
+          } absolute md:relative h-full z-10 md:z-0 right-0`}
+        >
+          <Sidebar onToggleSidebar={toggleSidebar} />
+        </aside>
+      )}
+
       {/* Footer */}
-      <footer className="grid-area-footer row-start-3 col-start-1 col-end-3 ">
+      <footer className="row-start-3 col-start-1 col-end-3">
         <Footer />
       </footer>
 

diff --git a/src/client/Pages/Public/Editor/Editor.tsx b/src/client/Pages/Public/Editor/Editor.tsx
@@ -1,16 +1,17 @@
-import React from "react";
+import React, {useRef} from "react";
 import ControlPanel from "./ControlPanel";
 import ThreadsPanel from "./ThreadsPanel";
 import TabletsPanel from "./TabletsPanel";
 import {FiX} from "react-icons/fi";
 import {NavButton} from "../../../Components/Buttons";
 import PageFrame from "../../../Components/PageFrame";
+import useOverflowDetection from "../../../hooks.ts/useOverflowDetection";
 
 const Sidebar: React.FC<{
   onToggleSidebar: () => void;
 }> = ({onToggleSidebar}) => {
   return (
-    <div className="flex flex-col items-start bg-base-100 h-full ">
+    <div className="flex flex-col items-start bg-base-100 h-full">
       {/* close sidebar button */}
       <NavButton onClick={onToggleSidebar} className="md:hidden">
         <FiX size={24} />
@@ -20,9 +21,17 @@ const Sidebar: React.FC<{
   );
 };
 
-export const Main = () => {
+export const Main: React.FC = () => {
+  const mainRef = useRef<HTMLDivElement>(null);
+  const isOverflowing = useOverflowDetection(mainRef);
+
   return (
-    <div className="flex w-full justify-center items-center ">
+    <div
+      ref={mainRef}
+      className={`flex w-full ${
+        isOverflowing ? "justify-start" : "justify-center"
+      } overflow-x-auto pb-[15rem]`}
+    >
       <div className="bg-white my-8 py-4 px-8 rounded-md">
         <ThreadsPanel />
         <TabletsPanel />
@@ -32,7 +41,7 @@ export const Main = () => {
 };
 
 const Editor: React.FC = () => {
-  return <PageFrame {...{LeftBar: Sidebar, Main}} />;
+  return <PageFrame {...{Sidebar, Main}} />;
 };
 
 export default Editor;
diff --git a/src/client/Pages/Public/LandingPage.tsx b/src/client/Pages/Public/LandingPage.tsx
@@ -10,10 +10,10 @@ const LandingPage: React.FC = () => {
   const navigate = useNavigate();
 
   return (
-    <BgContainer data-testid="LandingPage">
+    <BgContainer data-testid="LandingPage" className="md:bg-fixed">
       <div
-        style={{backgroundColor: "rgba(255, 255, 255, 0.3)"}}
         className="relative flex flex-col items-center justify-center h-screen p-2 "
+        style={{backgroundColor: "rgba(255, 255, 255, 0.3)"}}
       >
         <div className="flex flex-col bg-white px-4 md:px-12 py-8 gap-8 rounded-lg shadow-2xl">
           <h1 className="text-5xl md:text-6xl font-sans text-center">

diff --git a/src/client/hooks.ts/useMutationObserver.ts b/src/client/hooks.ts/useMutationObserver.ts
@@ -0,0 +1,34 @@
+import {useEffect, RefObject} from "react";
+
+type MutationObserverCallback = (
+  mutations: MutationRecord[],
+  observer: MutationObserver
+) => void;
+
+type MutationObserverOptions = {
+  attributes?: boolean;
+  characterData?: boolean;
+  childList?: boolean;
+  subtree?: boolean;
+};
+
+const useMutationObserver = (
+  ref: RefObject<HTMLElement>,
+  callback: MutationObserverCallback,
+  options: MutationObserverOptions = {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  }
+) => {
+  useEffect(() => {
+    if (ref.current) {
+      const observer = new MutationObserver(callback);
+      observer.observe(ref.current, options);
+      return () => observer.disconnect();
+    }
+  }, [ref, callback, options]);
+};
+
+export default useMutationObserver;
diff --git a/src/client/hooks.ts/useOverflowDetection.ts b/src/client/hooks.ts/useOverflowDetection.ts
@@ -0,0 +1,39 @@
+import {useEffect, useState, RefObject} from "react";
+import {debounce} from "lodash";
+import useMutationObserver from "./useMutationObserver";
+
+const useOverflowDetection = (
+  ref: RefObject<HTMLElement>,
+  debounceDelay = 200
+) => {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+
+  const checkOverflow = debounce(() => {
+    if (ref.current) {
+      setIsOverflowing(ref.current.scrollWidth > ref.current.clientWidth);
+    }
+  }, debounceDelay);
+
+  useEffect(() => {
+    checkOverflow();
+
+    const handleResize = () => {
+      checkOverflow();
+    };
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      checkOverflow.cancel();
+    };
+  }, [ref, checkOverflow]);
+
+  useMutationObserver(ref, checkOverflow, {
+    childList: true,
+    subtree: true,
+  });
+
+  return isOverflowing;
+};
+
+export default useOverflowDetection;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -52,11 +52,7 @@ export default {
             minHeight: "3rem",
           },
         },
-        navbar: {
-          "base-100": "#ededed",
-          "base-content": "#fff", // "FOCUS" color
-          "neutral-content": "#fff", // "Click" "ACTIVE" color
-        },
+        navbar: {},
         form: {},
       },
       "dark",