ads

app/Nav.tsx

@@ -4,6 +4,7 @@ import styles from "../styles/Nav.module.scss";
 import Image from "next/image";
 import Link from "next/link";
 import { useEffect } from "react";
+import Category from "./articles/[categoryName]/page";
 
 function switchTheme(theme) {
 	const bodyElement = document.getElementsByTagName("body")[0];
@@ -56,7 +57,16 @@ export default function Nav() {
 					alt="Nav bar logo"
 				/>
 				<div className={styles.links}>
-					<Link href={"/articles/tutorials"}>Tutorials</Link>
+					<Link href={"/articles"} className={styles.dropDown}>
+						Categories
+						<div className={styles.dropDownContainer}>
+							<div className={styles.content}>
+								{" "}
+								<Link href={"/articles"}>All</Link>
+								<Link href={"/articles/tutorials"}>Tutorials</Link>
+							</div>
+						</div>
+					</Link>
 				</div>
 			</div>
 			<div className={styles.containerCenter}>

app/articles/DynamicCategoryGrid.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import styles from "../../styles/DynamicCategoryGrid.module.scss";
+import Link from "next/link";
+export default function DynamicCategoryGrid({ categories }) {
+	return (
+		<div className={styles.grid}>
+			{categories.map((cat, i) => {
+				{
+					return (
+						<div key={i} className={styles.linkContainer}>
+							<Link href="#" style={{ backgroundColor: cat.color }}>
+								<div className={styles.svgContainer}>
+									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+										<path d={cat.svg} />
+									</svg>
+								</div>
+								{cat.name}
+							</Link>
+						</div>
+					);
+				}
+			})}
+		</div>
+	);
+}

app/articles/page.tsx

@@ -1,3 +1,27 @@
-export default function Article() {
+import styles from "../../styles/CategoryList.module.scss";
-	return <h1>List all article</h1>;
+import Link from "next/link";
+import prisma from "../../lib/prisma";
+import { Category } from "@prisma/client";
+import { Suspense } from "react";
+import dynamic from "next/dynamic";
+
+export async function GetCategories(): Promise<Category[]> {
+	return await prisma.category.findMany();
+}
+
+const DynamicCategoryGrid = dynamic(() => import("./DynamicCategoryGrid"), {
+	loading: () => <p>Loading...</p>,
+});
+
+export default async function CategoryList() {
+	const categories = await GetCategories();
+
+	return (
+		<div className={styles.categoryList}>
+			<h1>Overview</h1>
+			<div className={styles.content}>
+				<DynamicCategoryGrid categories={categories} />
+			</div>
+		</div>
+	);
 }

package.json

@@ -4,7 +4,7 @@
 	"private": true,
 	"scripts": {
 		"dev": "next dev",
-		"build": "next build",
+		"build": "prisma generate && prisma migrate deploy && next build",
 		"start": "next start",
 		"lint": "next lint"
 	},

prisma/schema.prisma

@@ -35,6 +35,8 @@ model ContentTableEntry {
 model Category {
   id          Int       @id @default(autoincrement())
   name        String    @unique
+  color       String    @unique
+  svg         String    @default("")
   Article     Article[]
   dateCreated DateTime  @default(now())
   dateUpdated DateTime  @default(now())

styles/CategoryList.module.scss

@@ -0,0 +1,14 @@
+@import "variables.scss";
+.categoryList {
+	h1 {
+		text-align: center;
+		font-size: 1.5em;
+	}
+
+	.content {
+		margin-top: 30px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+}

styles/DynamicCategoryGrid.module.scss

@@ -0,0 +1,96 @@
+@import "variables.scss";
+.grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	gap: 10px 30px;
+
+	@media (max-width: $categoryList-breakpoint-1) {
+		grid-template-columns: 1fr 1fr;
+		gap: 10px 10px;
+	}
+
+	@media (max-width: $categoryList-breakpoint-2) {
+		grid-template-columns: 1fr;
+		width: 100%;
+
+		padding: 0px 20px 0 20px;
+	}
+
+	.linkContainer {
+		aspect-ratio: 14/9;
+		width: 250px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		@media (max-width: $categoryList-breakpoint-2) {
+			width: 100%;
+		}
+
+		a {
+			text-align: center;
+			aspect-ratio: 14/9;
+			width: 230px;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			row-gap: 20px;
+			background-color: #384d54;
+			color: white;
+			font-size: 0.8em;
+			transition: all 100ms linear;
+
+			&:hover {
+				box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.481);
+				color: white !important;
+				text-decoration: none !important;
+				width: 250px;
+				row-gap: 30px;
+				.svgContainer {
+					svg {
+						width: 70px;
+						height: 70px;
+					}
+				}
+			}
+
+			@media (max-width: $categoryList-breakpoint-2) {
+				font-size: 1.2em;
+				width: 95%;
+				&:hover {
+					box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0);
+					width: 100%;
+
+					.svgContainer {
+						svg {
+							width: 90px;
+							height: 90px;
+						}
+					}
+				}
+			}
+
+			.svgContainer {
+				width: 70px;
+				height: 70px;
+				@media (max-width: $categoryList-breakpoint-2) {
+					width: 90px;
+					height: 90px;
+				}
+				svg {
+					transition: all 100ms linear;
+					fill: rgb(255, 255, 255);
+					width: 60px;
+					height: 60px;
+
+					@media (max-width: $categoryList-breakpoint-2) {
+						width: 80px;
+						height: 80px;
+					}
+				}
+			}
+		}
+	}
+}

styles/Nav.module.scss

@@ -1,8 +1,8 @@
 @import "variables.scss";
 .nav {
 	background-color: var(--color-background-nav);
-	height: 60px;
+	height: $nav-height-inital;
-	margin-bottom: 50px;
+	margin-bottom: 10px;
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
 	align-items: center;
@@ -37,6 +37,43 @@
 		.links {
 			font-size: 0.8em;
 			font-weight: bold;
+
+			.dropDown {
+				color: var(--color-font-link);
+				text-decoration: none;
+				cursor: pointer;
+				&:hover {
+					.dropDownContainer {
+						display: block;
+					}
+				}
+				.dropDownContainer {
+					display: none;
+					position: absolute;
+					z-index: 1;
+					.content {
+						background-color: var(--color-background-dropdown);
+						min-width: 160px;
+						box-shadow: 0px 12px 16px 5px rgba(0, 0, 0, 0.2);
+						margin-top: 21px;
+
+						a {
+							float: none;
+							color: var(--color-font-link);
+							padding: 12px 16px;
+							text-decoration: none;
+							display: block;
+							text-align: left;
+							border-left: 2px solid transparent;
+							transition: all 50ms linear;
+
+							&:hover {
+								border-color: var(--color-accent);
+							}
+						}
+					}
+				}
+			}
 		}
 	}
 

styles/colorVariables.scss

@@ -10,9 +10,12 @@
 	--color-svg-nav: rgb(191, 191, 191);
 
 	--color-background-card: rgba(123, 123, 123, 0.13);
+	--color-background-dropdown: var(--color-background-body);
 	--color-accent: #2294ff;
 	--color-font-link: var(--color-accent);
 
+	--color-font-link-hover: #5caffc;
+
 	/* Colors: Markdown */
 	--md-color-font: rgb(220, 217, 217);
 	--md-color-headline: rgb(229, 228, 228);
@@ -35,8 +38,10 @@
 		--color-svg-nav: rgb(54, 54, 54);
 
 		--color-background-card: rgba(171, 170, 170, 0.13);
+		--color-background-dropdown: var(--color-background-body);
 		--color-accent: #2294ff;
 		--color-font-link: var(--color-accent);
+		--color-font-link-hover: #0966be;
 
 		/* Colors: Markdown */
 		--md-color-font: rgb(33, 33, 33);

styles/globals.scss

@@ -43,9 +43,11 @@ a {
 	font-weight: bold;
 	text-decoration: none;
 	color: var(--color-font-link);
+	transition: color 50ms linear;
 
 	&:hover {
 		text-decoration: underline;
+		color: var(--color-font-link-hover) !important;
 	}
 
 	&:visited {

styles/variables.scss

@@ -17,7 +17,12 @@ $footer-breakpoint-3: 800px;
 $footer-breakpoint-4: 440px;
 
 /* Nav */
+$nav-height-inital: 60px;
 $nav-breakpoint-1: 1040px;
 $nav-breakpoint-2: 820px;
 $nav-breakpoint-3: 500px;
 $nav-breakpoint-4: 400px;
+
+/* CategoryList */
+$categoryList-breakpoint-1: 850px;
+$categoryList-breakpoint-2: 600px;