Static preheader + sticky panel header

[darthwade]

Hey guys,

I want to thank you for the great job you did with the lib, I love it!
Looking forward to v5 with modular CSS & ssr improvements.

I have a question about layout, maybe you could tell me what proper way of doing such layout (e.g. like yandex lavka has) with SplitLayout & SplitCol?

Screen.Recording.2022-06-06.at.09.30.19.mov

<div class="preheader">...</div>
<div class="header" style="position: sticky; top: 0;">...</div>

Thanks in advance!

[inomdzhon]

Hi, Vadym 👋

Thanks for the kind words 🙏

I tried to write an example based on https://vkcom.github.io/VKUI/#/SplitLayout

Code example

import React from "react";
import {
  ConfigProvider,
  AdaptivityProvider,
  AppRoot,
  View,
  Placeholder,
  Panel,
  PanelHeader,
  Group,
  Button,
  Avatar,
  Cell,
  SplitLayout,
  SplitCol,
  Separator,
  Search
} from "@vkontakte/vkui";
import "@vkontakte/vkui/dist/vkui.css";

const text = new Array(250).fill("Lorem Ipsum");
const panels = ["panel 1", "panel 2"];

function App() {
  const [panel, setPanel] = React.useState(panels[0]);

  return (
    <SplitLayout
      header={
        <PanelHeader separator={false} style={{ zIndex: 100 }}>
          <Search />
        </PanelHeader>
      }
      style={{ justifyContent: "center" }}
    >
      <SplitCol width={280} maxWidth={280}>
        <Panel>
          <PanelHeader />
          <Group>
            {panels.map((i) => (
              <Cell key={i} disabled={i === panel} onClick={() => setPanel(i)}>
                {i}
              </Cell>
            ))}
          </Group>
        </Panel>
      </SplitCol>

      <SplitCol animate={false} spaced width={560} maxWidth={560}>
        <View activePanel={panel}>
          <Panel id={panels[0]}>
            <PanelHeader />
            <Group>
              <Placeholder
                header="Уведомления от сообществ"
                action={<Button size="m">Подключить сообщества</Button>}
              >
                Подключите сообщества, от которых Вы хотите получать уведомления
              </Placeholder>
              <Separator />
              <Placeholder>Введите адрес страницы в поле поиска</Placeholder>
              <Placeholder>{text}</Placeholder>
            </Group>
          </Panel>

          <Panel id={panels[1]}>
            <PanelHeader right={<Avatar size={36} />}>Panel 2</PanelHeader>
            <Group>
              <Placeholder>{text}</Placeholder>
              <Separator />
              <Placeholder
                header="Находите друзей"
                action={<Button size="m">Найти друзей</Button>}
              >
                Здесь будут отображаться люди, которых вы добавите в друзья
              </Placeholder>
            </Group>
          </Panel>
        </View>
      </SplitCol>
    </SplitLayout>
  );
}

export default () => (
  <ConfigProvider platform="android">
    <AdaptivityProvider>
      <AppRoot>
        <App />
      </AppRoot>
    </AdaptivityProvider>
  </ConfigProvider>
);

Hope this helps you.

[darthwade]

Thanks @inomdzhon

And is there a way to add section under the header like here? https://lavka.yandex.ru/213/

I want to achieve the same effect, hide the preheader on a scroll and make the header sticky to the top, in regular CSS it's simple, like:

<div class="preheader">...</div>
<div class="header" style="position: sticky; top: 0;">...</div>

[inomdzhon]

Oh, sorry... I missed this one

Unfortunately, current time no right way to do it, because we use position: fixed for pining headers (see FixedLayout).

Hm, sure you can do this:

Code (it's part of the example that I've wrote above)

const StaticPreHeader = () => (
  <div
    style={{
      position: "relative",
      zIndex: 100,
      width: "100%",
      height: 56,
      backgroundColor: "steelblue"
    }}
  >
    <div
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        textAlign: "center",
        zIndex: 100
      }}
    >
      Preheader
    </div>
  </div>
);

/* ... */

<SplitLayout
  header={
    <React.Fragment>
      <StaticPreHeader />
      <PanelHeader
        separator={false}
        fixed={false} // disabled `position: fixed`
        style={{ position: "sticky", top: "0", zIndex: 100 }}
      >
        <Search />
      </PanelHeader>
    </React.Fragment>
  }
  style={{ justifyContent: "center" }}
>
  ...
</SplitLayout>

Video demo

demo.mov

⚠️ As you see left column not be sticky... if we set fixed to <SplitCol /> of left, we will have bug. You can experiment with it.

---

PS: We want refactor the FixedLayout (see #2674). I think about replace position: fixed to position: sticky 🤔 The VKUI team is currently covering components with vkui-tokens and next focused on v5.0.0. Maybe in v5.0.0 we will refactor FixedLayout.

[darthwade]

Thank you @inomdzhon so much, so will be waiting for v5 ;)