From f5d2a31a67ed6ca7a1b35481c2a82beb25905401 Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Sat, 29 May 2021 13:41:17 +0800
Subject: [PATCH] Keep content on top

Wrappers are added to layout areas to keep content on top of styled
generated content (for adding backgrounds).
---
 package.json                              | 2 +-
 src/layouts/LeftSidebar/index.tsx         | 2 ++
 src/layouts/LeftSidebarWithMenu/index.tsx | 4 ++++
 src/layouts/RightSidebarStatic/index.tsx  | 9 ++++++++-
 src/widgets/TopBar/index.tsx              | 2 ++
 5 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ac5e755..d392ecb 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"version": "0.2.2",
+	"version": "0.2.3",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
diff --git a/src/layouts/LeftSidebar/index.tsx b/src/layouts/LeftSidebar/index.tsx
index e742ab2..c387987 100644
--- a/src/layouts/LeftSidebar/index.tsx
+++ b/src/layouts/LeftSidebar/index.tsx
@@ -29,6 +29,8 @@ const SidebarOverflow = styled('div')({
 	height: '100%',
 	overflow: 'auto',
 	// overflow: 'overlay',
+	position: 'relative',
+	zIndex: 1,
 	scrollbarWidth: 'none',
 	'::-webkit-scrollbar': {
 		display: 'none',
diff --git a/src/layouts/LeftSidebarWithMenu/index.tsx b/src/layouts/LeftSidebarWithMenu/index.tsx
index eba977e..23e10b6 100644
--- a/src/layouts/LeftSidebarWithMenu/index.tsx
+++ b/src/layouts/LeftSidebarWithMenu/index.tsx
@@ -71,6 +71,8 @@ const SidebarMainOverflow = styled('div')({
 	overflow: 'auto',
 	// overflow: 'overlay',
 	scrollbarWidth: 'none',
+	position: 'relative',
+	zIndex: 1,
 	'::-webkit-scrollbar': {
 		display: 'none',
 	},
@@ -117,6 +119,8 @@ const SidebarMenuSize = styled('div')({
 	height: '100%',
 	maxWidth: `calc(${configVar('base-width')} * 2)`,
 	margin: '0 auto',
+	position: 'relative',
+	zIndex: 1,
 	[minWidthFactor(3)]: {
 		maxWidth: 'none',
 		marginRight: 0,
diff --git a/src/layouts/RightSidebarStatic/index.tsx b/src/layouts/RightSidebarStatic/index.tsx
index 8184508..b73207b 100644
--- a/src/layouts/RightSidebarStatic/index.tsx
+++ b/src/layouts/RightSidebarStatic/index.tsx
@@ -40,6 +40,11 @@ const SidebarBase = styled('div')({
 	},
 })
 
+const SidebarMainContent = styled('div')({
+	position: 'relative',
+	zIndex: 1,
+})
+
 export const SidebarMainContainer = styled('div')({
 	padding: '0 1rem',
 	boxSizing: 'border-box',
@@ -106,7 +111,9 @@ export const Layout: React.FC<Props> = ({
 			</ContentBase>
 			<SidebarBase>
 				<SidebarMainComponent>
-					{sidebarMain}
+					<SidebarMainContent>
+						{sidebarMain}
+					</SidebarMainContent>
 				</SidebarMainComponent>
 			</SidebarBase>
 		</>
diff --git a/src/widgets/TopBar/index.tsx b/src/widgets/TopBar/index.tsx
index c525ec9..bf3117a 100644
--- a/src/widgets/TopBar/index.tsx
+++ b/src/widgets/TopBar/index.tsx
@@ -38,6 +38,8 @@ const Container = styled('div')({
 	height: '100%',
 	display: 'flex',
 	alignItems: 'center',
+	position: 'relative',
+	zIndex: 1,
 })
 
 const NarrowContainer = styled(Container)({