fixing centering of toolbar

thomasgauvin · May 26, 2024 · 87de197 · 87de197
1 parent e296eb3
commit 87de197
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git a/src/components/MarkdownEditor/RemirrorCustomToolbar/RemirrorCustomToolbar.tsx b/src/components/MarkdownEditor/RemirrorCustomToolbar/RemirrorCustomToolbar.tsx
@@ -1,3 +1,5 @@
+import { useContext } from 'react';
+
 //import all the above from the same file
 import { 
   RemirrorCustomToolbarBlockquoteButton,
@@ -20,19 +22,31 @@ import {
   RemirrorCustomToolbarHeadingButton,
 } from "./RemirrorCustomToolbarHeadingButton";
 
+import { SidebarContext } from "../../../pages/Editor";
+
 import * as Menubar from "@radix-ui/react-menubar";
 
 export const RemirrorCustomToolbar = ({}: {}) => {
+
+  const { width, panelIsOpen } = useContext(SidebarContext);
+
+  console.log(`calc(0 - ${width ? width : '0'}px)`);
+
+  console.log(width, panelIsOpen, window.screen.width)
+
   return (
     <div
       className={`fixed bottom-0 z-30 my-4 justify-center items-center 
-    sm:max-w-[calc(48rem-1.5rem-1.5rem)] 
-    md:max-w-[calc(48rem-2rem-2rem)]
-    lg:max-w-[calc(48rem-2.5rem-2.5rem)]
-    -sm:w-full md:w-fit
-    w-[calc(100%-4rem)] lg:w-full
-    mx-0
-    `}
+      max-w-[100vw]
+      w-[100vw]
+      mx-0
+      left-0
+      max-[768px]:!pl-0
+    `}//need to change left-0 so that it reacts when the sidebar is open (left-sidebar/2)
+    //important needed to override style on screens (cant have media queries in style)
+    style={{
+      paddingLeft: `${panelIsOpen ? `${width/2}` : '0'}px`
+    }}
     >
       <div className="flex justify-center items-center ">
         <Menubar.Root className="border overflow-hidden inline-flex flex-shrink-0 bg-white rounded-full shadow-lg">

diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx
@@ -1,11 +1,16 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, createContext } from "react";
 import { LocalFileSystem } from "../components/FileSystemAdapters/FileSystem/LocalFileSystem";
 import { FileEditor } from "../components/MarkdownEditor/FileEditor";
 import DirectoryNode from "../models/DirectoryNode";
 import { PanelLeftOpen, PanelLeftClose } from "lucide-react";
 import { WorkspaceSelector } from "../components/FileSystemAdapters/FileSystem/WorkspaceSelector";
 import ResizableSidebar from "../components/ui/ResizableSidebar";
 
+export const SidebarContext = createContext({
+  width:300,
+  panelIsOpen: true
+});
+
 export const EditorPage: React.FC = () => {
   const [selectedFile, setSelectedFile] = useState<DirectoryNode | null>(null); // [selectedFile, setSelectedFile
   const [selectedDirectory, setSelectedDirectory] =
@@ -23,13 +28,17 @@ export const EditorPage: React.FC = () => {
   };
 
   return (
+    <SidebarContext.Provider value={{
+      width: width,
+      panelIsOpen: panelIsOpen
+    }}>
     <div className="EditorPage flex h-dvh w-full overflow-hidden">
       <ResizableSidebar
         minWidth={minWidth}
         maxWidth={maxWidth}
         setWidth={setWidth}
         hidden={!panelIsOpen || !selectedDirectory}
-        style={{ maxWidth: `${width / 16}rem` }}
+        style={{ maxWidth: `${width}px` }}
       >
         <LocalFileSystem
           selectedDirectory={selectedDirectory}
@@ -152,5 +161,6 @@ export const EditorPage: React.FC = () => {
         </div>
       </main>
     </div>
+    </SidebarContext.Provider>
   );
 };