feat: only show blog/list based on isArticleOpen

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

src/pages/blog/Home.tsx

@@ -1,6 +1,6 @@
-import { css } from "@emotion/css";
+import { css, cx } from "@emotion/css";
 import React from "react";
-import { Routes, Route, Link } from "react-router-dom";
+import { Routes, Route, Link, useLocation } from "react-router-dom";
 import { Spacer } from "../../components/Spacer";
 import { ArticleSubHeader } from "./components/ArticleSubHeader";
 import { BlogPost } from "./components/BlogContent";
@@ -57,15 +57,41 @@ const Header: React.FC = () => {
 };
 
 const BlogHome: React.FC = () => {
+	const location = useLocation();
+
+	const isArticleOpen = Boolean(location.pathname.split("/blog")[1]);
+
 	return (
 		<div
-			className={css`
+			className={cx(
-				display: flex;
+				{ "article-open": isArticleOpen },
-				background: #1d1d1d;
+				css`
-				height: 100%;
+					display: flex;
-				width: 100vw;
+					background: #1d1d1d;
-				overflow: hidden;
+					height: 100%;
-			`}>
+					width: 100vw;
+					overflow: hidden;
+
+					@media screen and (max-width: 80rem) {
+						&:not(.article-open) {
+							aside {
+								min-width: 100vw;
+							}
+							main {
+								display: none;
+							}
+						}
+						&:is(.article-open) {
+							aside {
+								display: none;
+							}
+							main {
+								min-width: 100vw;
+							}
+						}
+					}
+				`,
+			)}>
 			<aside
 				className={css`
 					height: 100%;
@@ -118,18 +144,21 @@ const BlogHome: React.FC = () => {
 				})}
 			</aside>
 			<article
-				className={css`
+				className={cx(
-					height: 100%;
+					{ "article-open": isArticleOpen },
-					width: 100%;
+					css`
-					overflow-y: auto;
+						height: 100%;
-					overflow-x: hidden;
+						width: 100%;
-					padding: 8rem;
+						overflow-y: auto;
-					background-color: #262626;
+						overflow-x: hidden;
-					flex: 3;
+						padding: 8rem;
-					display: flex;
+						background-color: #262626;
-					flex-direction: column;
+						flex: 3;
-					gap: 1.5rem;
+						display: flex;
-				`}>
+						flex-direction: column;
+						gap: 1.5rem;
+					`,
+				)}>
 				<Routes>
 					<Route path="/" element={<div></div>} />
 					<Route path="/*" element={<BlogPost />} />