@arolariu/components/dist/components/ui/sidebar_module.css

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

.wrapper-Z_8E6C {
  width: 100%;
  min-height: 100svh;
}

.staticSidebar-iqwVTz, .wrapper-Z_8E6C {
  background-color: var(--ac-sidebar);
  display: flex;
}

.staticSidebar-iqwVTz {
  height: 100%;
  width: var(--ac-sidebar-width);
  flex-direction: column;
}

.desktopRoot-Q5fWHs, .staticSidebar-iqwVTz {
  color: var(--ac-sidebar-foreground);
}

.desktopRoot-Q5fWHs {
  display: none;
}

@media (width >= 768px) {
  .desktopRoot-Q5fWHs {
    display: block;
  }
}

.gap-Asavvf {
  transition: width var(--ac-transition-slow);
  width: var(--ac-sidebar-width);
  background-color: #0000;
  position: relative;
}

.desktopRoot-Q5fWHs[data-collapsible="offcanvas"] .gap-Asavvf {
  width: 0;
}

.desktopRoot-Q5fWHs[data-collapsible="icon"] .gap-Asavvf {
  width: var(--ac-sidebar-width-icon);
}

.desktopRoot-Q5fWHs[data-variant="floating"] .gap-Asavvf, .desktopRoot-Q5fWHs[data-variant="inset"] .gap-Asavvf {
  width: calc(var(--ac-sidebar-width-icon) + var(--ac-space-4));
}

.panelWrap-Femk3g {
  transition: left var(--ac-transition-slow),right var(--ac-transition-slow),width var(--ac-transition-slow),padding var(--ac-transition-slow);
  width: var(--ac-sidebar-width);
  z-index: 20;
  display: none;
  position: fixed;
  inset-block: 0;
}

@media (width >= 768px) {
  .panelWrap-Femk3g {
    display: flex;
  }
}

.desktopRoot-Q5fWHs[data-side="left"] .panelWrap-Femk3g {
  left: 0;
}

.desktopRoot-Q5fWHs[data-side="right"] .panelWrap-Femk3g {
  right: 0;
}

.desktopRoot-Q5fWHs[data-side="left"][data-collapsible="offcanvas"] .panelWrap-Femk3g {
  left: calc(var(--ac-sidebar-width)*-1);
}

.desktopRoot-Q5fWHs[data-side="right"][data-collapsible="offcanvas"] .panelWrap-Femk3g {
  right: calc(var(--ac-sidebar-width)*-1);
}

.desktopRoot-Q5fWHs[data-collapsible="icon"] .panelWrap-Femk3g {
  width: var(--ac-sidebar-width-icon);
}

.desktopRoot-Q5fWHs[data-variant="floating"] .panelWrap-Femk3g, .desktopRoot-Q5fWHs[data-variant="inset"] .panelWrap-Femk3g {
  padding: var(--ac-space-2);
}

.desktopRoot-Q5fWHs[data-variant="floating"][data-collapsible="icon"] .panelWrap-Femk3g, .desktopRoot-Q5fWHs[data-variant="inset"][data-collapsible="icon"] .panelWrap-Femk3g {
  width: calc(var(--ac-sidebar-width-icon) + var(--ac-space-4));
}

.panel-nEmI4M {
  background-color: var(--ac-sidebar);
  color: var(--ac-sidebar-foreground);
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
}

.desktopRoot-Q5fWHs[data-variant="sidebar"] .panel-nEmI4M {
  border-inline-end: 1px solid var(--ac-sidebar-border);
}

.desktopRoot-Q5fWHs[data-side="right"][data-variant="sidebar"] .panel-nEmI4M {
  border-inline-end: 0;
  border-inline-start: 1px solid var(--ac-sidebar-border);
}

.desktopRoot-Q5fWHs[data-variant="floating"] .panel-nEmI4M, .desktopRoot-Q5fWHs[data-variant="inset"] .panel-nEmI4M {
  border: 1px solid var(--ac-sidebar-border);
  border-radius: var(--ac-radius-lg);
  box-shadow: 0 8px 24px #00000014;
}

.mobilePortal-W5uR40 {
  z-index: 50;
  position: fixed;
  inset: 0;
}

.mobileOverlay-hexS4k {
  background: #00000073;
  border: 0;
  position: absolute;
  inset: 0;
}

.mobilePanel-EXOjqA {
  background-color: var(--ac-sidebar);
  color: var(--ac-sidebar-foreground);
  width: var(--ac-sidebar-width);
  padding: 0;
  position: absolute;
  inset-block: 0;
  box-shadow: 0 18px 50px #0000002e;
}

.mobilePanelLeft-dEBUqs {
  left: 0;
}

.mobilePanelRight-LzLifs {
  right: 0;
}

.mobileContent-angW7C {
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
}

.trigger-yRVaLn {
  width: 1.75rem;
  height: 1.75rem;
}

.triggerIcon-UXzrut {
  width: 1rem;
  height: 1rem;
}

.rail-sIXEHr {
  z-index: 30;
  background: none;
  border: 0;
  width: 1rem;
  display: none;
  transform: translateX(-50%);
}

.rail-sIXEHr, .rail-sIXEHr:after {
  transition: background-color var(--ac-transition-fast);
  position: absolute;
  inset-block: 0;
}

.rail-sIXEHr:after {
  content: "";
  background-color: #0000;
  width: 2px;
  left: 50%;
}

@media (width >= 640px) {
  .rail-sIXEHr {
    cursor: ew-resize;
    display: flex;
  }

  .rail-sIXEHr:hover:after {
    background-color: var(--ac-sidebar-border);
  }
}

.desktopRoot-Q5fWHs[data-side="left"] .rail-sIXEHr {
  right: -1rem;
}

.desktopRoot-Q5fWHs[data-side="right"] .rail-sIXEHr {
  left: 0;
}

.desktopRoot-Q5fWHs[data-collapsible="offcanvas"][data-side="left"] .rail-sIXEHr {
  right: -.5rem;
  transform: none;
}

.desktopRoot-Q5fWHs[data-collapsible="offcanvas"][data-side="right"] .rail-sIXEHr {
  left: -.5rem;
  transform: none;
}

.inset-_Tv97P {
  background-color: var(--ac-background);
  flex-direction: column;
  flex: 1;
  width: 100%;
  display: flex;
  position: relative;
}

@media (width >= 768px) {
  .desktopRoot-Q5fWHs[data-variant="inset"] ~ .inset-_Tv97P {
    border-radius: var(--ac-radius-xl);
    margin: var(--ac-space-2);
    margin-inline-start: 0;
    box-shadow: 0 8px 24px #00000014;
  }

  .desktopRoot-Q5fWHs[data-state="collapsed"][data-variant="inset"] ~ .inset-_Tv97P {
    margin-inline-start: var(--ac-space-2);
  }
}

.input-W_EiuQ {
  background-color: var(--ac-background);
  box-shadow: none;
  width: 100%;
  height: 2rem;
}

.footer-eBIkvI, .header-MUEpv1 {
  gap: var(--ac-space-2);
  padding: var(--ac-space-2);
  flex-direction: column;
  display: flex;
}

.separator-ywi73_ {
  background-color: var(--ac-sidebar-border);
  margin-inline: var(--ac-space-2);
  width: auto;
}

.content-T8vlCZ {
  gap: var(--ac-space-2);
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: auto;
}

.desktopRoot-Q5fWHs[data-collapsible="icon"] .content-T8vlCZ {
  overflow: hidden;
}

.group-Q2931N {
  min-width: 0;
  padding: var(--ac-space-2);
  flex-direction: column;
  width: 100%;
  display: flex;
  position: relative;
}

.groupLabel-NTflyg {
  border-radius: var(--ac-radius-md);
  color: color-mix(in oklch,var(--ac-sidebar-foreground),transparent 30%);
  font-size: var(--ac-text-xs);
  height: 2rem;
  padding-inline: var(--ac-space-2);
  transition: margin var(--ac-transition-slow),opacity var(--ac-transition-slow);
  outline: none;
  flex-shrink: 0;
  align-items: center;
  font-weight: 500;
  display: flex;
}

.groupLabel-NTflyg > svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.desktopRoot-Q5fWHs[data-collapsible="icon"] .groupLabel-NTflyg {
  opacity: 0;
  pointer-events: none;
  margin-top: -2rem;
}

.groupAction-nBMg_f {
  aspect-ratio: 1;
  border-radius: var(--ac-radius-md);
  color: var(--ac-sidebar-foreground);
  cursor: pointer;
  transition: background-color var(--ac-transition-fast),color var(--ac-transition-fast);
  background: none;
  border: 0;
  outline: none;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  padding: 0;
  display: flex;
  position: absolute;
  top: .875rem;
  right: .75rem;
}

.groupAction-nBMg_f:focus-visible, .groupAction-nBMg_f:hover {
  background-color: var(--ac-sidebar-accent);
  color: var(--ac-sidebar-accent-foreground);
}

.desktopRoot-Q5fWHs[data-collapsible="icon"] .groupAction-nBMg_f {
  display: none;
}

.groupContent-QTSFGc {
  font-size: var(--ac-text-sm);
  width: 100%;
}

.menu-IIGOfe {
  gap: var(--ac-space-1);
  flex-direction: column;
  width: 100%;
  min-width: 0;
  display: flex;
}

.menuItem-Es_zlt {
  position: relative;
}

.menuButton-stiXwx {
  border-radius: var(--ac-radius-md);
  color: inherit;
  font-size: var(--ac-text-sm);
  align-items: center;
  gap: var(--ac-space-2);
  padding: var(--ac-space-2);
  text-align: left;
  transition: background-color var(--ac-transition-fast),color var(--ac-transition-fast),width var(--ac-transition-slow),height var(--ac-transition-slow),padding var(--ac-transition-slow);
  background: none;
  border: 0;
  outline: none;
  width: 100%;
  display: flex;
  overflow: hidden;
}

.menuButton-stiXwx:active, .menuButton-stiXwx:focus-visible, .menuButton-stiXwx:hover, .menuButton-stiXwx[data-active="true"] {
  background-color: var(--ac-sidebar-accent);
  color: var(--ac-sidebar-accent-foreground);
}

.menuButton-stiXwx[data-active="true"] {
  font-weight: 500;
}

.menuButton-stiXwx:disabled, .menuButton-stiXwx[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

.menuButton-stiXwx > svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.menuButton-stiXwx > span:last-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.menuButtonDefault-MxG3M2 {
  background-color: #0000;
}

.menuButtonOutline-HpgOo9 {
  background-color: var(--ac-background);
  border: 1px solid var(--ac-sidebar-border);
  box-shadow: 0 1px 2px #0000000d;
}

.menuButtonSizeDefault-dfW2vT {
  min-height: 2rem;
}

.menuButtonSizeSm-qIDKpy {
  font-size: var(--ac-text-xs);
  min-height: 1.75rem;
}

.menuButtonSizeLg-pDY27P {
  font-size: var(--ac-text-sm);
  min-height: 3rem;
}

.desktopRoot-Q5fWHs[data-collapsible="icon"] .menuButton-stiXwx {
  min-width: 2rem;
  height: 2rem;
  padding: var(--ac-space-2);
  justify-content: center;
  width: 2rem;
}

.desktopRoot-Q5fWHs[data-collapsible="icon"] .menuAction-zFg0XY, .desktopRoot-Q5fWHs[data-collapsible="icon"] .menuBadge-SrQD7w, .desktopRoot-Q5fWHs[data-collapsible="icon"] .menuButton-stiXwx > span:last-child, .desktopRoot-Q5fWHs[data-collapsible="icon"] .menuSub-C3hpFv {
  display: none;
}

.desktopRoot-Q5fWHs[data-collapsible="icon"] .menuButtonSizeLg-pDY27P {
  padding: 0;
}

.menuAction-zFg0XY {
  aspect-ratio: 1;
  border-radius: var(--ac-radius-md);
  color: inherit;
  cursor: pointer;
  transition: opacity var(--ac-transition-fast),background-color var(--ac-transition-fast),color var(--ac-transition-fast);
  background: none;
  border: 0;
  outline: none;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  padding: 0;
  display: flex;
  position: absolute;
  top: 50%;
  right: .25rem;
  transform: translateY(-50%);
}

.menuAction-zFg0XY:focus-visible, .menuAction-zFg0XY:hover {
  background-color: var(--ac-sidebar-accent);
  color: var(--ac-sidebar-accent-foreground);
}

@media (width >= 768px) {
  .menuActionShowOnHover-Zs9o7y {
    opacity: 0;
  }

  .menuItem-Es_zlt:focus-within .menuActionShowOnHover-Zs9o7y, .menuItem-Es_zlt:hover .menuActionShowOnHover-Zs9o7y {
    opacity: 1;
  }
}

.menuBadge-SrQD7w {
  color: inherit;
  font-size: var(--ac-text-xs);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: .25rem;
  font-weight: 500;
  position: absolute;
  top: 50%;
  right: .25rem;
  transform: translateY(-50%);
}

.menuBadge-SrQD7w, .menuSkeleton-ZWd2HI {
  border-radius: var(--ac-radius-md);
  align-items: center;
  display: flex;
}

.menuSkeleton-ZWd2HI {
  gap: var(--ac-space-2);
  height: 2rem;
  padding-inline: var(--ac-space-2);
}

.menuSkeletonIcon-DM5Jpr {
  border-radius: var(--ac-radius-md);
  width: 1rem;
  height: 1rem;
}

.menuSkeletonText-xxatzQ {
  height: 1rem;
  max-width: var(--ac-skeleton-width);
  width: var(--ac-skeleton-width);
  flex: 1;
}

.menuSub-C3hpFv {
  border-left: 1px solid var(--ac-sidebar-border);
  gap: var(--ac-space-1);
  padding: .125rem 0 .125rem var(--ac-space-3);
  flex-direction: column;
  margin-inline: .875rem;
}

.menuSub-C3hpFv, .menuSubButton-MWU7IE {
  min-width: 0;
  display: flex;
}

.menuSubButton-MWU7IE {
  border-radius: var(--ac-radius-md);
  color: inherit;
  align-items: center;
  gap: var(--ac-space-2);
  height: 1.75rem;
  padding-inline: var(--ac-space-2);
  transition: background-color var(--ac-transition-fast),color var(--ac-transition-fast);
  outline: none;
  text-decoration: none;
}

.menuSubButton-MWU7IE:active, .menuSubButton-MWU7IE:focus-visible, .menuSubButton-MWU7IE:hover, .menuSubButton-MWU7IE[data-active="true"] {
  background-color: var(--ac-sidebar-accent);
  color: var(--ac-sidebar-accent-foreground);
}

.menuSubButton-MWU7IE > svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.menuSubButtonSm-hdlFsN {
  font-size: var(--ac-text-xs);
}

.menuSubButtonMd-Jk1eX5 {
  font-size: var(--ac-text-sm);
}

.srOnly-tsutUB {
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}


/*# sourceMappingURL=sidebar_module.css.map */