Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-02-07 21:40:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

sticky sidebar

Browse Source
This commit is contained in:
Roman Hotsiy 2017-11-20 02:18:43 +02:00
parent 092d488a74
commit 3e3a57402f
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
4 changed files with 34 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -84,6 +84,7 @@
"react-tabs": "^2.0.0", "react-tabs": "^2.0.0",
"remarkable": "^1.7.1", "remarkable": "^1.7.1",
"slugify": "^1.2.1", "slugify": "^1.2.1",
"stickyfill": "^1.1.1",
"styled-components": "^2.2.1", "styled-components": "^2.2.1",
"swagger2openapi": "^2.11.0" "swagger2openapi": "^2.11.0"
}, },

26
src/components/Redoc/Redoc.tsx
View File

@ -1,15 +1,16 @@
import { ThemeInterface } from '../../theme';
import * as React from 'react'; import * as React from 'react';
import Stickyfill from 'stickyfill';
import { ThemeProvider } from '../../styled-components'; import { ThemeProvider } from '../../styled-components';
import { ApiInfo } from '../ApiInfo/ApiInfo'; import { ApiInfo } from '../ApiInfo/ApiInfo';
import { RedocWrap, MenuContent, ApiContent } from './elements'; import { RedocWrap, StickySidebar, ApiContent } from './elements';
import { ApiLogo } from '../ApiLogo/ApiLogo'; import { ApiLogo } from '../ApiLogo/ApiLogo';
import { SideMenu } from '../SideMenu/SideMenu'; import { SideMenu } from '../SideMenu/SideMenu';
import { ContentItems } from '../ContentItems/ContentItems'; import { ContentItems } from '../ContentItems/ContentItems';
import { AppStore } from '../../services'; import { AppStore } from '../../services';
import defaultTheme from '../../theme'; import defaultTheme, { ThemeInterface } from '../../theme';
export interface RedocProps { export interface RedocProps {
store: AppStore; store: AppStore;
@ -19,8 +20,16 @@ export interface RedocProps {
} }
export class Redoc extends React.Component<RedocProps> { export class Redoc extends React.Component<RedocProps> {
stickyfill = Stickyfill();
stickyElement: Element;
componentDidMount() { componentDidMount() {
this.props.store.menu.updateOnHash(); this.props.store.menu.updateOnHash();
this.stickyfill.add(this.stickyElement);
}
componentWillUnmount() {
this.stickyfill.remove(this.stickyElement);
} }
render() { render() {
@ -28,13 +37,18 @@ export class Redoc extends React.Component<RedocProps> {
return ( return (
<ThemeProvider theme={{ ...options.theme, ...defaultTheme }}> <ThemeProvider theme={{ ...options.theme, ...defaultTheme }}>
<RedocWrap className="redoc-wrap"> <RedocWrap className="redoc-wrap">
<MenuContent className="menu-content"> <StickySidebar
className="menu-content"
ref={el => {
this.stickyElement = el;
}}
>
<ApiLogo info={spec.info} /> <ApiLogo info={spec.info} />
<SideMenu menu={menu} /> <SideMenu menu={menu} />
</MenuContent> </StickySidebar>
<ApiContent className="api-content"> <ApiContent className="api-content">
<ApiInfo info={spec.info} externalDocs={spec.externalDocs} /> <ApiInfo info={spec.info} externalDocs={spec.externalDocs} />
<ContentItems items={menu.items as any} />; <ContentItems items={menu.items as any} />
</ApiContent> </ApiContent>
</RedocWrap> </RedocWrap>
</ThemeProvider> </ThemeProvider>

16
src/components/Redoc/elements.tsx
View File

@ -3,7 +3,6 @@ import styled from '../../styled-components';
export { ClassAttributes } from 'react'; export { ClassAttributes } from 'react';
export const RedocWrap = styled.div` export const RedocWrap = styled.div`
overflow: hidden;
font-family: ${props => props.theme.baseFont.family}; font-family: ${props => props.theme.baseFont.family};
font-size: ${props => props.theme.baseFont.size}; font-size: ${props => props.theme.baseFont.size};
line-height: ${props => props.theme.baseFont.lineHeight}; line-height: ${props => props.theme.baseFont.lineHeight};
@ -34,19 +33,22 @@ export const RedocWrap = styled.div`
} }
`; `;
export const MenuContent = styled.div` export const StickySidebar = styled.div`
width: ${props => props.theme.menu.width}; min-width: ${props => props.theme.menu.width};
background-color: ${props => props.theme.menu.backgroundColor}; background-color: ${props => props.theme.menu.backgroundColor};
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transform: translateZ(0px);
height: 100vh; transform: translateZ(0);
position: fixed;
max-height: 100vh;
position: sticky;
position: -webkit-sticky;
top: 0;
`; `;
export const ApiContent = styled.div` export const ApiContent = styled.div`
margin-left: ${props => props.theme.menu.width};
z-index: 10; z-index: 10;
position: relative; position: relative;
`; `;

4
yarn.lock
View File

@ -6305,6 +6305,10 @@ statuses@~1.3.1:
version "1.3.1" version "1.3.1"
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e" resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
stickyfill@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/stickyfill/-/stickyfill-1.1.1.tgz#39413fee9d025c74a7e59ceecb23784cc0f17f02"
stream-browserify@^2.0.1: stream-browserify@^2.0.1:
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db" resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"