From c56bacc34b781ec97dc3e5e96beca85b4cc11676 Mon Sep 17 00:00:00 2001 From: Tuan Cao Date: Thu, 24 Mar 2022 14:43:18 +0700 Subject: [PATCH] Put Side bar to both Index and post pages Make nav bar appear on the left side. --- components/FolderTree.js | 2 +- components/layout.js | 6 ++++-- pages/index.js | 15 ++++++++++----- pages/note/[id].js | 27 +++++++++++++++++---------- styles/style.css | 9 ++++++++- 5 files changed, 40 insertions(+), 19 deletions(-) diff --git a/components/FolderTree.js b/components/FolderTree.js index bc228f6..5fa2e35 100644 --- a/components/FolderTree.js +++ b/components/FolderTree.js @@ -29,7 +29,7 @@ export default function FolderTree(props) { router.push(currentNode.routePath) } }} - sx={{ height: 110, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} + sx={{ flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} > {renderTree(props.tree)} diff --git a/components/layout.js b/components/layout.js index aff8662..af6220e 100644 --- a/components/layout.js +++ b/components/layout.js @@ -1,12 +1,14 @@ import Head from 'next/head' // import BasicTree from 'lib/MyFolderTree' export const siteTitle = 'Digital Backroom - An Internet Archive' - +import {Box} from '@mui/material' export default function Layout({children, home}) { return (
-
{children}
+
+ {children} +
) } diff --git a/pages/index.js b/pages/index.js index 3ce2fc1..cc7d432 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,15 +1,20 @@ import Layout, {siteTitle} from "../components/layout"; import {getSinglePost, getGraphData, getDirectoryData, convertObject, getFlattenArray} from "../lib/utils"; import FolderTree from "../components/FolderTree"; +import {Box} from '@mui/material' -export default function Home({content, graphdata, filenames, tree,flattenNodes, ...props}) { +export default function Home({content, graphdata, filenames, tree, flattenNodes, ...props}) { return ( -
- -
-
+
+ +
+
+
+
); diff --git a/pages/note/[id].js b/pages/note/[id].js index 4d5a6db..013cbf1 100644 --- a/pages/note/[id].js +++ b/pages/note/[id].js @@ -3,11 +3,12 @@ import Link from 'next/link' import { useRouter } from 'next/router' import { useEffect,useRef } from "react"; import Layout, { siteTitle } from "../../components/layout"; -import { getPostListData, getSinglePost, getGraphData} from "../../lib/utils"; +import {getPostListData, getSinglePost, getGraphData, convertObject, getDirectoryData} from "../../lib/utils"; import { Network } from "../../components/graph"; +import FolderTree from "../../components/FolderTree"; +import {getFlattenArray} from "../../lib/utils"; - -export default function Home({ note, graphdata, ...props }) { +export default function Home({ note, graphdata,tree, flattenNodes, ...props }) { var jsnx = require('jsnetworkx'); //console.log("Note Page: ") @@ -57,14 +58,17 @@ export default function Home({ note, graphdata, ...props }) { {note.title && } -
+
+
-
-
+ + + ); @@ -84,12 +88,15 @@ export async function getStaticProps({ params }) { //console.log("params2", note) const graphdata = getGraphData(); //console.log("params3", params) - + const tree = convertObject(getDirectoryData()); + const flattenNodes = getFlattenArray(tree) //console.log("note: ", params) return { props: { note, - graphdata:graphdata, + graphdata:graphdata, + tree: tree, + flattenNodes: flattenNodes }, }; } diff --git a/styles/style.css b/styles/style.css index 3c7cb91..bc79150 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,6 +6,10 @@ a:hover { color: var(--text-accent-hover); } +.container { + display: flex; + justify-content: center; +} .markdown-rendered { font-size: 18px; @@ -14,10 +18,13 @@ a:hover { background-color: var(--background-primary); color: var(--text-normal); font-family:var(--default-font); - margin: auto; padding: 20px; } +.nav-bar { + width: 400px; + padding: 20px; +} :root { --default-font: 'Inter', sans-serif; }