import * as React from 'react'; import Head from 'next/head'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import Block from '../../placeholders/Block'; import BrowserFrame from '../../placeholders/BrowserFrame'; const Details: React.FC<{}> = () => { return (

This pattern is also known as off-canvas.

`} css={` .container { /* Container takes full size */ height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 9999; } .container__overlay { /* Take full size */ height: 100%; left: 0; position: fixed; top: 0; width: 100%; /* User still can see the content of main page */ background-color: rgba(0, 0, 0, 0.5); z-index: -1; } .container__sidebar { /* Take full height */ height: 100%; left: 0; position: fixed; top: 0; width: 200px; /* Background */ background-color: #fff; } `} >

); }; export default Details;