About this template: Warp single-sidebars

Redocly offers almost complete flexibility in information architecture. This website is a demonstration of a common information architecture with a single navbar and multiple sidebars.

The content is meant to be fun and playful, but the information architecture is serious.

Step 1: Sitemap

Map your content out. A sitemap is different from navigation.

I color code the sitemap to organize the content into logical groupings.

To spare space, I only show the handful of pages in each logical grouping.

Step 2: Navigation

Decide how you want to organize your navigation. You can have navbars, sidebars, and footers. Most websites have 1 navbar and 1 footer, but it's not uncommon to have multiple sidebars. In some exceptions for multi-product website, they have multiple navbars.

I decided this site would have 1 navbar, 1 footer, and a single sidebar. I decided a few pages shouldn't have sidebars such as the home page, and the legal pages.

However, I could have added a sidebar to any of those pages by adding the file to the appropriate sidebars.yaml file.

A project with multiple sidebars would have multiple sidebars.yaml files (with that exact name but located in different folders). They can be organized into folders as appropriate. See an example with multiple sidebars on GitHub.

This project with a single sidebar is also available on Github at the Warp Single-sidebar template.

├── @theme
│   ├── Templates
│   │   └── StepByStep.tsx
│   ├── components
│   │   └── CardWithCode
│   │       └── CardWithCode.tsx
│   ├── markdoc
│   │   ├── components.tsx
│   │   └── schema.ts
│   └── styles.css
├── about.md
├── apis
│   ├── arazzo.yaml
│   └── index.yaml
├── changelog.md
├── guides
│   ├── advanced-topics
│   │   ├── automated-event-manipulation.md
│   │   ├── case-studies-advanced-manipulation.md
│   │   ├── complex-paradox-resolution.md
│   │   ├── custom-extensions-plugins.md
│   │   ├── high-precision-temporal-anchoring.md
│   │   ├── index.md
│   │   ├── multi-timeline-management.md
│   │   ├── security-in-time-travel.md
│   │   ├── temporal-data-management.md
│   │   ├── temporal-ethics-best-practices.md
│   │   └── temporal-mechanics.md
│   ├── event-manipulation.md
│   ├── index.md
│   ├── quickstart.md
│   ├── temporal-anchoring.md
│   └── time-navigation.md
├── images
│   ├── background.svg
│   ├── grid-dark.svg
│   ├── grid.svg
│   ├── logo.svg
│   ├── navigation.png
│   └── sitemap.png
├── index.page.tsx
├── legal
│   ├── responsible-use.md
│   └── terms.md
├── package-lock.json
├── package.json
├── redocly.yaml
├── sidebars.yaml
├── tools
│   ├── cli.md
│   ├── index.md
│   ├── replay.md
│   └── sdks.md
└── tutorials
    ├── index.md
    ├── lost-invention.md
    └── missing-mathematician.md

Step 3: Home page

The home page is the first page that visitors see. It is the most important page.

While I usually start with a draft, I often complete the home page last.

The home page can have a hero section, a features section, a benefits section, and a call to action.

In addition, the home page can have a navbar, a footer, and a sidebar. However, many times people choose not to have a sidebar on the home page.

I start my home page in Markdown because it's easy to write. Then, I add in the fancier components and design flourishes last.

The same concept applies to any landing page, not just the home page.