Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on Mar 9, 2021. It is now read-only.

Commit f7a6619

Browse files
author
z
committed
responsive sidebar
1 parent f1440bd commit f7a6619

File tree

5 files changed

+189
-454
lines changed

5 files changed

+189
-454
lines changed

‎.prettierrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@
44
"trailingComma": "es5",
55
"singleQuote": true,
66
"jsxBracketSameLine": true,
7-
"proseWrap": false
7+
"proseWrap": never
88
}

‎components/learn/floating-syllabus.js

Lines changed: 0 additions & 217 deletions
This file was deleted.

‎package.json

Lines changed: 8 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"main": "index.js",
66
"scripts": {
77
"test": "xo && jest",
8-
"lint": "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write && xo && markdownlint .",
8+
"lint":
9+
"prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write && xo && markdownlint .",
910
"precommit": "lint-staged",
1011
"analyze": "cross-env ANALYZE=1 next build",
1112
"dev": "cross-env NODE_ENV=development node server.js",
@@ -17,32 +18,19 @@
1718
},
1819
"xo": {
1920
"parser": "babel-eslint",
20-
"extends": [
21-
"prettier",
22-
"prettier/react",
23-
"plugin:react/recommended"
24-
],
25-
"env": [
26-
"browser",
27-
"node"
28-
],
21+
"extends": ["prettier", "prettier/react", "plugin:react/recommended"],
22+
"env": ["browser", "node"],
2923
"rules": {
3024
"linebreak-style": 0,
3125
"react/display-name": 0,
3226
"react/prop-types": 0
3327
},
3428
"space:": 2,
35-
"ignores": [
36-
"next.config.js"
37-
],
29+
"ignores": ["next.config.js"],
3830
"overrides": [
3931
{
4032
"files": "**/__tests__/*.test.js",
41-
"globals": [
42-
"describe",
43-
"it",
44-
"expect"
45-
]
33+
"globals": ["describe", "it", "expect"]
4634
}
4735
]
4836
},
@@ -53,16 +41,8 @@
5341
"jest --findRelatedTests",
5442
"git add"
5543
],
56-
"**/*.md": [
57-
"prettier",
58-
"markdownlint",
59-
"git add"
60-
],
61-
".github/CONTRIBUTING.md": [
62-
"doctoc",
63-
"prettier",
64-
"git add"
65-
]
44+
"**/*.md": ["prettier", "markdownlint", "git add"],
45+
".github/CONTRIBUTING.md": ["doctoc", "prettier", "git add"]
6646
},
6747
"dependencies": {
6848
"babel-plugin-emotion": "^8.0.10",
@@ -82,7 +62,6 @@
8262
"preact-emotion": "^8.0.10",
8363
"prop-types": "^15.5.10",
8464
"react": "^16.0.0",
85-
"react-burger-menu": "^2.1.11",
8665
"react-dom": "^16.0.0",
8766
"react-emotion": "^8.0.10",
8867
"react-event-timeline": "^1.4.0",

‎pages/learn/subject.js

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import React from 'react';
22
import fetch from 'isomorphic-unfetch';
3+
import styled from 'react-emotion';
34
import { space } from 'styled-system';
45
import { Flex, Box } from 'grid-emotion';
5-
import styled from 'react-emotion';
6+
import ExpandTOC from 'react-icons/lib/fa/angle-double-right';
7+
import CollapseTOC from 'react-icons/lib/fa/angle-double-left';
68

79
import { baseContainer, Title, breakpoints } from '../../utils/base.styles';
810
import Layout from '../../components/common/layout';
911
import BannerSection from '../../components/learn/subject-banner';
1012
import SyllabusTree from '../../components/learn/syllabus-tree/syllabus-tree-container';
1113
import SubjectMarkdown from '../../components/learn/subject-marked';
12-
import FloatingSyllabus from '../../components/learn/floating-syllabus';
1314

1415
import { laravelSyllabus } from '../../utils/mock-data';
1516

@@ -21,9 +22,7 @@ const CurriculumSection = styled.section`
2122
background-color: #fff;
2223
& .box_toc {
2324
border-right: 1px solid #f5f5f5;
24-
${breakpoints.xs} {
25-
display: none;
26-
}
25+
min-width: 250px;
2726
}
2827
& .toc_title {
2928
background-color: #374355;
@@ -36,6 +35,28 @@ const CurriculumSection = styled.section`
3635
}
3736
`;
3837

38+
const Fab = styled.div`
39+
position: sticky;
40+
top: 0.5rem;
41+
z-index: 3;
42+
left: 0;
43+
margin-top: 0.5rem;
44+
top: 3rem;
45+
display: none;
46+
& .fab_symbol {
47+
opacity: 0.5;
48+
padding: 0.05rem;
49+
border-radius: 0 5px 5px 0;
50+
background: #fff;
51+
border: 0.5px solid #555;
52+
width: 1.2rem;
53+
height: 2rem;
54+
}
55+
${breakpoints.xs} {
56+
display: inherit;
57+
}
58+
`;
59+
3960
const defaultChapter = laravelSyllabus[0].chapters[0];
4061

4162
export default class Subject extends React.Component {
@@ -45,6 +66,7 @@ export default class Subject extends React.Component {
4566
activeChapterContent: '',
4667
activeChapterName: defaultChapter.name,
4768
loading: true,
69+
isSidebarOpen: true,
4870
};
4971
}
5072

@@ -78,14 +100,22 @@ export default class Subject extends React.Component {
78100
subTitle="Web Development"
79101
icon="devicon-laravel-plain colored"
80102
/>
81-
<FloatingSyllabus />
82103
<CurriculumSection my={[0, 4]}>
83104
<Flex column={false}>
84-
<Box width={[0, 0.2]} className="box_toc">
85-
<div className="toc_title">Table of content</div>
86-
<SyllabusTree data={laravelSyllabus} changeChapter={this.changeChapter} />
87-
</Box>
88-
<Box width={[1, 0.8]} px={[1, 2]}>
105+
{this.state.isSidebarOpen ? (
106+
<Box width={[0, 0.2]} flex={'1 1 auto'} className="box_toc">
107+
<div className="toc_title">Table of content</div>
108+
<SyllabusTree data={laravelSyllabus} changeChapter={this.changeChapter} />
109+
</Box>
110+
) : null}
111+
<Box width={[1, 0.8]} flex={'1 1 auto'} px={[1, 2]} className="box_content">
112+
<Fab onClick={() => this.setState({ isSidebarOpen: !this.state.isSidebarOpen })}>
113+
{this.state.isSidebarOpen ? (
114+
<CollapseTOC className="fab_symbol" />
115+
) : (
116+
<ExpandTOC className="fab_symbol" />
117+
)}
118+
</Fab>
89119
<h2 className="chapter_name">{this.state.activeChapterName}</h2>
90120
<SubjectMarkdown loading={this.state.loading} markdown={this.state.activeChapterContent} />
91121
</Box>

0 commit comments

Comments
 (0)