Keep content on top

Wrappers are added to layout areas to keep content on top of styled
generated content (for adding backgrounds).

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",

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',

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,

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>
 		</>

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)({