redesign draft 1

src/components/Header.astro

@@ -1,17 +1,17 @@
 ---
-import UserIcon from './icons/UserIcon.astro'
-import WebsiteIcon from './icons/Website.astro'
+import UserIcon from './icons/UserIcon.astro';
+import WebsiteIcon from './icons/Website.astro';
 
-const { pathname } = Astro.url
+const { pathname } = Astro.url;
 
 const navLinks = [
-	{ label: 'Blog', path: '/' },
-	{ label: 'About', path: '/about/' },
-]
+	{ label: '📝 Blog', path: '/' },
+	{ label: '👤 About', path: '/about/' },
+];
 ---
 
 <header>
-	<h1>Graham's Blog</h1>
+	<h1>ghall.blog</h1>
 	<nav>
 		<ul>
 			{
@@ -21,14 +21,6 @@ const navLinks = [
 							class={pathname === link.path ? 'active-nav' : null}
 							href={link.path}
 						>
-							{() => {
-								switch (link.label) {
-									case 'Blog':
-										return <WebsiteIcon class="icon" />
-									case 'About':
-										return <UserIcon class="icon" />
-								}
-							}}
 							<span>{link.label}</span>
 						</a>
 					</li>
@@ -50,8 +42,13 @@ const navLinks = [
 		align-items: center;
 	}
 
-	header h1 {
+	h1 {
 		text-align: center;
+		font-size: 1.8rem;
+	}
+
+	.title {
+		text-decoration: none;
 	}
 
 	nav ul {
@@ -66,6 +63,7 @@ const navLinks = [
 	nav ul li {
 		height: 40px;
 		align-items: center;
+		margin: 0;
 	}
 
 	nav ul li a {
@@ -78,13 +76,10 @@ const navLinks = [
 	}
 
 	nav ul li a::before {
-		content: '';
+		content: '❯';
 		position: absolute;
-		left: -10px;
-		width: 6px;
-		height: 6px;
-		border-radius: 10px;
-		background-color: var(--blue);
+		left: -12px;
+		color: var(--blue);
 		opacity: 0;
 	}