feat(blog): close draw

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

src/pages/blog/Home.tsx

@@ -5,6 +5,7 @@ import { Spacer } from "../../components/Spacer";
 import { ArticleSubHeader } from "./components/ArticleSubHeader";
 import { BlogPost } from "./components/BlogContent";
 import { articles, getBlogPath } from "../../data";
+import { ReactComponent as DrawClose } from "../../assets/draw-close.svg";
 
 const Header: React.FC = () => {
 	return (
@@ -78,12 +79,16 @@ const BlogHome: React.FC = () => {
 					overflow: hidden;
 
 					@media screen and (max-width: 80rem) {
+						div& > .draw-ctl {
+							display: none;
+						}
+
 						&:not(.article-open) {
 							aside {
 								min-width: 100vw;
 							}
 							main {
-								display: none;
+								max-width: 0;
 							}
 						}
 						&:is(.article-open) {
@@ -91,77 +96,126 @@ const BlogHome: React.FC = () => {
 								display: none;
 							}
 							main {
-								min-width: 100vw;
+								max-width: 0;
 							}
 						}
 					}
 
 					&:is(.aside-closed) {
 						aside {
-							display: none;
+							max-width: 0;
 						}
 					}
 
 					& > aside,
 					& > article {
+						transition: all 250ms;
+
 						@media screen and (max-width: 50rem) {
 							padding-block-start: 4rem;
 							padding-block-end: 6rem;
 						}
 					}
+
+					& > .draw-ctl {
+						border: none;
+						padding: 1rem;
+						padding-block: 10vw;
+						display: flex;
+						min-width: 3.6rem;
+						max-width: 3.6rem;
+					}
 				`,
 			)}>
+			{isArticleOpen ? (
+				<button
+					onClick={() => setAsideClosed(closed => !closed)}
+					className={cx(
+						"draw-ctl",
+						css`
+							transition: background-color 100ms;
+							background-color: #262626;
+
+							&:hover {
+								background-color: #323232;
+							}
+						`,
+					)}>
+					<DrawClose
+						width="2.6rem"
+						className={cx(
+							css`
+								transition: transform 100ms;
+							`,
+							{
+								[css`
+									transform: rotate(180deg);
+								`]: isAsideClosed,
+							},
+						)}
+					/>
+				</button>
+			) : (
+				<div className="draw-ctl"></div>
+			)}
 			<aside
 				className={css`
 					height: 100%;
 					width: 100%;
-					overflow-y: auto;
 					flex: 2;
-					display: flex;
-					flex-direction: column;
-					gap: 1rem;
-					padding: 8vw;
 					max-width: 45rem;
 				`}>
-				<Header />
-				<Spacer y={2} />
-				{articles.map(article => {
-					const { title, snippet } = article;
-					const path = getBlogPath(article);
-
-					return (
-						<div key={path}>
-							<Link
-								to={path}
-								className={css`
-									display: flex;
-									flex-direction: column;
-									gap: 0.25rem;
-									padding: 1rem;
-									border-radius: 0.5rem;
-									transition: all 300ms;
-
-									&:hover {
-										background: #262626;
-									}
-
-									& h3 {
-										padding: 0;
-										font-size: 1.4rem;
-									}
-
-									& * {
-										line-height: 1.2em;
-									}
-								`}>
-								<h3>{title}</h3>
-								<ArticleSubHeader article={article} />
-								<Spacer />
-								<p>{snippet}</p>
-							</Link>
-						</div>
-					);
-				})}
+				<div
+					className={css`
+						height: 100%;
+						width: 100%;
+						overflow-y: auto;
+						display: flex;
+						flex-direction: column;
+						gap: 1rem;
+						padding: 8vw;
+						min-width: 30rem;
+					`}>
+					<Header />
+					<Spacer y={2} />
+					{articles.map(article => {
+						const { title, snippet } = article;
+						const path = getBlogPath(article);
+
+						return (
+							<div key={path}>
+								<Link
+									to={path}
+									className={css`
+										display: flex;
+										flex-direction: column;
+										gap: 0.25rem;
+										padding: 1rem;
+										border-radius: 0.5rem;
+										transition: all 300ms;
+
+										&:hover {
+											background: #262626;
+										}
+
+										& h3 {
+											padding: 0;
+											font-size: 1.4rem;
+										}
+
+										& * {
+											line-height: 1.2em;
+										}
+									`}>
+									<h3>{title}</h3>
+									<ArticleSubHeader article={article} />
+									<Spacer />
+									<p>{snippet}</p>
+								</Link>
+							</div>
+						);
+					})}
+				</div>
 			</aside>
 			<article
 				className={cx(
@@ -169,20 +223,27 @@ const BlogHome: React.FC = () => {
 					css`
 						height: 100%;
 						width: 100%;
+						flex: 3;
+						z-index: 1000;
+					`,
+				)}>
+				<div
+					className={css`
+						height: 100%;
+						width: 100%;
 						overflow-y: auto;
 						overflow-x: hidden;
 						padding: 8vw;
 						background-color: #262626;
-						flex: 3;
 						display: flex;
 						flex-direction: column;
 						gap: 1.5rem;
-					`,
-				)}>
-				<Routes>
-					<Route path="/" element={<div></div>} />
-					<Route path="/*" element={<BlogPost />} />
-				</Routes>
+					`}>
+					<Routes>
+						<Route path="/" element={<div></div>} />
+						<Route path="/*" element={<BlogPost />} />
+					</Routes>
+				</div>
 			</article>
 		</div>
 	);