Skip to content

Commit a73f626

Browse files
mrholekmrholek
committed
docs: update theme
1 parent 0f3a098 commit a73f626

File tree

5 files changed

+102
-45
lines changed

5 files changed

+102
-45
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@
7777
"react": "^17.0.1",
7878
"react-docgen-typescript": "^2.1.0",
7979
"react-dom": "^17.0.1",
80+
"react-github-btn": "^1.2.1",
8081
"react-helmet": "^6.1.0",
8182
"react-popper": "^2.2.5",
8283
"react-transition-group": "^4.4.2",

‎src/docs/components/Header.tsx‎

Lines changed: 57 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { FC } from 'react'
2+
import GitHubButton from 'react-github-btn'
23

3-
import { CHeader, CHeaderNav, CHeaderToggler, CNavItem } from '../../index'
4+
import { CAlert, CHeader, CHeaderNav, CHeaderToggler, CNavItem } from '../../index'
45
import CIcon from '@coreui/icons-react'
56
import { cibDiscourse, cibGithub, cibTwitter, cilCloudDownload, cilMenu } from '@coreui/icons'
67
import { CButton } from '../../components/button/CButton'
@@ -9,44 +10,61 @@ import { myContext } from './../templates/Docs'
910

1011
const Header: FC = ({ ...props }) => {
1112
return (
12-
<myContext.Consumer>
13-
{(context) => (
14-
<CHeader className="mb-5">
15-
<CHeaderToggler
16-
className="ms-md-3"
17-
onClick={() => context.setSidebarVisible(!context.sidebarVisible)}
18-
>
19-
<CIcon icon={cilMenu} size="lg" />
20-
</CHeaderToggler>
21-
<CHeaderNav className="ms-auto">
22-
<CNavItem href="https://community.coreui.io/">
23-
<CIcon icon={cibDiscourse} size="xl" />
24-
</CNavItem>
25-
<CNavItem href="https://github.com/coreui">
26-
<CIcon icon={cibGithub} size="xl" />
27-
</CNavItem>
28-
<CNavItem href="https://twitter.com/core_ui">
29-
<CIcon icon={cibTwitter} size="xl" />
30-
</CNavItem>
31-
</CHeaderNav>
32-
<CButton
33-
className="d-lg-inline-block my-2 my-md-0 ms-md-3"
34-
color="primary"
35-
href="https://coreui.io/react/#compare"
36-
variant="outline"
37-
>
38-
<CIcon icon={cilCloudDownload} /> Download
39-
</CButton>
40-
<CButton
41-
className="d-lg-inline-block my-2 my-md-0 ms-md-3"
42-
color="primary"
43-
href="https://coreui.io/pro/react/"
44-
>
45-
Get CoreUI PRO
46-
</CButton>
47-
</CHeader>
48-
)}
49-
</myContext.Consumer>
13+
<>
14+
<CAlert color="light" className="d-flex justify-content-center rounded-0 border-bottom mb-0">
15+
<span className="me-3">
16+
If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️
17+
</span>
18+
<GitHubButton
19+
href="https://github.com/coreui/coreui-react"
20+
data-size="large"
21+
aria-label="Star coreui/coreui-react on GitHub"
22+
>
23+
Star
24+
</GitHubButton>
25+
<span className="ms-3">🙏</span>
26+
</CAlert>
27+
<myContext.Consumer>
28+
{(context) => (
29+
<CHeader className="mb-5" position="sticky">
30+
<CHeaderToggler
31+
className="ms-md-3"
32+
onClick={() => {
33+
context.setSidebarVisible(!context.sidebarVisible)
34+
}}
35+
>
36+
<CIcon icon={cilMenu} size="lg" />
37+
</CHeaderToggler>
38+
<CHeaderNav className="ms-auto">
39+
<CNavItem href="https://community.coreui.io/">
40+
<CIcon icon={cibDiscourse} size="xl" />
41+
</CNavItem>
42+
<CNavItem href="https://github.com/coreui">
43+
<CIcon icon={cibGithub} size="xl" />
44+
</CNavItem>
45+
<CNavItem href="https://twitter.com/core_ui">
46+
<CIcon icon={cibTwitter} size="xl" />
47+
</CNavItem>
48+
</CHeaderNav>
49+
<CButton
50+
className="d-lg-inline-block my-2 my-md-0 ms-md-3"
51+
color="primary"
52+
href="https://coreui.io/react/#compare"
53+
variant="outline"
54+
>
55+
<CIcon icon={cilCloudDownload} /> Download
56+
</CButton>
57+
<CButton
58+
className="d-lg-inline-block my-2 my-md-0 ms-md-3"
59+
color="primary"
60+
href="https://coreui.io/pro/react/"
61+
>
62+
Get CoreUI PRO
63+
</CButton>
64+
</CHeader>
65+
)}
66+
</myContext.Consumer>
67+
</>
5068
)
5169
}
5270

‎src/docs/components/Sidebar.tsx‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import React, { FC } from 'react'
22
import PropTypes from 'prop-types'
33

4-
import { CSidebar, CSidebarBrand, CImage } from '../../index'
4+
import {
5+
CDropdown,
6+
CDropdownToggle,
7+
CDropdownMenu,
8+
CDropdownItem,
9+
CSidebar,
10+
CSidebarBrand,
11+
CImage,
12+
} from '../../index'
513
import { SidebarNav } from '.'
614

715
import { myContext } from './../templates/Docs'
@@ -21,15 +29,33 @@ const Sidebar: FC<SidebarProps> = ({ ...props }) => {
2129
<CSidebar
2230
className="docs-sidebar border-end ps-xl-4 elevation-0"
2331
position="fixed"
24-
// selfHiding="md"
25-
hideBelow="xl"
2632
size="lg"
2733
visible={context.sidebarVisible}
28-
onVisibleChange={(value) => context.setSidebarVisible(value)}
34+
onVisibleChange={(value) => {
35+
context.setSidebarVisible(value)
36+
console.log(value)
37+
}}
2938
>
3039
<CSidebarBrand className="justify-content-start ps-3">
3140
<CImage className="d-block mt-4 mb-5" src={logo} height={50} />
3241
</CSidebarBrand>
42+
<div className="text-medium-emphasis ms-3 me-5 mb-2 small fw-semibold">Framework:</div>
43+
<CDropdown className="ms-3 me-5 mb-4">
44+
<CDropdownToggle color="primary" variant="outline">
45+
React.js
46+
</CDropdownToggle>
47+
<CDropdownMenu className="w-100">
48+
<CDropdownItem href="#" disabled>
49+
Angular <span className="badge bg-warning float-end mt-1">Work in Progress</span>
50+
</CDropdownItem>
51+
<CDropdownItem href="https://coreui.io/docs/4.0/" target="_blank">
52+
JavaScript / Vanilla JS
53+
</CDropdownItem>
54+
<CDropdownItem href="https://coreui.io/vue/docs/4.0/" target="_blank">
55+
Vue.js
56+
</CDropdownItem>
57+
</CDropdownMenu>
58+
</CDropdown>
3359
<SidebarNav items={items} currentRoute={props.currentRoute} />
3460
</CSidebar>
3561
)}

‎src/docs/templates/Docs.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ const components = {
2424
}
2525

2626
const DocsLayout: FC = ({ data: { mdx } }) => {
27-
const [sidebarVisible, setSidebarVisible] = useState(true)
27+
const [currentSidebarVisible, setCurrentSidebarVisible] = useState()
28+
const [sidebarVisible, setSidebarVisible] = useState()
2829
return (
2930
<>
3031
<Seo title={mdx.frontmatter.title} description={mdx.frontmatter.description} />
@@ -35,7 +36,6 @@ const DocsLayout: FC = ({ data: { mdx } }) => {
3536
value={{
3637
sidebarVisible,
3738
setSidebarVisible,
38-
// toggleSidebar: () => setSidebarVisible(!sidebarVisible),
3939
}}
4040
>
4141
<Sidebar currentRoute={mdx.frontmatter.route}/>

‎yarn.lock‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6458,6 +6458,11 @@ git-up@^4.0.5:
64586458
is-ssh "^1.3.0"
64596459
parse-url "^6.0.0"
64606460

6461+
github-buttons@^2.8.0:
6462+
version "2.19.0"
6463+
resolved "https://registry.yarnpkg.com/github-buttons/-/github-buttons-2.19.0.tgz#8eb966fec288038b47cfe1f931355f50c0e10811"
6464+
integrity sha512-N483U9QbYIS0lZKLxye2XXMHZ4ISJ9OcYJd1ChtJxYsF475xeKF2zC2Ko51SCiQmi0RnLvk25ocJDq+hOpZLfw==
6465+
64616466
github-from-package@0.0.0:
64626467
version "0.0.0"
64636468
resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
@@ -10931,6 +10936,13 @@ react-fast-compare@^3.0.1, react-fast-compare@^3.1.1:
1093110936
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
1093210937
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
1093310938

10939+
react-github-btn@^1.2.1:
10940+
version "1.2.1"
10941+
resolved "https://registry.yarnpkg.com/react-github-btn/-/react-github-btn-1.2.1.tgz#ece93f609a4bad5e7eb9f47ae49bfaba69466dce"
10942+
integrity sha512-/gXD01mHAOhW0xYuNJFDn08OGjaMXOjcg6GCKVPdHvQcWzswH4aT85DLDAAJ6Zhw/71veSIH4Kx1BTBfy69SsA==
10943+
dependencies:
10944+
github-buttons "^2.8.0"
10945+
1093410946
react-helmet@^6.1.0:
1093510947
version "6.1.0"
1093610948
resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"

0 commit comments

Comments
 (0)