Skip to content

Commit 3e55458

Browse files
satya164satya164
committed
Add icons to sidebar categories
1 parent ea4c272 commit 3e55458

File tree

5 files changed

+386
-222
lines changed

5 files changed

+386
-222
lines changed

‎src/css/custom.css‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -542,6 +542,20 @@ header {
542542
margin-right: var(--ifm-menu-link-padding-horizontal);
543543
}
544544

545+
.theme-doc-sidebar-item-category-level-1
546+
> .menu__list-item-collapsible
547+
> .menu__link[data-category-icon]::before {
548+
content: '';
549+
width: 16px;
550+
height: 16px;
551+
margin-left: -1px;
552+
margin-right: 0.5rem;
553+
mask-image: var(--category-icon);
554+
mask-size: contain;
555+
mask-repeat: no-repeat;
556+
background-color: currentColor;
557+
}
558+
545559
.menu {
546560
font-size: 87.5%;
547561
font-weight: var(--ifm-font-weight-normal);
@@ -598,19 +612,14 @@ header {
598612
}
599613

600614
.menu__list-item-collapsible > .menu__link {
601-
font-size: 1rem;
602-
font-weight: var(--ifm-font-weight-bold);
603-
color: var(--ifm-color-emphasis-1000);
615+
font-size: 1.07142857em;
616+
font-weight: var(--ifm-font-weight-semibold);
604617
}
605618

606619
.menu__list-item-collapsible > .menu__link--active {
607620
color: var(--ifm-color-emphasis-1000);
608621
}
609622

610-
.menu__link--active {
611-
font-weight: var(--ifm-font-weight-semibold);
612-
}
613-
614623
.menu__link--sublist-caret:after {
615624
background: var(--ifm-menu-link-sublist-icon) 50% / 1.25rem 1.25rem;
616625
opacity: 0.5;

‎src/theme/DocSidebarItem/Category/icons.js‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/theme/DocSidebarItem/Category/index.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Category from '@theme-original/DocSidebarItem/Category';
2+
import { icons } from './icons';
3+
4+
function svgToDataUri(svg) {
5+
const encoded = encodeURIComponent(svg)
6+
.replace(/'/g, '%27')
7+
.replace(/"/g, "'");
8+
9+
return `url("data:image/svg+xml,${encoded}")`;
10+
}
11+
12+
export default function CategoryWrapper(props) {
13+
const iconName = props.item.customProps?.icon;
14+
const svg = iconName ? icons[iconName] : null;
15+
16+
if (!svg) {
17+
return <Category {...props} />;
18+
}
19+
20+
return (
21+
<Category
22+
{...props}
23+
data-category-icon
24+
style={{ '--category-icon': svgToDataUri(svg) }}
25+
/>
26+
);
27+
}

‎versioned_sidebars/version-7.x-sidebars.json‎

Lines changed: 164 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,167 @@
11
{
2-
"docs": {
3-
"Fundamentals": [
4-
"getting-started",
5-
"hello-react-navigation",
6-
"navigating",
7-
"params",
8-
"headers",
9-
"header-buttons",
10-
"nesting-navigators",
11-
"navigation-lifecycle",
12-
"next-steps"
13-
],
14-
"Guides": [
15-
"auth-flow",
16-
"handling-safe-area",
17-
"customizing-tabbar",
18-
"hiding-tabbar-in-screens",
19-
"status-bar",
20-
"modal",
21-
"multiple-drawers",
22-
"screen-options-resolution",
23-
"custom-android-back-button-handling",
24-
"shared-element-transitions",
25-
"preventing-going-back",
26-
"function-after-focusing-screen",
27-
"navigating-without-navigation-prop",
28-
"deep-linking",
29-
"configuring-links",
30-
"web-support",
31-
"server-rendering",
32-
"screen-tracking",
33-
"themes",
34-
"state-persistence",
35-
"combine-static-with-dynamic",
36-
"testing",
37-
"typescript",
38-
"troubleshooting",
39-
"upgrading-from-6.x"
40-
],
41-
"Navigators": [
42-
"stack-navigator",
43-
"native-stack-navigator",
44-
"bottom-tab-navigator",
45-
"native-bottom-tab-navigator",
46-
"drawer-navigator",
47-
"material-top-tab-navigator"
48-
],
49-
"Libraries": ["devtools", "elements", "tab-view", "drawer-layout"],
50-
"API reference": [
51-
"static-configuration",
52-
"navigation-container",
53-
"server-container",
54-
"navigator",
55-
"group",
56-
"screen",
57-
"screen-options",
58-
"route-object",
59-
"navigation-object",
60-
"navigation-context",
61-
"navigation-events",
62-
"navigation-state",
63-
"link",
64-
{
65-
"type": "category",
66-
"collapsible": true,
67-
"label": "Hooks",
68-
"items": [
69-
"use-navigation",
70-
"use-route",
71-
"use-navigation-state",
72-
"use-focus-effect",
73-
"use-is-focused",
74-
"use-prevent-remove",
75-
"use-route-path",
76-
"use-link-to",
77-
"use-link-props",
78-
"use-link-builder",
79-
"use-scroll-to-top",
80-
"use-theme"
81-
]
2+
"docs": [
3+
{
4+
"type": "category",
5+
"label": "Fundamentals",
6+
"customProps": {
7+
"icon": "fundamentals"
828
},
83-
{
84-
"type": "category",
85-
"collapsible": true,
86-
"label": "Actions",
87-
"items": [
88-
"navigation-actions",
89-
"stack-actions",
90-
"drawer-actions",
91-
"tab-actions"
92-
]
93-
}
94-
],
95-
"Build your own Navigator": ["custom-routers", "custom-navigators"],
96-
"Ecosystem": [
97-
"community-solutions",
98-
"community-navigators",
99-
"community-libraries",
100-
"more-resources"
101-
],
102-
"Meta": [
103-
"migration-guides",
104-
"glossary-of-terms",
105-
"pitch",
106-
"limitations",
107-
"used-by",
108-
"contributing"
109-
]
110-
}
9+
"items": [
10+
"getting-started",
11+
"hello-react-navigation",
12+
"navigating",
13+
"params",
14+
"headers",
15+
"header-buttons",
16+
"nesting-navigators",
17+
"navigation-lifecycle",
18+
"next-steps"
19+
]
20+
},
21+
{
22+
"type": "category",
23+
"label": "Guides",
24+
"customProps": {
25+
"icon": "guides"
26+
},
27+
"items": [
28+
"auth-flow",
29+
"handling-safe-area",
30+
"customizing-tabbar",
31+
"hiding-tabbar-in-screens",
32+
"status-bar",
33+
"modal",
34+
"multiple-drawers",
35+
"screen-options-resolution",
36+
"custom-android-back-button-handling",
37+
"shared-element-transitions",
38+
"preventing-going-back",
39+
"function-after-focusing-screen",
40+
"navigating-without-navigation-prop",
41+
"deep-linking",
42+
"configuring-links",
43+
"web-support",
44+
"server-rendering",
45+
"screen-tracking",
46+
"themes",
47+
"state-persistence",
48+
"combine-static-with-dynamic",
49+
"testing",
50+
"typescript",
51+
"troubleshooting",
52+
"upgrading-from-6.x"
53+
]
54+
},
55+
{
56+
"type": "category",
57+
"label": "Navigators",
58+
"customProps": {
59+
"icon": "navigators"
60+
},
61+
"items": [
62+
"stack-navigator",
63+
"native-stack-navigator",
64+
"bottom-tab-navigator",
65+
"native-bottom-tab-navigator",
66+
"drawer-navigator",
67+
"material-top-tab-navigator"
68+
]
69+
},
70+
{
71+
"type": "category",
72+
"label": "Libraries",
73+
"customProps": {
74+
"icon": "libraries"
75+
},
76+
"items": ["devtools", "elements", "tab-view", "drawer-layout"]
77+
},
78+
{
79+
"type": "category",
80+
"label": "API reference",
81+
"customProps": {
82+
"icon": "api"
83+
},
84+
"items": [
85+
"static-configuration",
86+
"navigation-container",
87+
"server-container",
88+
"navigator",
89+
"group",
90+
"screen",
91+
"screen-options",
92+
"route-object",
93+
"navigation-object",
94+
"navigation-context",
95+
"navigation-events",
96+
"navigation-state",
97+
"link",
98+
{
99+
"type": "category",
100+
"collapsible": true,
101+
"label": "Hooks",
102+
"items": [
103+
"use-navigation",
104+
"use-route",
105+
"use-navigation-state",
106+
"use-focus-effect",
107+
"use-is-focused",
108+
"use-prevent-remove",
109+
"use-route-path",
110+
"use-link-to",
111+
"use-link-props",
112+
"use-link-builder",
113+
"use-scroll-to-top",
114+
"use-theme"
115+
]
116+
},
117+
{
118+
"type": "category",
119+
"collapsible": true,
120+
"label": "Actions",
121+
"items": [
122+
"navigation-actions",
123+
"stack-actions",
124+
"drawer-actions",
125+
"tab-actions"
126+
]
127+
}
128+
]
129+
},
130+
{
131+
"type": "category",
132+
"label": "Build your own Navigator",
133+
"customProps": {
134+
"icon": "build"
135+
},
136+
"items": ["custom-routers", "custom-navigators"]
137+
},
138+
{
139+
"type": "category",
140+
"label": "Ecosystem",
141+
"customProps": {
142+
"icon": "ecosystem"
143+
},
144+
"items": [
145+
"community-solutions",
146+
"community-navigators",
147+
"community-libraries",
148+
"more-resources"
149+
]
150+
},
151+
{
152+
"type": "category",
153+
"label": "Meta",
154+
"customProps": {
155+
"icon": "meta"
156+
},
157+
"items": [
158+
"migration-guides",
159+
"glossary-of-terms",
160+
"pitch",
161+
"limitations",
162+
"used-by",
163+
"contributing"
164+
]
165+
}
166+
]
111167
}

0 commit comments

Comments
 (0)