adjust nav bar based on screen size

README.md

@@ -13,7 +13,7 @@ Articles are written in markdown or MDX (I am using [Joplin](https://github.com/
 Install dependencies:
 
 ```sh
-pnpm import
+pnpm install
 ```
 
 ### Dev Server
@@ -26,7 +26,7 @@ pnpm dev --open --host
 
 The site should be now accessible at [http://localhost:4321/](http://localhost:4321/). A specific port can be specified using `--port` flag.
 
-### Build
+### Build Site
 
 Build deployable site:
 

src/components/Header.astro

@@ -1,8 +1,7 @@
 ---
 import { SITE_TITLE } from '../consts';
 ---
-<!-- https://git.inamatrix.xyz/array-in-a-matrix/bloginamatrix.xyz/src/branch/hpx-spa/src/components -->
-<!-- TODO: make nav bar vertical to the right -->
+
 <header>
 	<nav>
 		<h2><a href="/">{SITE_TITLE}</a></h2>
@@ -16,15 +15,24 @@ import { SITE_TITLE } from '../consts';
 <style>
 	header {
 		margin: 0;
-		padding: 0 1em;
 		background: white;
-		box-shadow: 0 2px 8px rgba(var(--black), 5%);
+		box-shadow: 0 2px 8px rgba(var(--black), 50%);
+	}
+	@media (max-width: 720px) {
+		header{
+			display: flex;
+			justify-content: center;
+		}
+	}
+	@media (min-width: 720px) {
+		nav{
+			height: 100vh;
+		}
 	}
 	h2 {
 		margin: 0;
 		font-size: 1em;
 	}
-
 	h2 a,
 	h2 a.active {
 		text-decoration: none;
@@ -33,27 +41,29 @@ import { SITE_TITLE } from '../consts';
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
+		flex-flow: column wrap;
+		width: 200px;
+		position: sticky;
+		top: 0;
+		left: 0;
+	}
+	nav div{
+		display: grid;
+		justify-items: center;
+		width: 100%;
+		text-align: center;
 	}
 	nav a {
 		padding: 1em 0.5em;
 		color: var(--black);
 		border-bottom: 4px solid transparent;
 		text-decoration: none;
+		display: inline-block;
+		width: 100%;
 	}
 	nav a.active {
 		text-decoration: none;
 		border-bottom-color: var(--accent);
-	}
-	@media (max-width: 720px) {
-		.social-links {
-			display: none;
-		}
-	}
-	a {
-		display: inline-block;
-		text-decoration: none;
-	}
-	a.active {
 		font-weight: bolder;
 		text-decoration: underline;
 	}

src/styles/global.css

@@ -41,6 +41,7 @@ body {
 	color: rgb(var(--gray-dark));
 	font-size: 20px;
 	line-height: 1.7;
+	display: flex;
 }
 main {
 	width: 720px;
@@ -129,6 +130,7 @@ hr {
 @media (max-width: 720px) {
 	body {
 		font-size: 18px;
+		flex-direction: column;
 	}
 	main {
 		padding: 1em;