Skip to content

Commit 8806da2

Browse files
denisselludenissellu
authored
Merge pull request #1986 from ably/ACT-39/collapsible-sidebar-items
[ACT-39] collapsible sidebar items
2 parents 12d43ad + 5a7be7c commit 8806da2

File tree

2 files changed

+182
-177
lines changed

2 files changed

+182
-177
lines changed

‎data/yaml/page-furniture/sidebar.yaml‎

Lines changed: 178 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -1,185 +1,190 @@
11
name: 'LeftSidebarMenu'
22
items:
3-
- label: 'Basics'
3+
- label: 'Pub/Sub Channels'
44
link: ''
55
items:
6-
- label: 'What is Ably?'
7-
link: /docs/basics/ably
8-
- label: 'How to use Ably'
9-
link: /docs/basics/use-ably
10-
- label: 'Getting started'
11-
link: ''
12-
items:
13-
- label: 'Quickstart guide'
14-
link: /docs/getting-started/quickstart
15-
- label: 'Available SDKs'
16-
link: /docs/getting-started/sdks
17-
- label: 'SDK setup'
18-
link: /docs/getting-started/setup
19-
- label: 'React Hooks'
20-
link: /docs/getting-started/react
21-
- label: 'Authentication'
22-
link: ''
23-
items:
24-
- label: 'Overview'
25-
link: /docs/auth
26-
- label: 'Basic auth'
27-
link: /docs/auth/basic
28-
- label: 'Token auth'
29-
link: /docs/auth/token
30-
- label: 'Token revocation'
31-
link: /docs/auth/revocation
32-
- label: 'Identified clients'
33-
link: /docs/auth/identified-clients
34-
- label: 'Capabilities'
35-
link: /docs/auth/capabilities
36-
- label: 'Connections'
37-
link: ''
38-
items:
39-
- label: 'Overview'
40-
link: /docs/connect
41-
- label: 'Connection state and recovery'
42-
link: /docs/connect/states
43-
- label: 'Pub/Sub channels'
44-
link: ''
45-
items:
46-
- label: 'Channels'
47-
link: /docs/channels
48-
- label: 'Messages'
49-
link: /docs/channels/messages
50-
- label: 'Channel options'
51-
link: /docs/channels/options
6+
- label: 'Basics'
7+
link: ''
528
items:
53-
- label: 'Rewind'
54-
link: /docs/channels/options/rewind
55-
- label: 'Deltas'
56-
link: /docs/channels/options/deltas
57-
- label: 'Encryption'
58-
link: /docs/channels/options/encryption
59-
- label: 'Presence and occupancy'
60-
link: ''
61-
items:
62-
- label: 'Overview'
63-
link: /docs/presence-occupancy
64-
- label: 'Presence'
65-
link: /docs/presence-occupancy/presence
66-
- label: 'Occupancy'
67-
link: /docs/presence-occupancy/occupancy
68-
- label: 'Message storage and history'
69-
link: ''
70-
items:
71-
- label: 'Message storage'
72-
link: /docs/storage-history/storage
73-
- label: 'History'
74-
link: /docs/storage-history/history
75-
- label: 'Push Notifications'
76-
link: ''
77-
items:
78-
- label: 'Overview'
79-
link: /docs/general/push
80-
- label: 'Publishing Notifications'
81-
link: /docs/general/push/publish
82-
- label: 'Activate and Subscribe'
83-
link: /docs/general/push/activate-subscribe
84-
- label: 'Push Admin'
85-
link: /docs/general/push/admin
86-
- label: 'Metadata and statistics'
87-
link: ''
88-
items:
89-
- label: 'Metadata'
90-
link: /docs/metadata-stats/metadata
9+
- label: 'What is Ably?'
10+
link: /docs/basics/ably
11+
- label: 'How to use Ably'
12+
link: /docs/basics/use-ably
13+
- label: 'Getting started'
14+
link: ''
9115
items:
92-
- label: 'Metadata subscriptions'
93-
link: /docs/metadata-stats/metadata/subscribe
94-
- label: 'Metadata REST requests'
95-
link: /docs/metadata-stats/metadata/rest
96-
- label: 'Statistics'
97-
link: /docs/metadata-stats/stats
98-
- label: 'Integrations'
99-
link: ''
100-
items:
101-
- label: 'Overview'
102-
link: /docs/general/integrations
103-
- label: 'Events'
16+
- label: 'Quickstart guide'
17+
link: /docs/getting-started/quickstart
18+
- label: 'Available SDKs'
19+
link: /docs/getting-started/sdks
20+
- label: 'SDK setup'
21+
link: /docs/getting-started/setup
22+
- label: 'React Hooks'
23+
link: /docs/getting-started/react
24+
- label: 'Authentication'
10425
link: ''
10526
items:
10627
- label: 'Overview'
107-
link: /docs/general/events
108-
- label: 'AWS Lambda Functions'
109-
link: /docs/general/events/aws-lambda
110-
- label: 'Azure Functions'
111-
link: /docs/general/events/azure
112-
- label: 'Google Cloud Functions'
113-
link: /docs/general/events/google-functions
114-
- label: 'Zapier'
115-
link: /docs/general/events/zapier
116-
- label: 'Cloudflare Workers'
117-
link: /docs/general/events/cloudflare
118-
- label: 'IFTTT'
119-
link: /docs/general/events/ifttt
120-
- label: 'Message Queues'
121-
link: /docs/general/queues
122-
- label: 'Kafka Connector'
123-
link: /docs/general/kafka-connector
124-
- label: 'Firehose'
28+
link: /docs/auth
29+
- label: 'Basic auth'
30+
link: /docs/auth/basic
31+
- label: 'Token auth'
32+
link: /docs/auth/token
33+
- label: 'Token revocation'
34+
link: /docs/auth/revocation
35+
- label: 'Identified clients'
36+
link: /docs/auth/identified-clients
37+
- label: 'Capabilities'
38+
link: /docs/auth/capabilities
39+
- label: 'Connections'
12540
link: ''
12641
items:
12742
- label: 'Overview'
128-
link: /docs/general/firehose
129-
- label: 'Kafka Rule'
130-
link: /docs/general/firehose/kafka-rule
131-
- label: 'Kinesis Rule'
132-
link: /docs/general/firehose/kinesis-rule
133-
- label: 'AMQP Rule'
134-
link: /docs/general/firehose/amqp-rule
135-
- label: 'SQS Rule'
136-
link: /docs/general/firehose/sqs-rule
137-
- label: 'Pulsar Rule'
138-
link: /docs/general/firehose/pulsar-rule
139-
- label: 'Other protocols'
140-
link: ''
141-
items:
142-
- label: 'Overview'
143-
link: /docs/protocols
144-
- label: 'Server-Sent Events (SSE)'
145-
link: /docs/protocols/sse
146-
- label: 'MQTT'
147-
link: /docs/protocols/mqtt
148-
- label: 'Ably accounts and apps'
149-
link: ''
150-
items:
151-
- label: 'Programmatic management with Control API'
152-
link: /docs/account/control-api
153-
- label: 'Asset Tracking'
154-
link: ''
155-
items:
156-
- label: 'Overview'
157-
link: /docs/asset-tracking
158-
- label: 'Using the Example Apps'
159-
link: /docs/asset-tracking/example-apps
160-
- label: 'Using the SDKs'
161-
link: /docs/asset-tracking/using-the-sdks
162-
- label: 'API Streamer'
163-
link: ''
164-
items:
165-
- label: 'Overview'
166-
link: /docs/api-streamer
167-
- label: 'Producer'
168-
link: /docs/api-streamer/producer
169-
- label: 'Consumer'
170-
link: /docs/api-streamer/consumer
171-
- label: 'Hub'
172-
link: /docs/api-streamer/hub
173-
- label: 'Further Reading'
174-
link: ''
175-
items:
176-
- label: 'API References'
177-
link: /docs/api
178-
- label: 'Glossary'
179-
link: /docs/glossary
180-
- label: 'Best Practice Guide'
181-
link: /docs/best-practice-guide
182-
- label: 'Limits'
183-
link: /docs/general/limits
184-
- label: 'Platform Customization'
185-
link: /docs/platform-customization
43+
link: /docs/connect
44+
- label: 'Connection state and recovery'
45+
link: /docs/connect/states
46+
- label: 'Pub/Sub channels'
47+
link: ''
48+
items:
49+
- label: 'Channels'
50+
link: /docs/channels
51+
- label: 'Messages'
52+
link: /docs/channels/messages
53+
- label: 'Channel options'
54+
link: ''
55+
items:
56+
- label: Overview
57+
link: /docs/channels/options
58+
- label: 'Rewind'
59+
link: /docs/channels/options/rewind
60+
- label: 'Deltas'
61+
link: /docs/channels/options/deltas
62+
- label: 'Encryption'
63+
link: /docs/channels/options/encryption
64+
- label: 'Presence and occupancy'
65+
link: ''
66+
items:
67+
- label: 'Overview'
68+
link: /docs/presence-occupancy
69+
- label: 'Presence'
70+
link: /docs/presence-occupancy/presence
71+
- label: 'Occupancy'
72+
link: /docs/presence-occupancy/occupancy
73+
- label: 'Message storage and history'
74+
link: ''
75+
items:
76+
- label: 'Message storage'
77+
link: /docs/storage-history/storage
78+
- label: 'History'
79+
link: /docs/storage-history/history
80+
- label: 'Push Notifications'
81+
link: ''
82+
items:
83+
- label: 'Overview'
84+
link: /docs/general/push
85+
- label: 'Publishing Notifications'
86+
link: /docs/general/push/publish
87+
- label: 'Activate and Subscribe'
88+
link: /docs/general/push/activate-subscribe
89+
- label: 'Push Admin'
90+
link: /docs/general/push/admin
91+
- label: 'Metadata and statistics'
92+
link: ''
93+
items:
94+
- label: 'Metadata'
95+
link: /docs/metadata-stats/metadata
96+
items:
97+
- label: 'Metadata subscriptions'
98+
link: /docs/metadata-stats/metadata/subscribe
99+
- label: 'Metadata REST requests'
100+
link: /docs/metadata-stats/metadata/rest
101+
- label: 'Statistics'
102+
link: /docs/metadata-stats/stats
103+
- label: 'Integrations'
104+
link: ''
105+
items:
106+
- label: 'Overview'
107+
link: /docs/general/integrations
108+
- label: 'Events'
109+
link: ''
110+
items:
111+
- label: 'Overview'
112+
link: /docs/general/webhooks
113+
- label: 'AWS Lambda Functions'
114+
link: /docs/general/webhooks/aws-lambda
115+
- label: 'Azure Functions'
116+
link: /docs/general/webhooks/azure
117+
- label: 'Google Cloud Functions'
118+
link: /docs/general/webhooks/google-functions
119+
- label: 'Zapier'
120+
link: /docs/general/webhooks/zapier
121+
- label: 'Cloudflare Workers'
122+
link: /docs/general/webhooks/cloudflare
123+
- label: 'IFTTT'
124+
link: /docs/general/webhooks/ifttt
125+
- label: 'Message Queues'
126+
link: /docs/general/queues
127+
- label: 'Kafka Connector'
128+
link: /docs/general/kafka-connector
129+
- label: 'Firehose'
130+
link: ''
131+
items:
132+
- label: 'Overview'
133+
link: /docs/general/firehose
134+
- label: 'Kafka Rule'
135+
link: /docs/general/firehose/kafka-rule
136+
- label: 'Kinesis Rule'
137+
link: /docs/general/firehose/kinesis-rule
138+
- label: 'AMQP Rule'
139+
link: /docs/general/firehose/amqp-rule
140+
- label: 'SQS Rule'
141+
link: /docs/general/firehose/sqs-rule
142+
- label: 'Pulsar Rule'
143+
link: /docs/general/firehose/pulsar-rule
144+
- label: 'Other protocols'
145+
link: ''
146+
items:
147+
- label: 'Overview'
148+
link: /docs/protocols
149+
- label: 'Server-Sent Events (SSE)'
150+
link: /docs/protocols/sse
151+
- label: 'MQTT'
152+
link: /docs/protocols/mqtt
153+
- label: 'Ably accounts and apps'
154+
link: ''
155+
items:
156+
- label: 'Programmatic management with Control API'
157+
link: /docs/account/control-api
158+
- label: 'Asset Tracking'
159+
link: ''
160+
items:
161+
- label: 'Overview'
162+
link: /docs/asset-tracking
163+
- label: 'Using the Example Apps'
164+
link: /docs/asset-tracking/example-apps
165+
- label: 'Using the SDKs'
166+
link: /docs/asset-tracking/using-the-sdks
167+
- label: 'API Streamer'
168+
link: ''
169+
items:
170+
- label: 'Overview'
171+
link: /docs/api-streamer
172+
- label: 'Producer'
173+
link: /docs/api-streamer/producer
174+
- label: 'Consumer'
175+
link: /docs/api-streamer/consumer
176+
- label: 'Hub'
177+
link: /docs/api-streamer/hub
178+
- label: 'Further Reading'
179+
link: ''
180+
items:
181+
- label: 'API References'
182+
link: /docs/api
183+
- label: 'Glossary'
184+
link: /docs/glossary
185+
- label: 'Best Practice Guide'
186+
link: /docs/best-practice-guide
187+
- label: 'Limits'
188+
link: /docs/general/limits
189+
- label: 'Platform Customization'
190+
link: /docs/platform-customization

‎src/components/Sidebar/Sidebar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { ReactElement } from 'react';
21
import cn from 'classnames';
2+
import { ReactElement } from 'react';
33

44
import { HighlightedMenuContext } from 'src/contexts/highlighted-menu-context';
55

6-
import { SidebarLinkMenu, SectionTitle } from './';
7-
import { SidebarData, EXPAND_MENU } from './types';
6+
import { SectionTitle, SidebarLinkMenu } from './';
7+
import { EXPAND_MENU, SidebarData } from './types';
88

99
type SidebarProps = {
1010
data: SidebarData[];
@@ -32,7 +32,7 @@ export const Sidebar = ({
3232
data-languages={languages}
3333
>
3434
{data.map(({ label, content }) => (
35-
<div key={label} className="mb-32 px-24">
35+
<div key={label} className="px-24 mb-128">
3636
{label && <SectionTitle className="mb-8">{label}</SectionTitle>}
3737
<HighlightedMenuContext.Consumer>
3838
{(highlightedMenuId) =>

0 commit comments

Comments
 (0)