---
title: Header
description: Logo, navigasyon linkleri, arama ve hesap butonları içeren bir header component'i oluşturun.
---

<Callout type="warn" title="Eski altyapı">
Bu sayfa, ikas Studio öncesindeki headless tema altyapısını anlatır. Yeni temalar için [ikas Studio](https://builders.ikas.com/docs/ikas-studio) dokümantasyonunu kullanın.
</Callout>

İşe temamız için bir header component'i oluşturarak başlayalım. Genel olarak bir header; marka logosu ya da adı, bir navigasyon yapısı, arama özelliği ve hesap sayfalarına giden birkaç link içermelidir. Bu özelliklerin sade versiyonlarını oluşturacak, sayfanın sonunda da header'ınızı geliştirmek için neler yapabileceğinizi anlatacağız.

Kaynak kodun tamamı [burada](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/header). Header'ın son hali şöyle görünecek:

![Örnek temadaki header](https://builders.ikas.com/media/ikas-dev/example-theme-header-7501d797ca7bb95e736a53582407b087.png)

## Prop'lar [#props]

Ekran görüntüsündeki sonuca ulaşmak için tema editöründe satıcıdan bazı prop değerleri istememiz gerekiyor. Logo görselinin ve linklerin satıcı tarafından sağlanması gerekiyor.

Bu prop'ları oluştururken editörde [Image](https://builders.ikas.com/docs/headless-theme/prop-types/image) ve [Link List](https://builders.ikas.com/docs/headless-theme/prop-types/link-list) veri tiplerini seçiyoruz. Oluşturulan type şöyle görünür:

```tsx title="src/components/__generated__/types.ts"
export type HeaderProps = {
  logo: IkasImage;
  links?: IkasNavigationLink[];
};
```

Header component'i ise şöyle. Mobil ve masaüstü versiyonlar için ayrı component'ler oluşturduk.

```tsx title="src/components/header/index.ts"
function Header(props: HeaderProps) {
  ...
  if (isMobile) return <MobileHeader {...props} />;
  return <DesktopHeader {...props} />;
}
```

## DesktopHeader [#desktopheader]

Satıcıdan aldığımız görselin ve linklerin nasıl render edildiğini görmek için `DesktopHeader` component'ini inceleyelim. `DesktopHeader`, önce header'ın yerleşimini oluşturur ve onu üç parçaya böler. Ayrıca müşterilerin kendi ülkelerine ait route'a geçebilmesini sağlayan bir **LocalizationBar** alt component'i de içerir.

- **LeftSide** logoyu içerir.
- **Center** linkleri ve arama input'unu içerir.
- **RightSide** hesap sayfalarına giden ikon butonlarını içerir.

```tsx title="src/components/header/desktop/index.ts"
function DesktopHeader(props: HeaderProps) {
  return (
    <>
      {props.showLocalization && <LocalizationBar {...props.localization} />}
      <S.Header>
        <Container>
          <S.InnerContainer>
            <LeftSide {...props} />
            <Center {...props} />
            <RightSide {...props} />
          </S.InnerContainer>
        </Container>
      </S.Header>
    </>
  );
}
```

### LeftSide [#leftside]

Burada satıcıdan aldığımız `logo` değerini render ediyoruz. Bu tür küçük görseller için [Image](https://builders.ikas.com/docs/headless-theme/prop-types/image#image-component-props) component'i yerine basit bir `img` etiketi kullanabilirsiniz.

Elimizdeki `logo` prop'u bir [IkasImage](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-image) instance'ıdır. Bu class'ın `src` ve `thumbnailSrc` olmak üzere iki field'ı vardır. Logo küçük boyutlu olduğu için yüksek çözünürlüğe ihtiyaç duymaz; `thumbnailSrc` düşük çözünürlüklü bir görsel sunduğundan logoyu render etmek için daha iyi bir seçimdir.

```tsx title="src/components/header/desktop/index.ts"
const LeftSide = (props: HeaderProps) => {
  return (
    <S.LeftSide>
      <Link href="/">
        <S.Logo>
          <img src={props.logo.src} />
        </S.Logo>
      </Link>
    </S.LeftSide>
  );
};
```

### Center [#center]

Burada navigasyon linklerini ve bir arama input'unu render ediyoruz.

```tsx title="src/components/header/desktop/index.ts"
const Center = (props: HeaderProps) => {
  return (
    <S.Center>
      <Navigation {...props} />
      <SearchInput {...props} />
    </S.Center>
  );
};
```

Satıcıdan aldığımız `links` prop'u, [IkasNavigationLink](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-navigation-link) tipinde bir dizidir. Navigasyon yapımız tek seviyeli alt linkleri render edebilir. Üst link header çubuğunun üzerinde, alt linkleri ise üst linkin üzerine gelindiğinde açılan bir menüde gösterilir. `Men` linkinin üzerine gelindiğinde görünüm şöyle olur:

![Üzerine gelinen header linkinin açılır menüsü](https://builders.ikas.com/media/ikas-dev/example-theme-hovered-header-link-7e9726cbfdca8eba5b8cb7ece3d2342b.png)

Önce `props.links` dizisi üzerinde map ederek üst linkleri header çubuğuna yerleştiriyoruz. Her öğe, [Link](https://builders.ikas.com/docs/headless-theme/prop-types/link) prop tipinde anlatıldığı gibi linki `Link` component'iyle render eder. Ardından aynı işlemi bu kez `link.subLinks` üzerinde yapıyoruz. Her alt link bir liste öğesi olarak render edilir ve yalnızca üst linkin üzerine gelindiğinde görünür hale gelir.

```tsx title="src/components/header/desktop/index.ts"
const Navigation = (props: HeaderProps) => {
  return (
    <S.Navigation>
      <S.NavigationList>
        {props.links?.map((link, index) => (
          <S.NavigationListItem key={index}>
            <Link href={link.href} passHref>
              {link.label}
            </Link>
            {!!link.subLinks.length && (
              <S.NavigationItemDropdown>
                <S.NavigationItemDropdownList>
                  {link.subLinks.map((subLink, subIndex) => (
                    <S.NavigationItemDropdownListItem key={subIndex}>
                      <Link href={subLink.href} passHref>
                        {subLink.label}
                      </Link>
                    </S.NavigationItemDropdownListItem>
                  ))}
                </S.NavigationItemDropdownList>
              </S.NavigationItemDropdown>
            )}
          </S.NavigationListItem>
        ))}
      </S.NavigationList>
    </S.Navigation>
  );
};
```

### RightSide [#rightside]

`RightSide`, hesap sayfalarına (favoriler ve giriş sayfası) giden iki buton render eder. Bunlara ek olarak sepet sayfasına giden bir sepet butonu da gösterir. Bu buton, sepete [Cart Store](https://builders.ikas.com/docs/headless-theme/api/stores#ikas-cart-store) üzerinden erişerek mevcut sepetteki ürün sayısını da gösterir.

```tsx title="src/components/header/desktop/index.ts"
const RightSide = observer((props: HeaderProps) => {
  const store = useStore();
  const router = useRouter();
  const quantity = store.cartStore.cart?.itemQuantity ?? 0;
  return (
    <S.RightSide>
      <S.FavoriteWrapper>
        <FavoriteSVG />
      </S.FavoriteWrapper>
      <Link href="/account" passHref>
        <S.AccountWrapper as="a">
          <AccountSVG />
        </S.AccountWrapper>
      </Link>
      <S.CartWrapper
        onClick={() => {
          store.cartStore.checkoutUrl && router.push(store.cartStore.checkoutUrl);
        }}
      >
        <S.CartQuantity>{quantity}</S.CartQuantity>
        <CartSVG />
      </S.CartWrapper>
    </S.RightSide>
  );
});
```

### LocalizationBar [#localizationbar]

Bu alt component, müşterilerin kendi ülkelerine özel URL yoluna geçmesini sağlar. ikas satıcıları [Vitrin Lokalizasyonu](https://builders.ikas.com/docs/app-development/dashboard/storefront/localization) sayfasından farklı ülkeler için kurallar oluşturabilir; örneğin belirli ülkeler için fiyatlandırmayı veya temanın dilini değiştirebilirler. Bu kuralların uygulanması için müşterilere kendi ülkelerinin route'una geçmelerini öneren bir çubuk gösteriyoruz.

![Lokalizasyon çubuğu içeren header](https://builders.ikas.com/media/ikas-dev/header-with-locale-bar-b89767bc308cae0883f0c899dd86ce68.png)

Açılır menüdeki seçenekleri render etmek için **useStore** hook'uyla bir [IkasBaseStore](https://builders.ikas.com/docs/headless-theme/api/stores#ikas-base-store) instance'ı alıyoruz. Bu özelliği sağlamak için class'ın şu field ve fonksiyonlarını kullanıyoruz:

- **showLocaleOptions**: Çubuğun gösterilip gösterilmeyeceğine karar verir. Müşteri zaten kendi ülkesine ait doğru yoldaysa çubuğu göstermeye gerek yoktur.
- **localeOptions**: Açılır menüdeki seçenekleri render etmek için kullanılır. Bu field, [IkasLocaleOption](https://builders.ikas.com/docs/headless-theme/api/storefront-and-settings#ikas-locale-option) tipinde bir dizidir.
- **setLocalization**: Seçimi yapar ve müşteriyi doğru route'a yönlendirir.

Çubuğun tüm mantığını görmek için [useLocalization](https://github.com/ikascom/ikas-examples/blob/main/ikas-theme/src/components/header/components/localization-bar/useLocalization.tsx) hook'una göz atın.

## Geliştirmeler [#improvements]

Örnek header'ımız oldukça basit. Sizin header'larınızın tasarımı ise çok daha fazla özellik barındırabilir. Header'larınızı geliştirmek için yapabileceğiniz birkaç şey:

- Header linklerinin yerleşimini değiştirmek için bir `Position` prop'u isteyin.
- Arama input'unun, sağ taraftaki üç butonun vb. görünürlüğünü açıp kapatmak için birkaç boolean prop isteyin.
- Ana linklerin yanında bir görsel gösterebilmek için [Image](https://builders.ikas.com/docs/headless-theme/prop-types/image) ve [Link List](https://builders.ikas.com/docs/headless-theme/prop-types/link-list) tiplerini birleştiren bir [Custom Data](https://builders.ikas.com/docs/headless-theme/prop-types/custom-data) oluşturun. Örneğin bilgisayar parçası satan bir satıcı, her ana kategori linki için bir görsel göstermek isteyebilir.
- Arama sayfasına yönlendirmek yerine sonuçları doğrudan header içinde göstermek için `Search` tipinde bir [Product List](https://builders.ikas.com/docs/headless-theme/prop-types/product-list) prop'u isteyin.