diff --git a/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx b/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx
index 3042d71..401269f 100644
--- a/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx
+++ b/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx
@@ -29,50 +29,57 @@ const Container = styled('span')({
const Base = styled('aside')({
'--max-width': 240,
- position: 'fixed',
- top: 0,
- width: '100%',
- height: '100%',
- backgroundColor: 'var(--color-bg)',
- zIndex: 4,
- transitionProperty: 'color, background-color, left',
- transitionTimingFunction: 'ease',
- transitionDuration: '350ms',
- overflow: 'auto',
- '@media (min-width: 720px)': {
- left: '0 !important',
- width: `${100 / 4}%`,
- maxWidth: 'none',
+ display: 'none',
+ '@media only screen': {
+ display: 'block',
+ position: 'fixed',
+ top: 0,
+ width: '100%',
height: '100%',
- '+ *': {
- paddingLeft: `${100 / 4}%`,
- boxSizing: 'border-box',
+ backgroundColor: 'var(--color-bg)',
+ zIndex: 4,
+ transitionProperty: 'color, background-color, left',
+ transitionTimingFunction: 'ease',
+ transitionDuration: '350ms',
+ overflow: 'auto',
+ '@media (min-width: 720px)': {
+ left: '0 !important',
+ width: `${100 / 4}%`,
+ maxWidth: 'none',
+ height: '100%',
+ '+ *': {
+ paddingLeft: `${100 / 4}%`,
+ boxSizing: 'border-box',
+ },
},
},
})
const SidebarToggle = styled('a')({
- width: '4rem',
- height: '4rem',
- position: 'fixed',
- top: 0,
- left: 0,
- display: 'grid',
- placeContent: 'center',
- zIndex: 5,
- '@media (min-width: 720px)': {
- display: 'none',
- },
- '::before': {
- backgroundColor: 'var(--color-bg)',
- content: "''",
- position: 'absolute',
+ display: 'none',
+ '@media only screen': {
+ width: '4rem',
+ height: '4rem',
+ position: 'fixed',
top: 0,
left: 0,
- width: '100%',
- height: '100%',
- opacity: 0.75,
- zIndex: -1,
+ display: 'grid',
+ placeContent: 'center',
+ zIndex: 5,
+ '@media (min-width: 720px)': {
+ display: 'none',
+ },
+ '::before': {
+ backgroundColor: 'var(--color-bg)',
+ content: "''",
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ opacity: 0.75,
+ zIndex: -1,
+ },
},
})
diff --git a/packages/react-common-docs/src/pages/_app.tsx b/packages/react-common-docs/src/pages/_app.tsx
index afac3b9..69bd268 100644
--- a/packages/react-common-docs/src/pages/_app.tsx
+++ b/packages/react-common-docs/src/pages/_app.tsx
@@ -10,14 +10,18 @@ import pkg from '../../../../package.json'
import CodeBlock from '../components/CodeBlock/CodeBlock'
const Container = styled('div')({
- maxWidth: 720,
- margin: '0 auto',
- padding: '0 1rem',
- boxSizing: 'border-box',
+ '@media only screen': {
+ maxWidth: 720,
+ margin: '0 auto',
+ padding: '0 1rem',
+ boxSizing: 'border-box',
+ },
})
const Main = styled('main')({
- margin: '4rem 0',
+ '@media only screen': {
+ margin: '4rem 0',
+ },
})
type AppProps = {
diff --git a/packages/react-common-docs/src/pages/_document.tsx b/packages/react-common-docs/src/pages/_document.tsx
index 801ac72..fb0bf44 100644
--- a/packages/react-common-docs/src/pages/_document.tsx
+++ b/packages/react-common-docs/src/pages/_document.tsx
@@ -23,6 +23,8 @@ export default class MyDocument extends Document {
styles: (
<>
{initialProps.styles}
+
+
diff --git a/packages/react-common-docs/src/pages/index.md b/packages/react-common-docs/src/pages/index.md
index 0809cb2..2836bb7 100644
--- a/packages/react-common-docs/src/pages/index.md
+++ b/packages/react-common-docs/src/pages/index.md
@@ -15,14 +15,16 @@ Dependencies:
[![Jest](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=jest&kind=devDependencies)](https://github.com/facebook/jest)
[![Rollup](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=rollup&kind=devDependencies)](https://github.com/rollup/rollup)
+Check the [documentation](https://make.modal.sh/tesseract/web/react/common) for more details.
+
## Installation
-Since this package resides in the [Modal.sh JavaScript Package Registry](https://js.pack.modal.sh/), you may need to
+This package resides primarily in the [Modal.sh JavaScript Package Registry](https://js.pack.modal.sh/). You will need to
adjust configuration in your chosen package manager.
-With [Yarn](https://yarnpkg.com), add this to your `.yarnrc` file:
+With [Yarn v.1.x](https://classic.arnpkg.com), add this to your `.yarnrc` file:
-```
+```yarnrc
"@tesseract-design:registry" "https://js.pack.modal.sh/"
```
@@ -52,13 +54,11 @@ const LoginForm = etcProps => (
@@ -82,10 +82,13 @@ ReactDOM.render(
window.document.body.appendChild(mountNode)
```
-Detailed usage guides can be found in the [Tesseract Design - React Common documentation](https://make.modal.sh/tesseract/web/react/common).
+Detailed usage guides can be found in the documentation linked above.
## TypeScript
The package is written and tested using TypeScript. Thus, typings for consumption in TypeScript are bundled with the
compiled source.
+## License
+
+MIT. See the LICENSE file on the package repository for the full text.