fix(blog): blog content load animation

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

src/assets/draw-close.svg

@@ -0,0 +1,4 @@
+<svg width="27" height="18" viewBox="0 0 27 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.14286 18L10.7143 16.4531L4.2449 10.1049H25V7.89509H4.2449L10.7143 1.52679L9.14286 0L0 9L9.14286 18Z" fill="#B5B5B5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25 16V3H27V16H25Z" fill="#B5B5B5"/>
+</svg>

src/index.css

@@ -17,8 +17,9 @@
 
 body {
 	margin: 0;
-	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-		"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+		"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+		sans-serif;
 	color: var(--text-colour);
 	height: 100vh;
 }
@@ -28,7 +29,8 @@ body {
 }
 
 code {
-	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+		monospace;
 }
 
 h1,
@@ -80,3 +82,7 @@ a {
 a:hover {
 	color: var(--primary-colour);
 }
+
+button {
+	cursor: pointer;
+}

src/pages/blog/Home.tsx

@@ -1,11 +1,12 @@
-import { css, cx } from "@emotion/css";
+import { css } from "@emotion/css";
 import React, { useEffect, useState } from "react";
-import { Routes, Route, Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 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";
+import classNames from "classnames";
 
 const Header: React.FC = () => {
 	return (
@@ -69,7 +70,9 @@ const BlogHome: React.FC = () => {
 
 	return (
 		<div
-			className={cx(
+			data-home
+			key="blog-home"
+			className={classNames(
 				{ "article-open": isArticleOpen, "aside-closed": isAsideClosed },
 				css`
 					display: flex;
@@ -77,6 +80,7 @@ const BlogHome: React.FC = () => {
 					height: 100%;
 					width: 100vw;
 					overflow: hidden;
+					position: relative;
 
 					@media screen and (max-width: 80rem) {
 						div& > .draw-ctl {
@@ -101,69 +105,64 @@ const BlogHome: React.FC = () => {
 						}
 					}
 
+					& > aside {
+						transition: all 250ms;
+					}
+
 					&:is(.aside-closed) {
 						aside {
 							max-width: 0;
 						}
 					}
-
+				`,
-					& > aside,
+			)}>
-					& > article {
+			<button
-						transition: all 250ms;
+				onClick={() => setAsideClosed(closed => !closed)}
-
+				className={classNames(
-						@media screen and (max-width: 50rem) {
+					css`
-							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;
-					}
+						transition: background-color 100ms;
-				`,
+						background-color: #262626;
-			)}>
+						position: absolute;
-			{isArticleOpen ? (
+						width: 100%;
-				<button
+						height: 100%;
-					onClick={() => setAsideClosed(closed => !closed)}
+						transition: transform 300ms;
-					className={cx(
-						"draw-ctl",
-						css`
-							transition: background-color 100ms;
-							background-color: #262626;
 
-							&:hover {
+						&:hover {
-								background-color: #323232;
+							background-color: #323232;
-							}
+						}
+					`,
+					!isArticleOpen &&
+						css`
+							transform: translateX(-100%);
 						`,
-					)}>
+				)}>
-					<DrawClose
+				<DrawClose
-						width="2.6rem"
+					width="2.6rem"
-						className={cx(
+					className={classNames(
-							css`
+						css`
-								transition: transform 100ms;
+							transition: transform 100ms;
-							`,
+						`,
-							{
+						{
-								[css`
+							[css`
-									transform: rotate(180deg);
+								transform: rotate(180deg);
-								`]: isAsideClosed,
+							`]: isAsideClosed,
-							},
+						},
-						)}
+					)}
-					/>
+				/>
-				</button>
+			</button>
-			) : (
-				<div className="draw-ctl"></div>
-			)}
 			<aside
 				className={css`
 					height: 100%;
 					width: 100%;
 					flex: 2;
 					max-width: 45rem;
+					margin-inline-start: 3.6rem;
 				`}>
 				<div
 					className={css`
@@ -175,6 +174,11 @@ const BlogHome: React.FC = () => {
 						gap: 1rem;
 						padding: 8vw;
 						min-width: 30rem;
+
+						@media screen and (max-width: 50rem) {
+							padding-block-start: 4rem;
+							padding-block-end: 6rem;
+						}
 					`}>
 					<Header />
 					<Spacer y={2} />
@@ -218,31 +222,56 @@ const BlogHome: React.FC = () => {
 				</div>
 			</aside>
 			<article
-				className={cx(
+				className={classNames(
 					{ "article-open": isArticleOpen },
 					css`
 						height: 100%;
 						width: 100%;
 						flex: 3;
 						z-index: 1000;
+						display: flex;
+						position: relative;
+						overflow: hidden;
+
+						& > * {
+							height: 100%;
+							width: 100%;
+						}
 					`,
 				)}>
 				<div
-					className={css`
+					key="blog-content"
-						height: 100%;
+					className={classNames(
-						width: 100%;
+						css`
-						overflow-y: auto;
+							background-color: #262626;
-						overflow-x: hidden;
+							position: absolute;
-						padding: 8vw;
+							transition: all 300ms;
-						background-color: #262626;
+							transform: translateX(100%);
-						display: flex;
+
-						flex-direction: column;
+							@media screen and (max-width: 50rem) {
-						gap: 1.5rem;
+								padding-block-start: 4rem;
-					`}>
+								padding-block-end: 6rem;
-					<Routes>
+							}
-						<Route path="/" element={<div></div>} />
+						`,
-						<Route path="/*" element={<BlogPost />} />
+						{
-					</Routes>
+							[css`
+								transform: translateX(0%);
+							`]: isArticleOpen,
+						},
+					)}>
+					<div
+						className={css`
+							height: 100%;
+							width: 100%;
+							overflow-y: auto;
+							overflow-x: hidden;
+							display: flex;
+							flex-direction: column;
+							padding: 8vw;
+							gap: 1.5rem;
+						`}>
+						{isArticleOpen && <BlogPost />}
+					</div>
 				</div>
 			</article>
 		</div>