From eb2fd4b608129547bf1813e70ebe53960a7f7b71 Mon Sep 17 00:00:00 2001
From: iqbalpa <iqbalpahlevi16@gmail.com>
Date: Sat, 20 Jul 2024 08:39:33 +0700
Subject: [PATCH] fix: padding in sidebar

---
 src/app/layout.tsx                 | 2 +-
 src/components/sidebar/sidebar.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6d8001e..472ff32 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -27,7 +27,7 @@ export default function RootLayout({
         <Header />
         <div className="flex flex-1 flex-row overflow-hidden">
           <main className="flex-1 overflow-y-hidden">{children}</main>
-          <ScrollArea className="flex-shrink-0 bg-slate-900 p-4">
+          <ScrollArea className="flex-shrink-0 bg-slate-900">
             <Sidebar />
           </ScrollArea>
         </div>
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index 10d0ee4..1d7c958 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -28,7 +28,7 @@ const Sidebar: React.FC = () => {
   }
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="hidden flex-col gap-2 md:flex p-4">
       {surahs.map((surah) => {
         const isActive = pathname === `/${surah.nomor}`;