headerbar in graph view

vleue · Jun 19, 2024 · 74e9e41 · 74e9e41
1 parent e643eca
commit 74e9e41
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 3 deletions.
diff --git a/graph-ui/.eslintrc.json b/graph-ui/.eslintrc.json
@@ -1,3 +1,7 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "extends": "next/core-web-vitals",
+  "rules": {
+    // Other rules
+    "@next/next/no-html-link-for-pages": "off"
+  }
+}
diff --git a/graph-ui/pages/index.tsx b/graph-ui/pages/index.tsx
@@ -40,6 +40,7 @@ function useWindowDimensions() {
 export default function Home() {
     return (
         < div style={{ height: '100vh', width: '100vw' }}>
+            <Header />
             <NestedFlow />
         </div>
     );
@@ -64,12 +65,37 @@ import generated from '../generated/nodes';
 
 import Page from '../components/page';
 import Section from '../components/section';
+import Head from "next/head";
 
 const nodeTypes = {
     page: Page,
     section: Section,
 };
 
+function Header() {
+    useEffect(() => {
+        document.body.classList.add("home");
+        document.body.classList.add("dark");
+    });
+    return (
+        <div>
+            <Head>
+                <title>ByoBG</title>
+                <link rel="preload" as="font" href="/fonts/vendor/jost/jost-v4-latin-regular.woff2" type="font/woff2" />
+                <link rel="preload" as="font" href="/fonts/vendor/jost/jost-v4-latin-700.woff2" type="font/woff2" />
+                <link rel="stylesheet" href="/main.css" />
+            </Head>
+            <div className="header-bar fixed-top"></div>
+            <header className="navbar fixed-top navbar-expand-md navbar-light">
+                <div className="container ">
+                    <a className="navbar-brand order-1 order-md-0 me-auto" href="/">ByoBG</a>
+                </div>
+                <div id="mode" className="order-2 order-md-4"></div>
+            </header>
+        </ div >
+    );
+}
+
 const NestedFlow = () => {
     const [nodes, setNodes, onNodesChange] = useNodesState(generated.content);
     const [edges, setEdges, onEdgesChange] = useEdgesState(generated.dependencies);
@@ -87,7 +113,7 @@ const NestedFlow = () => {
             onNodesChange={onNodesChange}
             onEdgesChange={onEdgesChange}
             onConnect={onConnect}
-            className="react-flow-subflows-example"
+            className="bevy-graph"
             defaultViewport={{ x: size.width / 3, y: size.height / 4, zoom: 1.5 }}
             proOptions={proOptions}
             edgesUpdatable={false}

diff --git a/graph-ui/styles/globals.css b/graph-ui/styles/globals.css
@@ -51,4 +51,59 @@ body {
   background-color: #555 !important;
   border-bottom: 1px solid #676768 !important;
   color: #dddddd !important;
+}
+
+.bevy-graph {
+  position: static !important;
+}
+
+
+@media (min-width: 576px) {
+
+  .container-sm,
+  .container {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+
+  .container-md,
+  .container-sm,
+  .container {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+
+  .container-lg,
+  .container-md,
+  .container-sm,
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+
+  .container-xl,
+  .container-lg,
+  .container-md,
+  .container-sm,
+  .container {
+    max-width: 1140px;
+  }
+}
+
+@media (min-width: 1400px) {
+
+  .container-xxl,
+  .container-xl,
+  .container-lg,
+  .container-md,
+  .container-sm,
+  .container {
+    max-width: 1320px;
+  }
 }