Photo by Amy Humphries on Unsplash

React ile Admin Tool Geliştirelim — Navigasyon Menüsü

React UI Mekanikleri konusunda önceki yazı serisini içerikleri kapsayacak bir senaryo geliştirmeye karar verdim. Bu konuda bir eTicaret sitesinin yönetiminde kullanılacak bir araç tasarlamaya çalışacağız.

Admin Tool ilgili aşağıdaki önceki yazılarda Login, CRUD ve Pagination mekanizmalarına bakmıştık.

Sonrasında Table işlevlerini biraz daha geliştirerek bu Tabloda arama, sıralama ve çoklu satır seçerek aksiyon gerçekleştirme işlemlerine bakmıştık.

Bu yazımızda Sol kısma bir SideBar ekleyerek iç sayfalar arası navigasyonu nasıl yapabileceğimizi işleyeceğiz.

Bu kısım aslında 2 yapıdan oluşuyor. Bir ekranın bir sağından, solundan, üstünden veya altından çıkan Layout kısmı , birde bunun içerisindeki Menu kısmı.

Bunun için Farklı farklı Styling ve Bileşen Kütüphanelerinin hazır yapıları bulunuyor.

Biz Material UI üzerinden devam ediyoruz. İlk işimiz ekranında sağ köşesinde bir SideBar menu oluşturmak.

Admin Tool — Sidebar

Bunun için Material UI React Drawer bileşenini ve ListItem yapısını kullanacağız. Bir Drawer bileşenini alıp ekranın sağ kısmını yerleştirip bunun içerisine bir Admin Page ListItem ve düğmesi oluşturuyoruz.

Right Sidebar Yapısını Oluşturalım.

Şimdi bu ekranın üzerine mouse ile geldiğimizde Hover ettiğimizde ekran genişlesin ve Icon ve yazı ile ilgili kısmıda göstersin istiyoruz. Bu açılma işlemini mouse ile ilgili alanın üzerine gelince dinleyip class olarak yukarıdaki yapıyı destekleyecek şekilde de verebilirsiniz. Veya benim aşağıda yaptığım gibi CSS ile &:hover durumunu yazarak bu işlemi hiç JS kullanmadan da gerçekleştirebilirsiniz.

Şimdi daha önceden tanımlamış olduğumuz Logout düğmesini ekranın sağ kısmındaki side-menu ye taşıyalım.

Move Logout Button

Bunun için yapmamız gereken bir ListMenu Item eklemek. SideMenu artık Router ile etkileşimi gireceği için onu SideMenuContainer içerisinden kullanır hale getirmek. ve Logout mantığını SideMenu içerisine aktarmak. Aşağıdaki görselde bu işlemleri nasıl yaptığımı görebilirsiniz.

SideMenu ve SideMenuContainer Yapısı

Şimdi geldi işin zevkli kısmına burada deneysel olarak bazı boş sayfalar oluşturacağım. Bu sayfaları sağ kısımdaki menulerin yönlendirmelerinin nasıl çalıştığını anlatmak için oluşturuyor olacağım. Sonra ihtiyacımıza göre bu sayfaları gerçekleri ile değiştiririz.

Bu kısımda Dummy Page oluşturup, Dummy sayfalara baktığımızda ilgili sayfalara gidilmesini sağlacak altyapı aşağıdaki gibidir. Tabi bu değişiklikler için

  • DummyPage, DummyPageContainer ve routes.js güncellenmeside gerekmektedir.
Dummy Sayfaları Ekledik.
  • Burda görsel açıdan .list-text eklememin sebebi hover öncesi bunların da display:none ile gizlenmesi bu sayede ekranda mouse ile üzerine gelince flickleme olmayacak sadece :hover modunda display:block ile metinlerin gösterilmesi yeterli.

Bir diğer konuda bazı düğmelerin örneğin Logout gibi, diğer düğmelerden ayrı ekranın altında dizilebilmesidir. Bu hem görsel hemde kullanım alışkanlığı olarak birçok uygulamada bu şekildedir.

Bunun için düğme grubunu 2 ye ayırıp parent container styling vermeniz yeterli.

height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
Basic Menuler ile Logout Menusünün ayrılması

Sidebarlar ekranın sağ kısmında olduğu için yapmamız gereken bir page-layout mekanizması kurmak. Bunun için ortak bir styling yapıp tüm sayfaların bu style import etmesini ve DOM yapısının bu sayfa düzenine uygun olmasını gerçekleştireceğiz. Aşağıdaki resimdeki yapıyı incelerseniz bileşen içerisinden Metarial UI Drawer anchor=left yaptıktan sonra sayfa düzeninde de aşağıdaki şekilde güncelleme yaptım.

Move Sidebar to Left Part…

Bunun için yapmamız gereken URL path alıp, bunu ListItem path ile karşılaştırıp eğer , birbiriyle eşleşiyorsa bu değeri ListItem selected hale getirmek için kullanmamız gerekiyor

SideMenu MenuIcon ve Metnini Selected Hale getirmek

Bunu sağlayacak yapı ise aşağıdaki fonksiyon ile sağlıyoruz.

isSideMenuSelected = (expectedPath) => {
const result = this.props.match.path === expectedPath;
return result;
}

GitHub Kod Örneği

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store