Header

import { Header, HeaderCart, HeaderLogin } from 'components/header'
import { MobileHeader, HeaderSearch } from "components/header/mobile-header";
import { SearchInput, SearchInputWithCategory } from 'components/search-box'
// CUSTOM DATA MODEL
import LayoutModel from "models/Layout.model";
 
// Example 1
export default function Example1({ header, mobileNavigation }: LayoutModel) {
  const MOBILE_VERSION_HEADER = (
    <MobileHeader>
      <MobileHeader.Left>
        <MobileMenu navigation={header.navigation} />
      </MobileHeader.Left>
 
      <MobileHeader.Logo logoUrl={mobileNavigation.logo} />
 
      <MobileHeader.Right>
        <HeaderSearch>
          <SearchInput />
        </HeaderSearch>
 
        <HeaderLogin />
        <HeaderCart />
      </MobileHeader.Right>
    </MobileHeader>
  );
 
  return (
    <Header mobileHeader={MOBILE_VERSION_HEADER}>
      <Header.Logo url={header.logo} />
 
      <Header.Mid>
        <SearchInputWithCategory categories={header.categories} />
      </Header.Mid>
 
      <Header.Right>
        <HeaderLogin />
        <HeaderCart />
      </Header.Right>
    </Header>
  )
}

import Sticky from "components/sticky";
import { Header, HeaderCart, HeaderLogin } from 'components/header'
import { MobileHeader, HeaderSearch } from "components/header/mobile-header";
import { SearchInput, SearchInputWithCategory } from 'components/search-box'
// CUSTOM DATA MODEL
import LayoutModel from "models/Layout.model";
 
// Example 2
export default function Example2({ header, mobileNavigation, centeredNavigation }: LayoutModel) {
  const MOBILE_VERSION_HEADER = (
    <MobileHeader>
      <MobileHeader.Left>
        <MobileMenu navigation={header.navigation} />
      </MobileHeader.Left>
 
      <MobileHeader.Logo logoUrl={mobileNavigation.logo} />
 
      <MobileHeader.Right>
        <HeaderSearch>
          <SearchInput />
        </HeaderSearch>
 
        <HeaderLogin />
        <HeaderCart />
      </MobileHeader.Right>
    </MobileHeader>
  );
 
  return (
      <Sticky fixedOn={0} scrollDistance={300}>
        <Header mobileHeader={MOBILE_VERSION_HEADER}>
          <Header.Logo url={header.logo} />
 
          <Header.Mid>
            <Box mr="auto" ml={centeredNavigation ? "auto" : "2rem"}>
              <NavigationList navigation={header.navigation} />
            </Box>
          </Header.Mid>
 
          <Header.Right>
            <HeaderLogin />
            <HeaderCart />
          </Header.Right>
        </Header>
 
        <Divider />
      </Sticky>
  )
}

import { useState } from "react";
import Sticky from "components/sticky";
import { CategoryList } from "components/categories";
import { Header, HeaderCart, HeaderLogin } from 'components/header'
import { MobileHeader, HeaderSearch } from "components/header/mobile-header";
import { SearchInput, SearchInputWithCategory } from 'components/search-box'
// CUSTOM DATA MODEL
import LayoutModel from "models/Layout.model";
 
// Example 3
export default function Example3({ header, mobileNavigation, centeredNavigation }: LayoutModel) {
  const [isFixed, setIsFixed] = useState(false);
  const toggleIsFixed = useCallback((fixed: boolean) => setIsFixed(fixed), []);
 
  const MOBILE_VERSION_HEADER = (
    <MobileHeader>
      <MobileHeader.Left>
        <MobileMenu navigation={header.navigation} />
      </MobileHeader.Left>
 
      <MobileHeader.Logo logoUrl={mobileNavigation.logo} />
 
      <MobileHeader.Right>
        <HeaderSearch>
          <SearchInput />
        </HeaderSearch>
 
        <HeaderLogin />
        <HeaderCart />
      </MobileHeader.Right>
    </MobileHeader>
  );
 
  return (
      <Sticky fixedOn={0} onSticky={toggleIsFixed} scrollDistance={70}>
        <Header mobileHeader={MOBILE_VERSION_HEADER}>
          <Header.Logo url={header.logo} />
 
          {isFixed ? (
            <Header.CategoryDropdown>
              <CategoryList categories={header.categoryMenus} />
            </Header.CategoryDropdown>
          ) : null}
 
          <Header.Mid>
            <SearchInput />
          </Header.Mid>
 
          <Header.Right>
            <HeaderLogin />
            <HeaderCart />
          </Header.Right>
        </Header>
 
        <Divider />
      </Sticky>
  )
}