shadcn ui sidebar

Shadcn/UI -боковая панель ·

Потрясающая и функциональная убирающаяся боковая панель для следующей.

Функции

• Выдвижной мини -и широкая боковая панель
• Прокручиваемое меню боковой панели
• Листовое меню для мобильного
• Сгруппированное меню с ярлыками
• Складной подменю
• Список предметов извлечения меню

Используется технология/фреймворк

• Next.js 14
• Shadcn/ui
• Tailwind CSS
• Машинопись
• Zustand

Установка

Пользовательский реестр

Если вы используете @shadcn/UI 2.0.0 или более позднее, вы можете установить компонент непосредственно из реестра.

npx shadcn@latest add https://raw.githubusercontent.com/salimi-my/shadcn-ui-sidebar/refs/heads/master/public/registry/shadcn-sidebar.json

or

npx shadcn@latest add https://shadcn-ui-sidebar.salimi.my/registry/shadcn-sidebar.json

Пример использования для NextJs

 //layout.tsx
import AdminPanelLayout from "@/components/admin-panel/admin-panel-layout" ;

export default async function Layout ( {
  children ,
} : Readonly < {
  children : React . ReactNode ;
} > ) {
  return < AdminPanelLayout > { children } </ AdminPanelLayout > ;
}

//page.tsx
import { ContentLayout } from "@/components/admin-panel/content-layout" ;

export default function Page ( ) {
  return (
    < ContentLayout title = "Test" >
      < div > Test </ div >
    </ ContentLayout >
  ) ;
} 

Запуск проекта локально

1. Клонировать репозиторий

   git clone https://github.com/salimi-my/shadcn-ui-sidebar

2. Установить зависимости

    cd shadcn-ui-sidebar
   npm install

3. Запустите сервер разработки

   npm run dev

Демо

Приложение размещено на Vercel. Нажмите здесь, чтобы посетить.
Прямая демонстрационная ссылка: https://shadcn-ui-sidebar.salimi.my

Скриншоты

Легкий режим

Темный режим

Мини -боковая панель

Листовое меню