fix: layout and no editor view

components/Layout.tsx

@@ -14,7 +14,7 @@ const Layout = ({ children, noEditor = false }: LayoutProps) => (
       { [styles.noEditor as any]: noEditor },
     ])}
   >
-    <Nav />
+    <Nav noEditor={noEditor} />
     {children}
   </main>
 );

components/Nav.tsx

@@ -2,46 +2,67 @@ import github from "@iconify/icons-simple-icons/github";
 import mastodon from "@iconify/icons-simple-icons/mastodon";
 import prisma from "@iconify/icons-simple-icons/prisma";
 import { Icon } from "@iconify/react";
+import cx from "classnames";
 import Image from "next/image";
 import React from "react";
 
-const Nav = () => (
-  <nav
-    className="flex items-center w-full py-4 pl-5 pr-4 text-white bg-gray-600"
-    style={{ gridArea: "nav" }}
-  >
-    <Image src="/img/logo.svg" alt="Prismaliser" width={200} height={20} />
+interface Props {
+  noEditor: boolean;
+}
 
-    <div className="flex-1" />
+const Nav = ({ noEditor }: Props) => {
+  const logoHeight = noEditor ? 10 : 20;
+  const logoWidth = noEditor ? 100 : 200;
 
-    <div className="flex items-center gap-4">
-      <a
-        className="button icon light"
-        href="https://prisma.io"
-        title="Prisma website"
-        aria-label="Prisma website"
-      >
-        <Icon icon={prisma} height={24} />
-      </a>
+  return (
+    <nav
+      className={cx("flex items-center py-4 pl-5 pr-4 text-white bg-gray-600", {
+        "py-4 w-full": !noEditor,
+        "py-2 w-1/6": noEditor,
+      })}
+      style={{ gridArea: "nav" }}
+    >
+      <Image
+        src="/img/logo.svg"
+        alt="Prismaliser"
+        width={logoWidth}
+        height={logoHeight}
+      />
 
-      <a
-        className="button icon light"
-        href="https://github.com/Ovyerus/prismaliser"
-        title="Prismaliser GitHub repository"
-        aria-label="Prismaliser GitHub repository"
-      >
-        <Icon icon={github} height={24} />
-      </a>
-      <a
-        className="button icon light"
-        href="https://aus.social/@ovyerus"
-        title="Author's Mastodon account"
-        aria-label="Author's Mastodon account"
-      >
-        <Icon icon={mastodon} height={24} />
-      </a>
-    </div>
-  </nav>
-);
+      {!noEditor ? (
+        <>
+          <div className="flex-1" />
+          <div className="flex items-center gap-4">
+            <a
+              className="button icon light"
+              href="https://prisma.io"
+              title="Prisma website"
+              aria-label="Prisma website"
+            >
+              <Icon icon={prisma} height={24} />
+            </a>
+
+            <a
+              className="button icon light"
+              href="https://github.com/Ovyerus/prismaliser"
+              title="Prismaliser GitHub repository"
+              aria-label="Prismaliser GitHub repository"
+            >
+              <Icon icon={github} height={24} />
+            </a>
+            <a
+              className="button icon light"
+              href="https://aus.social/@ovyerus"
+              title="Author's Mastodon account"
+              aria-label="Author's Mastodon account"
+            >
+              <Icon icon={mastodon} height={24} />
+            </a>
+          </div>
+        </>
+      ) : null}
+    </nav>
+  );
+};
 
 export default Nav;

package.json

@@ -21,6 +21,7 @@
     "@monaco-editor/react": "^4.6.0",
     "@prisma/internals": "^5.7.0",
     "classcat": "^5.0.4",
+    "classnames": "^2.5.1",
     "elkjs": "^0.8.2",
     "html-to-image": "^1.11.11",
     "next": "^13.5.6",

util/layout.ts

@@ -6,7 +6,7 @@ import { EnumNodeData, ModelNodeData } from "./types";
 const elk = new Elk({
   defaultLayoutOptions: {
     "elk.algorithm": "layered",
-    "elk.direction": "RIGHT",
+    "elk.direction": "DOWN", // Change direction to DOWN for left to right layout
     "elk.spacing.nodeNode": "75",
     "elk.layered.spacing.nodeNodeBetweenLayers": "75",
   },