adapted blog and scrollable menu

app/blog.js

@@ -6,12 +6,10 @@ export const dynamic = 'auto',
 async function getPosts() {
     const client = new PocketBase('https://backend.saachen.lu');
     const adminAuthData = await client.admins.authViaEmail(process.env.USERNAME, process.env.PASSWORD);
-//console.log(adminAuthData);
     const resultList = await client.records.getList('blogposts', 1, 50, {
         filter: 'created >= "2022-01-01 00:00:00"',
         expand: 'categories'
     });
-    //console.log(resultList);
     return resultList;
 }
 

app/globals.css

@@ -22,15 +22,18 @@ main {
   display: flex;
   flex-direction: row;
   gap: 10rem;
-  height: 100%;
 }
 nav {
   background-color: #2d2d2d;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   padding-left: 3rem;
   padding-right: 3rem;
+  height: 100vh;
 }
 
 .social {
@@ -39,6 +42,58 @@ nav {
   justify-content: space-between;
 }
 
+.categories {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  font-size: 12px;
+  margin: 0;
+  padding: 0.3rem;
+  padding-top: 1.3rem;
+}
+
+.post {
+  /*border: 0.2rem solid #BDC3C7;
+  border-top-right-radius: 5%;
+  border-top-left-radius: 5%;*/
+  padding-bottom: 0.3rem;
+  margin-right: 10rem;
+}
+
+.post > h1 {
+  width: 100%;
+  border: 0.1rem solid #34495E;
+  border-radius: 1.3rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  color: #ECF0F1;
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
+  margin: 0;
+  text-align: center;
+  background-color: #34495E;
+}
+
+.postList {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  align-content: center;
+}
+
+.postContent {
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
+  margin: 0;
+  border: 0.1rem solid #34495E;
+}
+
+.postParagraph {
+  margin-bottom: 0.5rem;
+}
+
 @media (prefers-color-scheme: dark) {
   html {
     color-scheme: dark;

app/page.js

@@ -9,27 +9,28 @@ export const dynamic = 'auto',
 
 export default async function Page({ children }) {
     const posts = await getPosts;
-    console.log(posts)
     return(
         <div>
-            <div>
+            <div className="postList">
                 {posts.items.map((item, i) => (
-                    <div key={i}>
+                    <div key={i} className="post">
                         <h1>
                             {item.title}
                         </h1>
-                        <br/>
-                        {console.log(item["@expand"])}
-                        {item["@expand"].categories.map((item, i) => (
-                            <div key={i}>
-                                {item.name}
+                        <div className="postContent">
+                            <div className="categories">
+                                {item["@expand"].categories.map((item, i) => (
+                                    <div key={i} style={{backgroundColor: item.color, color: item.text_color , borderRadius: 100, textAlign: "center", padding: "0.15rem", fontWeight: "bold"}}>
+                                        {item.name}
+                                    </div>
+                                ))}
                             </div>
-                        ))}
-                        <br/>
-                        {item.title}
-                        <br/>
-                        <br/>
-                        {item.content}
+                            {item.content.split(/\r?\n/).map((item, i) => (
+                                <p className="postParagraph" key={i}>
+                                    {item}
+                                </p>
+                            ))}
+                        </div>
                     </div>
                 ))}
             </div>