Skip to content

Commit 9f7d22d

Browse files
robertjdominguezrobertjdominguez
committed
Feature: Customize sidebar (#165)
## Description 📝 This PR adds a fully custom sidebar implementation for our docs, giving us complete control over structure, styling, and behavior. I replaced the default layout with a custom React component that uses a category config to group and order pages consistently, cleaned up sidebar labels, and improved visual clarity with a redesigned CSS file. This sets us up for more flexible sidebar behavior going forward.
1 parent 27f6d60 commit 9f7d22d

File tree

19 files changed

+767
-7
lines changed

19 files changed

+767
-7
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ node_modules/
1515
.env.test.local
1616
.env.production.local
1717
.secrets
18+
notes.txt
1819

1920
.direnv
2021

‎docs/automation.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
sidebar_position: 1.8
3-
sidebar_label: Automation
3+
sidebar_label: Build Automations
44
description:
55
"Learn how to build automated workflows and processes with PromptQL for reliable, repeatable business tasks."
66
keywords:

‎docs/billing/_category_.json

Whitespace-only changes.

‎docs/capabilities.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
sidebar_position: 1.6
3-
sidebar_label: What can PromptQL do?
2+
sidebar_position: 1.5
3+
sidebar_label: Capabilities
44
description:
55
"Learn what PromptQL can do to help you make decisions quicker or automate tasks with relability and accuracy."
66
keywords:

‎docs/decision-making.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
sidebar_position: 1.7
3-
sidebar_label: Decision Making
3+
sidebar_label: Make Decisions
44
description: "Learn how you can use PrompQL for accurate AI in your decision-making processes."
55
keywords:
66
- promptql

‎docs/how-to-talk-to-promptql.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
sidebar_position: 1.5
3-
sidebar_label: How to talk to PromptQL
2+
sidebar_position: 1.6
3+
sidebar_label: Talk to PromptQL
44
description: "Learn how to talk with your data via PromptQL."
55
keywords:
66
- promptql

‎src/css/custom.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@
2525
--main-bg-color: #ffffff;
2626
--sidebar-bg-color: #f9fafb;
2727
--sidebar-bg-color-hover: #f1f5f9;
28+
--sidebar-bg-color-active: #e5e7eb;
29+
--sidebar-margin-color-active: #9ca3af;
2830
--heading-color: #1f2937;
2931
--heading-color-hover: #0f172a;
3032
--sidebar-title-color: #374151;
@@ -122,6 +124,8 @@ html[data-theme='dark'] {
122124
--main-bg-color: #111827;
123125
--sidebar-bg-color: #060e23;
124126
--sidebar-bg-color-hover: #1f2937;
127+
--sidebar-bg-color-active: #142046;
128+
--sidebar-margin-color-active: #1f5aff;
125129
--heading-color: #e5e7eb;
126130
--heading-color-hover: #e5e7eb;
127131
--sidebar-title-color: #d1d5db;

‎src/theme/DocRoot/Layout/Sidebar/styles.module.css

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
11
:root {
2-
--doc-sidebar-width: 300px;
2+
--doc-sidebar-width: 250px;
33
--doc-sidebar-hidden-width: 30px;
44
}
55

66
.docSidebarContainer {
77
display: none;
8+
9+
}
10+
11+
.sidebarViewport {
12+
top: 0;
13+
position: sticky;
14+
height: 100%;
15+
max-height: 100vh;
16+
width: 100%;
17+
overflow-x: hidden;
818
}
919

1020
@media (min-width: 997px) {

‎src/theme/DocSidebar/CustomSidebar.css

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
.custom-sidebar {
2+
height: 100vh;
3+
background-color: var(--sidebar-bg-color) !important;
4+
width: 100%;
5+
overflow-y: auto;
6+
padding-top: 5rem;
7+
}
8+
9+
.custom-sidebar__content {
10+
padding: 1.5rem 0;
11+
}
12+
13+
.custom-sidebar__category {
14+
margin-bottom: 2rem;
15+
}
16+
17+
.custom-sidebar__category:last-child {
18+
margin-bottom: 1rem;
19+
}
20+
21+
.custom-sidebar__category-title {
22+
margin: 0 0 0.75rem 0;
23+
padding: 0 1.5rem;
24+
font-size: 0.75rem;
25+
font-weight: 600;
26+
text-transform: uppercase;
27+
letter-spacing: 0.05em;
28+
color: #6b7280;
29+
}
30+
31+
.custom-sidebar__category-content {
32+
display: flex;
33+
flex-direction: column;
34+
}
35+
36+
.custom-sidebar__empty {
37+
color: #9ca3af;
38+
font-style: italic;
39+
margin: 0;
40+
font-size: 0.875rem;
41+
padding: 0 1.5rem;
42+
}
43+
44+
.custom-sidebar__items {
45+
display: flex;
46+
flex-direction: column;
47+
}
48+
49+
.custom-sidebar__item {
50+
margin: 0;
51+
}
52+
53+
.custom-sidebar__link {
54+
display: flex;
55+
align-items: center;
56+
padding: 0.5rem 1.5rem;
57+
color: var(--sidebar-title-color) !important;
58+
text-decoration: none;
59+
font-size: 0.875rem;
60+
line-height: 1.25rem;
61+
font-weight: 500;
62+
transition: all 0.15s ease;
63+
border-left: 3px solid transparent;
64+
}
65+
66+
.custom-sidebar__link:hover {
67+
color: var(--body-link-color-hover) !important;
68+
}
69+
70+
.custom-sidebar__link--active {
71+
background-color: var(--sidebar-bg-color-active);
72+
border-left-color: var(--sidebar-margin-color-active);
73+
font-weight: 600;
74+
}
75+
76+
.custom-sidebar__collapsible {
77+
margin: 0;
78+
}
79+
80+
81+
.custom-sidebar__folder-title {
82+
display: flex;
83+
align-items: center;
84+
padding: 0.5rem 1.5rem;
85+
cursor: pointer;
86+
font-size: 0.875rem;
87+
transition: all 0.15s ease;
88+
border: none;
89+
background: none;
90+
width: 100%;
91+
text-align: left;
92+
border-left: 3px solid transparent;
93+
list-style: none;
94+
}
95+
96+
.custom-sidebar__subitems .custom-sidebar__folder-title {
97+
padding-left: 40px;
98+
}
99+
100+
101+
.custom-sidebar__collapsible[open] .custom-sidebar__subitems .custom-sidebar__subitems .custom-sidebar__link {
102+
padding-left: 60px !important;
103+
}
104+
105+
.custom-sidebar__folder-title:hover {
106+
color: var(--body-link-color-hover);
107+
}
108+
109+
.custom-sidebar__folder-title::-webkit-details-marker {
110+
display: none;
111+
}
112+
113+
.custom-sidebar__subitems {
114+
list-style: none;
115+
padding: 0;
116+
margin: 0;
117+
}
118+
119+
.custom-sidebar__subitems .custom-sidebar__link {
120+
padding-left: 2.5rem;
121+
font-weight: 400;
122+
color: #6b7280;
123+
border-left: 3px solid transparent;
124+
}
125+
126+
.custom-sidebar__subitems .custom-sidebar__link--active {
127+
border-left: 3px solid var(--sidebar-margin-color-active);
128+
}
129+
130+
/* Scrollbar styling */
131+
.custom-sidebar::-webkit-scrollbar {
132+
width: 6px;
133+
}
134+
135+
.custom-sidebar::-webkit-scrollbar-track {
136+
background: transparent;
137+
}
138+
139+
.custom-sidebar::-webkit-scrollbar-thumb {
140+
background: #d1d5db;
141+
border-radius: 3px;
142+
}
143+
144+
/* Dark mode support (optional) */
145+
@media (prefers-color-scheme: dark) {
146+
.custom-sidebar {
147+
background: #111827;
148+
border-right-color: #374151;
149+
}
150+
151+
.custom-sidebar__link--active {
152+
background-color: var(--sidebar-bg-color-active);
153+
border-left-color: var(--sidebar-margin-color-active);
154+
}
155+
}

‎src/theme/DocSidebar/Desktop/CollapseButton/index.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, {type ReactNode} from 'react';
2+
import clsx from 'clsx';
3+
import {translate} from '@docusaurus/Translate';
4+
import IconArrow from '@theme/Icon/Arrow';
5+
import type {Props} from '@theme/DocSidebar/Desktop/CollapseButton';
6+
7+
import styles from './styles.module.css';
8+
9+
export default function CollapseButton({onClick}: Props): ReactNode {
10+
return (
11+
<button
12+
type="button"
13+
title={translate({
14+
id: 'theme.docs.sidebar.collapseButtonTitle',
15+
message: 'Collapse sidebar',
16+
description: 'The title attribute for collapse button of doc sidebar',
17+
})}
18+
aria-label={translate({
19+
id: 'theme.docs.sidebar.collapseButtonAriaLabel',
20+
message: 'Collapse sidebar',
21+
description: 'The title attribute for collapse button of doc sidebar',
22+
})}
23+
className={clsx(
24+
'button button--secondary button--outline',
25+
styles.collapseSidebarButton,
26+
)}
27+
onClick={onClick}>
28+
<IconArrow className={styles.collapseSidebarButtonIcon} />
29+
</button>
30+
);
31+
}

0 commit comments

Comments
 (0)