https://neobrutalism.com/he/blocks/sidebar/collapsible-dashboard-sidebar
סיידבר מתקפל
סרגל צד · Pro source
סיידבר אפליקציה שעושה שלוש עבודות בבת אחת: פאנל מלא של 256px בדסקטופ, רצועת אייקונים של 64px כשמקפלים אותו, ומגירת off-canvas בנייד עם רקע מעומעם. הוא נושא שורת מותג, בלוק פרופיל עם תג תפקיד, שישה קישורי ניווט עם מונה לא-נקרא, ופעולת התנתקות מקובעת לתחתית. קיפול מסתיר את התוויות חזותית אבל שומר אותן לקוראי מסך, כך שהרצועה אף פעם לא הופכת לשורת אייקונים ללא שם.
סרגל צד
סיידבר מתקפלפתחו תצוגה מקדימה בזמן אמת
- Hero, תמחור ו-auth
- תצוגה מקדימה של כל נקודת עצירה
- העתק את הקוד המקור
- MCP מוכן להתקנה
- Radix · Base UI · React Aria
- 158 בלוקים מוכנים
- קטעי עמוד שנשלחים
- לוחות מחוונים ושיווק
- Pro מפעיל את הקוד
- פריסות פתוחות
אהובה על מפתחים, מעצבים
ויוצרים
נתקלתי בערכת ה-UI שלך ולקחתי אותה מיד. חדשה, מתוחזקת באופן פעיל ומשתפרת כל הזמן — עבודה מדהימה! 🤘
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 שלא נראית כמו כל השאר. הבלוקים הניאו-ברוטליסטיים 🔥 האיצו פרוטוטייפים של לייאאוטים מוזרים.
Nitesh Padghan, כותב צללים עיצוב דף נחיתה יפהפה עם איזון וזרימה מושלמים. פלטת הצבעים בשילוב האנימציות יוצרת חוויית משתמש יוצאת דופן.
Alan Obeng-Peprah, Senior Designer @ NativeXAI אני באמת מתרשם מהעיצוב שהם סיפקו. המוצר הסופי תאם בדיוק את מה שדמיינתי.
Desmond, מייסד-שותף @ VectorlabsVentures כבעל סוכנות, בדרך כלל אני מבלה שבועות בליטוש לייאאוטים של דפי נחיתה ללקוחות. עם Neobrutalism.com אני מחבר תבנית, מתאים את הטקסט ומוכן לשיפ.
Duke Opoku Amankwah, מייסד @ Midas התבניות לא רק מדהימות ויזואלית — הן גם בנויות מצוין. חסכו לנו שבועות של פיתוח.
Abiola Braimah, מפתח @ Studio IX איכות יוצאת דופן ותשומת לב לפרטים. העיצוב הרספונסיבי עובד חלק על כל המכשירים.
Acromond X., מייסד-שותף @ VectorlabsVentures שילוב התבניות האלה בזרימת העבודה קיצר משמעותית את מחזור הפיתוח. עבודה מצוינת.
Raquib S., מפתח Backend התבניות האלה הפכו למשאב ה-go-to שלנו. הקוד נקי, מתועד היטב וקל להתאמה.
Hallic M., מפתח @ AtlasLabs תבניות Neobrutalism.com מוצאות את האיזון המושלם בין אסתטיקה לפונקציונליות. משנות משחק אמיתיות לפרויקטים שלנו.
Ibrahim S., Frontend Lead @ ScaleUp תמיכה יוצאת דופן ותבניות באיכות פרימיום. ה-ROI על התבניות האלה פנומנלי.
Kevin K., CEO @ WebCraft תבניות Neobrutalism.com שינו לגמרי איך אנחנו ניגשים לפרויקטי לקוחות חדשים. איכות הקוד יוצאת דופן והעיצובים באמת ברמה עולמית.
Danny G., מייסד DevStack השתמשתי בהרבה ספריות תבניות, אבל Neobrutalism.com בולט בתשומת הלב לאופטימיזציית ביצועים ולארכיטקטורת קוד נקייה.
Ian D., CTO ב-Wavelength האנימציות והמיקרו-אינטראקציות בתבניות האלה פשוט מדהימות. ההשקעה הכי טובה לצוות העיצוב שלנו.
Ben S., Lead Designer ב-PixelPerfect כמייסד לא-טכני, תבניות Neobrutalism.com עזרו לנו להשיק MVP בזמן שיא בלי להתפשר על איכות העיצוב. המשקיעים שלנו התרשמו מאוד.
Matthew I., מייסד סטארטאפ אני מעריך כמה המודולים האלה מודולריים ומתועדים היטב. הצלחנו לערבב חלקים מתבניות שונות בלי חיכוך.
Garrett P., Frontend Lead ב-TechFusion ה-ROI על תבניות Neobrutalism.com מדהים. קיצרנו דרמטית את זמן הפיתוח תוך אספקת אתרים באיכות גבוהה יותר ללקוחות.
Xavier C., בעל סוכנות
שואלים
לעתים קרובות
כיצד בנויה בלוק סיידבר מתקפל, מה תוכלו לשנות, ואיזה שימוש לעשות בו במקום בפריסות האחרות כאן.
אפליקציה. הוא מניח משתמש מחובר, נתיב נוכחי, ומעטפת קבועה סביב תוכן העמוד שלכם — ולכן יש לו בלוק פרופיל ופעולת התנתקות במקום לוגו וכפתור הרשמה. לאתר ציבורי השתמשו בקטגוריית ה-navbar במקום: בלוקי ה-top-nav אופקיים, בלי מצב חשבון, ובנויים לכותרת ולא למעטפת. זהו בלוק הסיידבר היחיד, אז אין וריאנט צר או רחב יותר להשוות אליו.
היא עוברת מ-w-64 ל-w-16 וכל תווית טקסט הופכת ל-sr-only במקום להימחק, כך שלאייקונים עדיין יש שמות נגישים ולכל שורה יש attribute של title לטולטיפ בריחוף. הפרופיל שומר את האווטאר ומסתיר את השם והתפקיד מאחורי שורה מוסתרת חזותית. תג הלא-נקרא ב-Notifications מוחלף בביטוי מוסתר 3 unread, כי badge מספרי שמתכווץ לתוך רצועה של 64px מפסיק להיות קריא.
שנו את קבוע activeHref בראש הקובץ, או באפליקציית Next.js החליפו אותו ב-const activeHref = usePathname(). לשורה התואמת יש aria-current מוגדר ל-page וגם את המילוי הצהוב, כך שהמצב מוכרז ולא רק מוצג — צבע לבד היה משאיר אותו בלתי-נראה לקורא מסך ולמי שלא יכול להבחין בו. לשורה יש גם border גלוי, שהוא רמז שני שאינו צבע.
הכול מגיע ממערך navItems: כל רשומה היא id, תווית, רכיב אייקון lucide, href, ומונה אופציונלי. סידור מחדש של המערך מסדר מחדש את הסיידבר, והוספת מונה לכל רשומה מציגה את התג בשורה ההיא. בערך שמונה רשומות זה הגבול המעשי לפני שהרשימה צריכה גלילה משלה — ה-nav כבר flex-1 עם overflow-y-auto, כך שהוא נגלל במקום לדחוף את שורת ההתנתקות מחוץ לתחתית.
כי div עם handler של onClick לא ניתן להגעה במקלדת, אז ב-viewport בגודל טלפון המגירה הייתה יכולה להיפתח ולעולם לא להיסגר בלי עכבר. הרקע הוא button אמיתי עם aria-label Close menu, וגם Escape סוגר את המגירה. ה-toggle עצמו נושא aria-expanded ו-aria-controls שמצביעים ל-id של הסיידבר, כך שהמצב שלו חשוף ולא רק משתמע מהחלפת האייקון.
החלקה החוצה עם -translate-x-full מזיזה אותה מחוץ למסך אבל משאירה כל קישור בסדר ה-tab, כך שמשתמש מקלדת בנייד עובר על שישה יעדים בלתי-נראים לפני שהוא מגיע לעמוד. הוספת max-md:invisible מוציאה אותה מסדר ה-tab מתחת ל-breakpoint md תוך שמירה על ההחלקה, כי visibility עובר בסוף האנימציה ביציאה ומיד בכניסה. מעל md המגירה תמיד גלויה, כך שהמחלקה אף פעם לא חלה.