remove NavLinks component and move the code into SiteNav

Author: Ibraheem Ahmed

src/components/SiteNav/index.astro

@@ -1,11 +1,34 @@
 ---
 import { Icon } from 'astro-icon/components';
-import SiteNavLinks from '../SiteNavLinks/index.astro';
+import { Image } from 'astro:assets';
+import logo from '../../assets/icons/logo.svg';
 import './styles.css';
+const BLOG_URL = Astro.site?.href;
 ---
 
 <nav id="desktop-navigation" aria-label="Main blog navigation">
-	<SiteNavLinks />
+	<ul class="nav-links">
+		<li>
+			<a href={BLOG_URL}>
+				<Image src={logo} class="logo-rounded" alt="TorontoJS Logo!" height={70} width={70} />
+			</a>
+		</li>
+		<li>
+			<a href={`${BLOG_URL}accessibility`}>
+				Accessibility
+			</a>
+		</li>
+		<li>
+			<a href={`${BLOG_URL}license`}>
+				License
+			</a>
+		</li>
+		<li>
+			<a href={`${BLOG_URL}about`}>
+				About
+			</a>
+		</li>
+	</ul>
 </nav>
 
 <div id="mobile-navigation">
@@ -23,6 +46,27 @@ import './styles.css';
 				id="close-icon" name="mdi:close" title="Close Icon" width={70} height={70}
 			/>
 		</button>
-		<SiteNavLinks />
+		<ul class="nav-links">
+			<li>
+				<a href={BLOG_URL}>
+					<Image src={logo} alt="TorontoJS Logo!" height={70} width={70} class="logo-rounded" />
+				</a>
+			</li>
+			<li>
+				<a href={`${BLOG_URL}accessibility`}>
+					Accessibility
+				</a>
+			</li>
+			<li>
+				<a href={`${BLOG_URL}license`}>
+					License
+				</a>
+			</li>
+			<li>
+				<a href={`${BLOG_URL}about`}>
+					About
+				</a>
+			</li>
+		</ul>
 	</nav>
 </div>

src/components/SiteNav/styles.css

@@ -4,6 +4,22 @@
 	padding: var(--size-2);
 }
 
+.nav-links {
+	gap: var(--size-2);
+	align-items: center;
+	list-style: none;
+	display: flex;
+	padding: var(--size-3)
+}
+
+.nav-links a {
+	color: white;
+}
+
+#logo-rounded {
+	border-radius: var(--size-2);
+}
+
 #hamburger-button {
 	background-color: transparent;
 	padding: var(--size-3)
@@ -34,7 +50,7 @@
 	padding: var(--size-2);
 }
 
-@media (max-width: 31.25rem) {
+@media (max-width: 32rem) {
 	#mobile-navigation {
 		display: block;
 		text-align: right;
@@ -44,3 +60,9 @@
 		display: none;
 	}
 }
+
+@media (max-width: 32rem) {
+	.nav-links {
+		flex-direction: column;
+	}
+}