Vibes logo

Sticky Sidebar Layout

Installation

Run the following command

npx vibes@latest add sticky-sidebar-layout

Usage

import { StickySidebarLayout } from '@/vibes/soul/sections/sticky-sidebar-layout';function Usage() {  return (      <StickySidebarLayout          sidebar={              <nav>                  <ul>                      <li><a href="/orders">Orders<a></li>                      <li><a href="/addresses">Addresses<a></li>                      <li><a href="/account">Account<a></li>                  </ul>              </nav>          }      >          <div>              <p>Content</p>          </div>      </StickySidebarLayout>  );}

API Reference

StickySidebarLayoutProps

PropTypeDefault
className
string
sidebar*
ReactNode
children*
ReactNode
containerSize
'md' | 'lg' | 'xl' | '2xl'
'2xl'
sidebarSize
'1/4' | '1/3' | '1/2' | 'sm' | 'md' | 'lg'
'1/3'
sidebarPosition
'before' | 'after'
'before'
hideOverflow
boolean
false

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --section-max-width-medium: 768px;  --section-max-width-large: 1024px;  --section-max-width-x-large: 1280px;  --section-max-width-2x-large: 1536px;}