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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy