feat(blog): hide aside if post is opened directly

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>

src/pages/blog/Home.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from "@emotion/css";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Routes, Route, Link, useLocation } from "react-router-dom";
 import { Spacer } from "../../components/Spacer";
 import { ArticleSubHeader } from "./components/ArticleSubHeader";
@@ -59,11 +59,22 @@ const BlogHome: React.FC = () => {
 	const location = useLocation();
 
 	const isArticleOpen = Boolean(location.pathname.split("/blog")[1]);
+	const [isAsideClosed, setAsideClosed] = useState(false);
+
+	useEffect(() => {
+		if (isArticleOpen) setAsideClosed(true);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	useEffect(() => {
+		if (!isArticleOpen) setAsideClosed(false);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isArticleOpen]);
 
 	return (
 		<div
 			className={cx(
-				{ "article-open": isArticleOpen },
+				{ "article-open": isArticleOpen, "aside-closed": isAsideClosed },
 				css`
 					display: flex;
 					background: #1d1d1d;
@@ -90,6 +101,12 @@ const BlogHome: React.FC = () => {
 						}
 					}
 
+					&:is(.aside-closed) {
+						aside {
+							display: none;
+						}
+					}
+
 					& > aside,
 					& > article {
 						@media screen and (max-width: 50rem) {