fix(blog): aside animation stuttering

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

src/pages/blog/Home.tsx

@@ -100,17 +100,21 @@ const BlogHome: React.FC = () => {
 						}
 					}
 
-					& > aside {
+					& > aside,
-						transition: all 800ms;
+					& > aside .blog-list {
+						transition: all 300ms;
 					}
 
 					&:is(.aside-closed) {
-						aside {
+						& aside {
 							overflow: hidden;
-							transform: translateX(-1000%);
 							min-width: 0;
 							max-width: 0;
 						}
+
+						& aside .blog-list {
+							transform: translateX(-1000%);
+						}
 					}
 				`,
 			)}>
@@ -163,12 +167,13 @@ const BlogHome: React.FC = () => {
 					width: 100%;
 					flex: 2;
 					max-width: 45rem;
+					overflow-y: auto;
 				`}>
 				<div
-					className={css`
+					className={classNames(
-						height: 100%;
+						"blog-list",
+						css`
 							width: 100%;
-						overflow-y: auto;
 							display: flex;
 							flex-direction: column;
 							gap: 1rem;
@@ -179,7 +184,8 @@ const BlogHome: React.FC = () => {
 								padding-block-start: 4rem;
 								padding-block-end: 6rem;
 							}
-					`}>
+						`,
+					)}>
 					<Header />
 					<Spacer y={2} />
 					{articles.map(article => {