fix(Header): responsive header

matias-lg · Nov 11, 2023 · 89ae046 · 89ae046
1 parent 46a9b18
commit 89ae046
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 50 deletions.
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { Grid, GridItem } from "@chakra-ui/react";
 import { useState } from "react";
 import Body from "../components/Body";
 import Header from "../components/Header/Header";
@@ -21,37 +20,14 @@ const Page = () => {
         setLoadedDiagramFromOutside,
       }}
     >
-      <Grid
-        templateAreas={`
-     "header"
-     "main"
-    `}
-        gridTemplateRows={"5% auto"}
-        h="100%"
-        gap="0"
-      >
-        <GridItem
-          mb={0}
-          display={"flex"}
-          backgroundColor={"#232730"}
-          borderBottom={"1px"}
-          borderBottomColor={"rgb(248 250 252 / 0.16)"}
-          area="header"
-        >
+      <div className="flex h-screen w-screen flex-col">
+        <div className="flex  h-[10%] justify-between border-b border-b-border  bg-[#232730] min-[1340px]:h-[5%]">
           <Header />
-        </GridItem>
-
-        <GridItem
-          overflow={"hidden"}
-          area={"main"}
-          display={"flex"}
-          w={"100%"}
-          flexDir={"row"}
-          justifyContent={"space-between"}
-        >
+        </div>
+        <div className="h-[90%] min-[1340px]:h-[95%]">
           <Body />
-        </GridItem>
-      </Grid>
+        </div>
+      </div>
     </Context.Provider>
   );
 };

diff --git a/src/app/components/Body.tsx b/src/app/components/Body.tsx
@@ -1,12 +1,10 @@
 "use client";
-import { PanelGroup, Panel } from "react-resizable-panels";
-import CodeEditor from "./CodeEditor/CodeEditor";
-import { PanelResizeHandle } from "react-resizable-panels";
-import { ErDiagram } from "./ErDiagram/ErDiagram";
-import { Box } from "@chakra-ui/react";
-import { useCallback, useState } from "react";
+import { useState } from "react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { ER } from "../../ERDoc/types/parser/ER";
 import { erDocWithoutLocation } from "../util/common";
+import CodeEditor from "./CodeEditor/CodeEditor";
+import { ErDiagram } from "./ErDiagram/ErDiagram";
 
 const Body = () => {
   const [erDoc, setErDoc] = useState<ER | null>(null);
@@ -27,18 +25,12 @@ const Body = () => {
   return (
     <PanelGroup direction="horizontal">
       <Panel defaultSize={40} minSize={25}>
-        <Box
-          height={"full"}
-          width={"full"}
-          display={"flex"}
-          flexDir={"column"}
-          overflow={"hidden"}
-        >
+        <div className="flex h-full w-full flex-col overflow-hidden">
           <CodeEditor
             onErDocChange={onErDocChange}
             onErrorChange={setErDocHasError}
           />
-        </Box>
+        </div>
       </Panel>
       <PanelResizeHandle
         className={`relative w-1 ${dragging ? "bg-secondary" : "bg-primary"}`}
@@ -49,9 +41,9 @@ const Body = () => {
         <div className="h-full w-1 bg-primary hover:bg-secondary"></div>
       </PanelResizeHandle>
       <Panel defaultSize={60}>
-        <Box pt={1} height="full">
+        <div className="h-full pt-1">
           <ErDiagram erDoc={erDoc!} erDocHasError={erDocHasError} />
-        </Box>
+        </div>
       </Panel>
     </PanelGroup>
   );

diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
@@ -44,10 +44,11 @@ export const Header = () => {
 
   return (
     <>
-      <div className="flex h-full w-[63%]  items-center pl-6  text-slate-200">
-        ERdoc Playground
+      <div className="flex w-[200px] items-center pl-6 text-slate-200 min-[1340px]:w-[400px] min-[1800px]:w-[770px]">
+        <span>ERdoc Playground</span>
       </div>
-      <div className=" flex h-full w-[90%] items-center pl-2 text-slate-200">
+
+      <div className="flex h-full w-auto text-slate-200">
         <HeaderElement className="border-l-[1px]">
           <AutoLayoutSwitch title={t("autoLayout")} />
         </HeaderElement>
@@ -68,13 +69,14 @@ export const Header = () => {
         <HeaderElement className="cursor-pointer border-l-[1px] border-r-[1px]">
           <DynamicExportButton />
         </HeaderElement>
+
         <HeaderElement className="border-r-[1px]">
           <a className="flex items-center" href="/docs" target="_blank">
             <BiSolidBook /> <span className="pl-2">{t("documentation")}</span>
           </a>
         </HeaderElement>
       </div>
-      <div className=" flex h-full items-center pl-2 text-slate-200">
+      <div className="ml-auto mr-0 flex h-full items-center text-slate-200">
         <GitHubButton />
       </div>
     </>