From d8bf8c87efb0870b0db46ccbebc4eab00f5c4d86 Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Sat, 2 Jul 2022 22:13:53 +0530
Subject: [PATCH] feat(blog): hide aside if post is opened directly

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>
---
 src/pages/blog/Home.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/pages/blog/Home.tsx b/src/pages/blog/Home.tsx
index 973b0e4..7d6e7e5 100644
--- a/src/pages/blog/Home.tsx
+++ b/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) {