+ Welcome
+ Select a template to preview:
+
+
+ Basic Layout
+
+
+
+
+
+ Right Sidebar (static)
+
+
+
+
+
+ Left Sidebar
+
+
+
+
+
+ Left Sidebar (with menu)
+
+
+
+
+
+
+
+ )
+}
+
+export default IndexTemplate
diff --git a/src/components/templates/LeftSidebarLayout/index.tsx b/src/components/templates/LeftSidebarLayout/index.tsx
new file mode 100644
index 0000000..fb5bb9e
--- /dev/null
+++ b/src/components/templates/LeftSidebarLayout/index.tsx
@@ -0,0 +1,129 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import * as T from '@tesseract-design/react-common'
+import {LeftSidebar} from '@theoryofnekomata/viewfinder'
+import DummyContent from '../../molecules/DummyContent'
+import Link from '../../molecules/Link'
+import Brand from '../../molecules/Brand'
+
+const TopBarComponent = styled('div')({
+ backgroundColor: 'var(--color-bg, white)',
+ '::before': {
+ content: "''",
+ width: '100%',
+ height: '100%',
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ pointerEvents: 'none',
+ },
+ '::after': {
+ backgroundColor: 'black',
+ opacity: 0.5,
+ content: "''",
+ width: '100%',
+ height: '100%',
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ pointerEvents: 'none',
+ },
+})
+
+const SidebarMainComponent = styled('div')({
+ backgroundColor: 'var(--color-bg, white)',
+ zIndex: 2,
+ '::after': {
+ backgroundColor: 'black',
+ opacity: 0.25,
+ content: "''",
+ width: '100%',
+ height: '100%',
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ pointerEvents: 'none',
+ },
+})
+
+type Props = {
+ query: string
+ menuLinkLabel: string
+ userLinkLabel: string
+ searchQueryKey: string
+ searchLabel: string
+ searchHint: string
+ popupQueryKey: string
+ userPopupQueryValue: string
+ sidebarSubpageQueryValue: string
+ subpageQueryKey: string
+ subpage: string
+}
+
+const LeftSidebarLayoutTemplate: React.FC