Arkadaşlar selam, React projemde Tailwind CSS kullanarak bir responsive menü yapmaya çalışıyorum. Menüyü mobilde hamburger ikonuyla açıp kapatıyorum, her şey güzel çalışıyor. Ama bir sorun var ki can sıkıcı: Menü açıkken sayfada scroll yapabiliyorum. Yani menü içindeki linkler arasında gezinirken parmağımı kaydırdığımda arka plandaki içerik de kayıyor. Menü açıkken arka planın sabit kalmasını, sadece menü içindeki içeriğin scroll olmasını istiyorum. Overflow-hidden classını body'e ekleyip çıkarmayı denedim, hatta useEffect ile state'e bağladım ama tam istediğim gibi olmuyor. Bazen menü kapanınca scroll çalışmıyor, bazen de açıkken sayfa hala kayıyor. Acaba Tailwind'de bu işi halletmenin daha pratik bir yolu var mı? Yoksa direk JavaScript ile mi kontrol etmeliyim?
Bir de şu durum var: Menü sayfa boyunca açılıyor, yani full screen bir mobil menü yapmadım. Sadece ekranın sol tarafından gelen, 300px genişliğinde bir sidebar menüm var. Bu menü açıkken, içerikte scroll oluyor ama menünün dışındaki alana tıkladığımda menü kapanıyor. Overlay ekledim, overlay'e tıklayınca menü kapanıyor. Ama scroll sorunu hala devam ediyor. overflow-hidden'ı sadece overlay'e değil de body'e eklemem gerekiyor sanırım, ama o zaman da menü içindeki scroll da gidiyor. Yani menü içindeki linkler uzunsa onları da göremiyorum. Burada bir trade-off var gibi. Sizce bu durumda ne yapmalıyım? Menü içindeki içeriğin scroll olmasını sağlarken arka planı nasıl sabitlerim?
Son olarak, bu sorunu çözmek için "useLockedBody" gibi custom hooklar gördüm. Acaba bu tarz bir hook kullanmak daha mı sağlıklı olur? Yoksa direk CSS ile halledebileceğim bir yöntem var mı? Deneyimli arkadaşlar varsa, özellikle büyük projelerde nasıl bir yol izliyorsunuz? Ben genelde mobil menülerde position:fixed ve overflow:auto kombinasyonunu kullanıyordum ama Tailwind'de bunu class bazında yönetmek biraz kafa karıştırıcı geldi. Fikirlerinizi ve çözüm önerilerinizi merak ediyorum.
Bir de şu durum var: Menü sayfa boyunca açılıyor, yani full screen bir mobil menü yapmadım. Sadece ekranın sol tarafından gelen, 300px genişliğinde bir sidebar menüm var. Bu menü açıkken, içerikte scroll oluyor ama menünün dışındaki alana tıkladığımda menü kapanıyor. Overlay ekledim, overlay'e tıklayınca menü kapanıyor. Ama scroll sorunu hala devam ediyor. overflow-hidden'ı sadece overlay'e değil de body'e eklemem gerekiyor sanırım, ama o zaman da menü içindeki scroll da gidiyor. Yani menü içindeki linkler uzunsa onları da göremiyorum. Burada bir trade-off var gibi. Sizce bu durumda ne yapmalıyım? Menü içindeki içeriğin scroll olmasını sağlarken arka planı nasıl sabitlerim?
Son olarak, bu sorunu çözmek için "useLockedBody" gibi custom hooklar gördüm. Acaba bu tarz bir hook kullanmak daha mı sağlıklı olur? Yoksa direk CSS ile halledebileceğim bir yöntem var mı? Deneyimli arkadaşlar varsa, özellikle büyük projelerde nasıl bir yol izliyorsunuz? Ben genelde mobil menülerde position:fixed ve overflow:auto kombinasyonunu kullanıyordum ama Tailwind'de bunu class bazında yönetmek biraz kafa karıştırıcı geldi. Fikirlerinizi ve çözüm önerilerinizi merak ediyorum.