https://neobrutalism.com/fa/blocks/sidebar/collapsible-dashboard-sidebar
سایدبار جمعشونده
نوار کناری · Pro source
سایدبار اپلیکیشنی که همزمان سه کار میکند: یک پنل کامل ۲۵۶ پیکسلی روی دسکتاپ، یک ریل آیکونی ۶۴ پیکسلی وقتی جمعش میکنید، و یک کشوی کناری روی موبایل با پسزمینهٔ کمنور. یک ردیف برند، یک بلوک پروفایل با نشان نقش، شش ورودی ناوبری با شمارندهٔ خواندهنشده، و یک اقدام خروج سنجاقشده به پایین را حمل میکند. جمعشدن، برچسبها را از نظر بصری پنهان میکند اما آنها را برای صفحهخوانها نگه میدارد، پس ریل هرگز به ردیفی از آیکونهای بینام تبدیل نمیشود. هر رنگ یک توکن تم است، پس بدون هیچ ویرایشی در حالت روشن و تاریک از پالت شما پیروی میکند.
نوار کناری
سایدبار جمعشوندهباز کردن پیشنمایش زنده
- Hero، قیمتگذاری و auth
- پیشنمایش هر نقطه شکست
- منبع را کپی کنید
- MCP آماده نصب
- Radix · Base UI · React Aria
- 158 بلوکهای آماده
- بخشهای صفحهای که ارسال میشوند
- داشبوردها و بازاریابی
- Pro کد را باز میکند
- چیدمانهای آماده
محبوبِ توسعهدهندگان، طراحان
و سازندگان
اتفاقی به UI kit شما برخوردم و بیدرنگ برش داشتم. نو است، فعالانه نگهداری میشود و مدام بهتر میشود — کار فوقالعاده! 🤘
Ziv Reich, توسعهدهندهٔ نرمافزار فقط خواستم بگویم: کارِ عالی روی neobrutalism.com. واقعاً دوستش دارم. من در طراحی افتضاحم، برای همین این یک نجات بود. توی سایت شخصیام استفادهاش کردم.
Paul Bratslavsky, سازندهٔ Coding With Paul بالاخره سایت شخصیام را با Neobrutalism.com از نو ساختم — کتابخانهٔ سرگرمکننده و شروعش خیلی آسان!
Cameron Blackwood, سازندهٔ محتوا Neobrutalism.com یکی از کتابخانههای محبوبم برای کامپوننتهای UI با سبک رترو است — کامپوننتهایی که واقعاً میشود ship کرد.
Zhengyang Hou, هکر مستقل یکی از کتابخانههای ui محبوبم برای وب. کارِ عالی — امیدوارم خیلی جلوتر برود.
Taseen Tanvir, بنیانگذار و طراح Neobrutalism.com Pro را امتحان کردم — UI kit که شبیه بقیه نیست. بلاکهای نئوبروتالیستی 🔥 پروتوتایپ چیدمانهای عجیب را خیلی سریعتر کردند.
Nitesh Padghan, نویسندهٔ سایه طراحی لندینگپیج زیبا با تعادل و جریان کامل. پالت رنگی همراه با انیمیشنها تجربهٔ کاربری استثنایی میسازد.
Alan Obeng-Peprah, طراح ارشد @ NativeXAI از طراحیای که تحویل دادند واقعاً تحتتأثیرم. محصول نهایی دقیقاً همان چیزی بود که تصور میکردم.
Desmond, همبنیانگذار @ VectorlabsVentures بهعنوان صاحب آژانس معمولاً هفتهها صرف پالایش لیاوت لندینگ مشتریها میکنم. با Neobrutalism.com قالب را میگذارم، کپی را تنظیم میکنم و آمادهام برای انتشار.
Duke Opoku Amankwah, بنیانگذار @ Midas قالبها فقط از نظر بصری خیرهکننده نیستند؛ ساختارشان هم فوقالعاده است. هفتهها زمان توسعه برایمان صرفهجویی کرد.
Abiola Braimah, توسعهدهنده @ Studio IX کیفیت برجسته و دقت در جزئیات. طراحی واکنشگرا روی همهٔ دستگاهها بینقص کار میکند.
Acromond X., همبنیانگذار @ VectorlabsVentures یکپارچهسازی این قالبها در گردشکارمان چرخهٔ توسعه را بهطور چشمگیری کوتاه کرد. کار عالی.
Raquib S., توسعهدهندهٔ بکاند این قالبها منبع اصلی ما شدهاند. کد تمیز، مستندسازیشده و بهراحتی قابل شخصیسازی است.
Hallic M., توسعهدهنده @ AtlasLabs قالبهای Neobrutalism.com تعادل کامل بین زیبایی و کارکرد را برقرار میکنند. واقعاً نقطهٔ عطفی برای پروژههای ما.
Ibrahim S., لید فرانتاند @ ScaleUp پشتیبانی عالی و قالبهای باکیفیت premium. ROI این قالبها شگفتانگیز است.
Kevin K., CEO @ WebCraft قالبهای Neobrutalism.com کاملاً رویکرد ما به پروژههای مشتری را عوض کردند. کیفیت کد استثنایی است و طراحیها واقعاً در سطح جهانیاند.
Danny G., بنیانگذار DevStack کتابخانههای قالب زیادی استفاده کردهام، اما Neobrutalism.com بهخاطر توجه به بهینهسازی عملکرد و معماری کد تمیز متمایز است.
Ian D., CTO در Wavelength انیمیشنها و ریزتعاملهای این قالبها مطلقاً خیرهکنندهاند. بهترین سرمایهگذاری برای تیم طراحی ما.
Ben S., لید دیزاینر در PixelPerfect بهعنوان بنیانگذار غیرفنی، قالبهای Neobrutalism.com کمک کردند MVP را در زمانی رکوردی بدون قربانیکردن کیفیت طراحی لانچ کنیم. سرمایهگذارانمان شگفتزده شدند.
Matthew I., بنیانگذار استارتاپ از ماژولار بودن و مستندسازی خوب این کامپوننتها قدردانی میکنم. توانستیم تکههایی از قالبهای مختلف را بیاصطکاک ترکیب کنیم.
Garrett P., لید فرانتاند در TechFusion ROI قالبهای Neobrutalism.com باورنکردنی است. زمان توسعه را بهشدت کم کردیم و همزمان سایتهای باکیفیتتری به مشتریها تحویل میدهیم.
Xavier C., صاحب آژانس
سؤالات
پرتکرار
نحوهٔ ساختٔ بلاک سایدبار جمعشونده، آنچه میتوانید تغییر دهید، و زمانی که آن را به جای سایر چیدمانها در اینجا استفاده کنید.
یک اپ. فرض میکند کاربری وارد شده، مسیری جاری وجود دارد و پوستهای پایدار دور محتوای صفحهٔ شماست — و به همین دلیل بهجای لوگو و دکمهٔ ثبتنام، بلوک پروفایل و اقدام خروج دارد. برای یک سایت عمومی بهجایش دستهٔ navbar را بردارید: بلاکهای ناوبری بالا افقیاند، وضعیت حساب ندارند و برای یک هدر ساخته شدهاند نه یک پوسته. این تنها بلاک سایدبار است، پس نسخهٔ باریکتر یا عریضتری برای مقایسه وجود ندارد.
از w-64 به w-16 میرود و هر برچسب متنی بهجای حذفشدن sr-only میشود، پس آیکونها همچنان نام قابلدسترس دارند و هر ردیف یک ویژگی title برای تولتیپ هاور نگه میدارد. پروفایل آواتار را نگه میدارد و نام و نقش را پشت خطی پنهانشده از دید میبرد. نشان خواندهنشده روی Notifications با عبارت پنهان «۳ خواندهنشده» جایگزین میشود، چون نشانی عددی که در ریل ۶۴ پیکسلی کوچک شود دیگر خوانا نیست.
ثابت activeHref را در بالای فایل عوض کنید، یا در یک اپ Next.js آن را با const activeHref = usePathname() جایگزین کنید. ردیف منطبق علاوه بر پرشدگی زرد، aria-current برابر page میگیرد، پس وضعیت اعلام میشود نه اینکه فقط نشان داده شود — رنگ بهتنهایی آن را برای یک صفحهخوان و برای هرکسی که تشخیصش نمیدهد نامرئی میگذاشت. آن ردیف یک حاشیهٔ دیدنی هم میگیرد، که سرنخ دوم و غیررنگی است.
همهچیز از آرایهٔ navItems میآید: هر ورودی یک id، یک برچسب، یک کامپوننت آیکون lucide، یک href و یک count اختیاری است. بازچینش آرایه سایدبار را بازچینش میکند، و افزودن count به هر ورودی نشان را روی همان ردیف رندر میکند. حدود هشت ورودی سقف عملی است پیش از آنکه فهرست به اسکرول خودش نیاز پیدا کند — nav از قبل flex-1 با overflow-y-auto است، پس بهجای هلدادن ردیف خروج به بیرون، اسکرول میشود.
چون یک div با هندلر onClick با صفحهکلید قابلدسترسی نیست، پس در ویوپورتی به اندازهٔ یک تلفن، کشو میتوانست باز شود و بدون ماوس هرگز بسته نشود. پسزمینه یک button واقعی با aria-label برابر Close menu است، و Escape هم کشو را میبندد. خود دکمهٔ تغییر وضعیت aria-expanded و aria-controls را حمل میکند که به id سایدبار اشاره دارد، پس وضعیتش آشکار میشود نه اینکه از تعویض آیکون فهمیده شود.
لغزاندنش با -translate-x-full آن را از صفحه بیرون میبرد اما همهٔ لینکها در ترتیب Tab میمانند، پس کاربر صفحهکلید روی موبایل پیش از رسیدن به صفحه از شش مقصد نامرئی رد میشود. افزودن max-md:invisible آن را زیر بریکپوینت md از ترتیب Tab بیرون میبرد و لغزش را نگه میدارد، چون visibility هنگام رفتن در پایان انیمیشن و هنگام آمدن بلافاصله ترنزیشن میکند. بالای md کشو همیشه دیدنی است، پس آن کلاس هرگز اعمال نمیشود.