Skip to content

Feature: Customize sidebar #165

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ node_modules/
.env.test.local
.env.production.local
.secrets
notes.txt

.direnv

Expand Down
2 changes: 1 addition & 1 deletion docs/automation.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
sidebar_position: 1.8
sidebar_label: Automation
sidebar_label: Build Automations
description:
"Learn how to build automated workflows and processes with PromptQL for reliable, repeatable business tasks."
keywords:
Expand Down
Empty file removed docs/billing/_category_.json
Empty file.
4 changes: 2 additions & 2 deletions docs/capabilities.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
sidebar_position: 1.6
sidebar_label: What can PromptQL do?
sidebar_position: 1.5
sidebar_label: Capabilities
description:
"Learn what PromptQL can do to help you make decisions quicker or automate tasks with relability and accuracy."
keywords:
Expand Down
2 changes: 1 addition & 1 deletion docs/decision-making.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
sidebar_position: 1.7
sidebar_label: Decision Making
sidebar_label: Make Decisions
description: "Learn how you can use PrompQL for accurate AI in your decision-making processes."
keywords:
- promptql
Expand Down
4 changes: 2 additions & 2 deletions docs/how-to-talk-to-promptql.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
sidebar_position: 1.5
sidebar_label: How to talk to PromptQL
sidebar_position: 1.6
sidebar_label: Talk to PromptQL
description: "Learn how to talk with your data via PromptQL."
keywords:
- promptql
Expand Down
4 changes: 4 additions & 0 deletions src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@
--main-bg-color: #ffffff;
--sidebar-bg-color: #f9fafb;
--sidebar-bg-color-hover: #f1f5f9;
--sidebar-bg-color-active: #e5e7eb;
--sidebar-margin-color-active: #9ca3af;
--heading-color: #1f2937;
--heading-color-hover: #0f172a;
--sidebar-title-color: #374151;
Expand Down Expand Up @@ -122,6 +124,8 @@ html[data-theme='dark'] {
--main-bg-color: #111827;
--sidebar-bg-color: #060e23;
--sidebar-bg-color-hover: #1f2937;
--sidebar-bg-color-active: #142046;
--sidebar-margin-color-active: #1f5aff;
--heading-color: #e5e7eb;
--heading-color-hover: #e5e7eb;
--sidebar-title-color: #d1d5db;
Expand Down
12 changes: 11 additions & 1 deletion src/theme/DocRoot/Layout/Sidebar/styles.module.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,20 @@
:root {
--doc-sidebar-width: 300px;
--doc-sidebar-width: 250px;
--doc-sidebar-hidden-width: 30px;
}

.docSidebarContainer {
display: none;

}

.sidebarViewport {
top: 0;
position: sticky;
height: 100%;
max-height: 100vh;
width: 100%;
overflow-x: hidden;
}

@media (min-width: 997px) {
Expand Down
155 changes: 155 additions & 0 deletions src/theme/DocSidebar/CustomSidebar.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
.custom-sidebar {
height: 100vh;
background-color: var(--sidebar-bg-color) !important;
width: 100%;
overflow-y: auto;
padding-top: 5rem;
}

.custom-sidebar__content {
padding: 1.5rem 0;
}

.custom-sidebar__category {
margin-bottom: 2rem;
}

.custom-sidebar__category:last-child {
margin-bottom: 1rem;
}

.custom-sidebar__category-title {
margin: 0 0 0.75rem 0;
padding: 0 1.5rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #6b7280;
}

.custom-sidebar__category-content {
display: flex;
flex-direction: column;
}

.custom-sidebar__empty {
color: #9ca3af;
font-style: italic;
margin: 0;
font-size: 0.875rem;
padding: 0 1.5rem;
}

.custom-sidebar__items {
display: flex;
flex-direction: column;
}

.custom-sidebar__item {
margin: 0;
}

.custom-sidebar__link {
display: flex;
align-items: center;
padding: 0.5rem 1.5rem;
color: var(--sidebar-title-color) !important;
text-decoration: none;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
transition: all 0.15s ease;
border-left: 3px solid transparent;
}

.custom-sidebar__link:hover {
color: var(--body-link-color-hover) !important;
}

.custom-sidebar__link--active {
background-color: var(--sidebar-bg-color-active);
border-left-color: var(--sidebar-margin-color-active);
font-weight: 600;
}

.custom-sidebar__collapsible {
margin: 0;
}


.custom-sidebar__folder-title {
display: flex;
align-items: center;
padding: 0.5rem 1.5rem;
cursor: pointer;
font-size: 0.875rem;
transition: all 0.15s ease;
border: none;
background: none;
width: 100%;
text-align: left;
border-left: 3px solid transparent;
list-style: none;
}

.custom-sidebar__subitems .custom-sidebar__folder-title {
padding-left: 40px;
}


.custom-sidebar__collapsible[open] .custom-sidebar__subitems .custom-sidebar__subitems .custom-sidebar__link {
padding-left: 60px !important;
}

.custom-sidebar__folder-title:hover {
color: var(--body-link-color-hover);
}

.custom-sidebar__folder-title::-webkit-details-marker {
display: none;
}

.custom-sidebar__subitems {
list-style: none;
padding: 0;
margin: 0;
}

.custom-sidebar__subitems .custom-sidebar__link {
padding-left: 2.5rem;
font-weight: 400;
color: #6b7280;
border-left: 3px solid transparent;
}

.custom-sidebar__subitems .custom-sidebar__link--active {
border-left: 3px solid var(--sidebar-margin-color-active);
}

/* Scrollbar styling */
.custom-sidebar::-webkit-scrollbar {
width: 6px;
}

.custom-sidebar::-webkit-scrollbar-track {
background: transparent;
}

.custom-sidebar::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 3px;
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
.custom-sidebar {
background: #111827;
border-right-color: #374151;
}

.custom-sidebar__link--active {
background-color: var(--sidebar-bg-color-active);
border-left-color: var(--sidebar-margin-color-active);
}
}
31 changes: 31 additions & 0 deletions src/theme/DocSidebar/Desktop/CollapseButton/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React, {type ReactNode} from 'react';
import clsx from 'clsx';
import {translate} from '@docusaurus/Translate';
import IconArrow from '@theme/Icon/Arrow';
import type {Props} from '@theme/DocSidebar/Desktop/CollapseButton';

import styles from './styles.module.css';

export default function CollapseButton({onClick}: Props): ReactNode {
return (
<button
type="button"
title={translate({
id: 'theme.docs.sidebar.collapseButtonTitle',
message: 'Collapse sidebar',
description: 'The title attribute for collapse button of doc sidebar',
})}
aria-label={translate({
id: 'theme.docs.sidebar.collapseButtonAriaLabel',
message: 'Collapse sidebar',
description: 'The title attribute for collapse button of doc sidebar',
})}
className={clsx(
'button button--secondary button--outline',
styles.collapseSidebarButton,
)}
onClick={onClick}>
<IconArrow className={styles.collapseSidebarButtonIcon} />
</button>
);
}
40 changes: 40 additions & 0 deletions src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
:root {
--docusaurus-collapse-button-bg: transparent;
--docusaurus-collapse-button-bg-hover: rgb(0 0 0 / 10%);
}

[data-theme='dark']:root {
--docusaurus-collapse-button-bg: rgb(255 255 255 / 5%);
--docusaurus-collapse-button-bg-hover: rgb(255 255 255 / 10%);
}

@media (min-width: 997px) {
.collapseSidebarButton {
display: block !important;
background-color: var(--docusaurus-collapse-button-bg);
height: 40px;
position: sticky;
bottom: 0;
border-radius: 0;
border: 1px solid var(--ifm-toc-border-color);
}

.collapseSidebarButtonIcon {
transform: rotate(180deg);
margin-top: 4px;
}

[dir='rtl'] .collapseSidebarButtonIcon {
transform: rotate(0);
}

.collapseSidebarButton:hover,
.collapseSidebarButton:focus {
background-color: var(--docusaurus-collapse-button-bg-hover);
}
}

.collapseSidebarButton {
display: none;
margin: 0;
}
54 changes: 54 additions & 0 deletions src/theme/DocSidebar/Desktop/Content/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React, {type ReactNode, useState} from 'react';
import clsx from 'clsx';
import {ThemeClassNames} from '@docusaurus/theme-common';
import {
useAnnouncementBar,
useScrollPosition,
} from '@docusaurus/theme-common/internal';
import {translate} from '@docusaurus/Translate';
import DocSidebarItems from '@theme/DocSidebarItems';
import type {Props} from '@theme/DocSidebar/Desktop/Content';

import styles from './styles.module.css';

function useShowAnnouncementBar() {
const {isActive} = useAnnouncementBar();
const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);

useScrollPosition(
({scrollY}) => {
if (isActive) {
setShowAnnouncementBar(scrollY === 0);
}
},
[isActive],
);
return isActive && showAnnouncementBar;
}

export default function DocSidebarDesktopContent({
path,
sidebar,
className,
}: Props): ReactNode {
const showAnnouncementBar = useShowAnnouncementBar();

return (
<nav
aria-label={translate({
id: 'theme.docs.sidebar.navAriaLabel',
message: 'Docs sidebar',
description: 'The ARIA label for the sidebar navigation',
})}
className={clsx(
'menu thin-scrollbar',
styles.menu,
showAnnouncementBar && styles.menuWithAnnouncementBar,
className,
)}>
<ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
<DocSidebarItems items={sidebar} activePath={path} level={1} />
</ul>
</nav>
);
}
16 changes: 16 additions & 0 deletions src/theme/DocSidebar/Desktop/Content/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
@media (min-width: 997px) {
.menu {
flex-grow: 1;
padding: 0.5rem;
}
@supports (scrollbar-gutter: stable) {
.menu {
padding: 0.5rem 0 0.5rem 0.5rem;
scrollbar-gutter: stable;
}
}

.menuWithAnnouncementBar {
margin-bottom: var(--docusaurus-announcement-bar-height);
}
}
Loading
Loading