From ec6a2c8dde389c73f58f0b31e3b6552545971d66 Mon Sep 17 00:00:00 2001
From: Eero Holmala <eero.holmala@hotmail.com>
Date: Fri, 2 Jun 2023 12:36:49 +0300
Subject: [PATCH] Frontend: Scuffed layout

---
 web/Frontend/src/app/globals.css       |  1 +
 web/Frontend/src/app/layout.tsx        |  2 +-
 web/Frontend/src/app/navbar.css        | 15 +++++++++
 web/Frontend/src/app/page.module.css   | 44 ++++++++++++++++++++++++++
 web/Frontend/src/app/page.tsx          | 31 +++++++++++++++---
 web/Frontend/src/components/navbar.tsx |  6 +++-
 6 files changed, 92 insertions(+), 7 deletions(-)
 create mode 100644 web/Frontend/src/app/navbar.css

diff --git a/web/Frontend/src/app/globals.css b/web/Frontend/src/app/globals.css
index 3acf782..343cf79 100644
--- a/web/Frontend/src/app/globals.css
+++ b/web/Frontend/src/app/globals.css
@@ -83,6 +83,7 @@ html,
 body {
   max-width: 100vw;
   overflow-x: hidden;
+  font-family: var(--font-mono);
 }
 
 /* body {
diff --git a/web/Frontend/src/app/layout.tsx b/web/Frontend/src/app/layout.tsx
index 7bb8afb..c386eb4 100644
--- a/web/Frontend/src/app/layout.tsx
+++ b/web/Frontend/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import './globals.css'
-import 'bootstrap/dist/css/bootstrap.min.css';
+// import 'bootstrap/dist/css/bootstrap.min.css';
 import { Inter } from 'next/font/google'
 
 const inter = Inter({ subsets: ['latin'] })
diff --git a/web/Frontend/src/app/navbar.css b/web/Frontend/src/app/navbar.css
new file mode 100644
index 0000000..2ac645c
--- /dev/null
+++ b/web/Frontend/src/app/navbar.css
@@ -0,0 +1,15 @@
+ul.navbar {
+    flex: auto;
+    background-color: black;
+    color: white;
+}
+
+.navbar li {
+    list-style: none;
+}
+
+.navbar li.title {
+    width: fit-content;
+}
+
+
diff --git a/web/Frontend/src/app/page.module.css b/web/Frontend/src/app/page.module.css
index 9411a5e..51e56b1 100644
--- a/web/Frontend/src/app/page.module.css
+++ b/web/Frontend/src/app/page.module.css
@@ -227,3 +227,47 @@
     transform: rotate(0deg);
   }
 }
+
+.container {
+  padding-top: 10vh;
+  display: flex;
+  justify-items: center;
+  flex-direction: row;
+}
+
+.navbar {
+  background-color: aqua;
+  position: fixed;
+  display: inherit;
+  height: 10vh;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.navbar a {
+  flex: 1;
+  padding-left:5rem;
+  padding-right:5rem;
+  
+}
+
+.colLeft {
+  justify-items: center;
+  padding-left:5rem;
+  padding-right:5rem;
+  height: 100vh;
+  flex: 1;
+}
+.colCenter {
+  height: 100vh;
+  padding-left:5rem;
+  padding-right:5rem;
+  flex: 3;
+  text-align: justify;
+}
+.colRight {
+  padding-left:5rem;
+  padding-right:5rem;
+  height: 100vh;
+  flex: 1;
+}
\ No newline at end of file
diff --git a/web/Frontend/src/app/page.tsx b/web/Frontend/src/app/page.tsx
index 922eb53..5062d3d 100644
--- a/web/Frontend/src/app/page.tsx
+++ b/web/Frontend/src/app/page.tsx
@@ -1,11 +1,32 @@
 import Image from 'next/image'
 import styles from './page.module.css'
+import nextSvg from '../../public/next.svg'
 import Board from '@/components/board'
 
 export default function Home() {
   return (
-    <main>
-      <Board></Board>
-    </main>
-  )
-}
+    <>
+      <div className={styles.navbar}>
+        <Image src={nextSvg} width={200} height={50} alt={"Zilla"}></Image>
+        <a href="/html/">HTML</a>
+        <a href="/css/">CSS</a>
+        <a href="/js/">JavaScript</a>
+        <a href="/python/">Python</a>
+      </div>
+      <div className={styles.container}>
+        <div className={styles.colLeft}>
+          <h2>Side Content</h2>
+          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos magnam possimus doloribus ea porro sit placeat, fugiat quae corporis quasi ex, nesciunt laboriosam veniam molestias, quam vitae enim fugit quo.</p>
+        </div>
+        <div className={styles.colCenter}>
+          <h1>Test</h1>
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti labore temporibus ullam! Deleniti minus nesciunt adipisci a minima consequatur, consectetur explicabo cum voluptate distinctio magni nostrum officia? Pariatur, cumque assumenda!</p>
+        </div>
+        <div className={styles.colRight}>
+        <h2>Side Info</h2>
+          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos magnam possimus doloribus ea porro sit placeat, fugiat quae corporis quasi ex, nesciunt laboriosam veniam molestias, quam vitae enim fugit quo.</p>
+        </div>
+      </div>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/web/Frontend/src/components/navbar.tsx b/web/Frontend/src/components/navbar.tsx
index 4846cb1..e9cb679 100644
--- a/web/Frontend/src/components/navbar.tsx
+++ b/web/Frontend/src/components/navbar.tsx
@@ -1,6 +1,10 @@
+import '../app/navbar.css'
+import Image from 'next/image';
+
 export default function NavBar() {
     return(
-        <ul>
+        <ul className='navbar'>
+            <li className='title'><Image src='' alt=''/></li>
             <li>Navbar</li>
             <li>Navbar 2</li>
         </ul>