Navbar React 組件

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Link,
  Block,
  BlockTitle,
  BlockHeader,
  List,
  ListItem,
  Radio,
  Toggle,
} from 'konsta/react';

export default function NavbarPage() {
  const [size, setSize] = useState('Default');
  const [isTransparent, setIsTransparent] = useState(false);
  return (
    <Page>
      <Navbar
        title="Navbar"
        subtitle="Subtitle"
        className="top-0 sticky"
        medium={size === 'Medium'}
        large={size === 'Large'}
        transparent={isTransparent}
        right={<Link navbar>Right</Link>}
      />
      <div className="relative">
        <Block strong inset>
          <p>
            Navbar is a fixed area at the top of a screen that contains Page
            title and navigation elements.
          </p>
        </Block>

        <BlockTitle>Size</BlockTitle>
        <BlockHeader>
          Medium and Large will collapse to usual size on page scroll
        </BlockHeader>
        <List strong inset>
          {['Default', 'Medium', 'Large'].map((v) => (
            <ListItem
              key={v}
              label
              title={v}
              after={
                <Radio
                  component="div"
                  value={v}
                  checked={size === v}
                  onChange={() => setSize(v)}
                />
              }
            />
          ))}
        </List>

        <BlockTitle>Transparent</BlockTitle>

        <BlockHeader>
          When navbar is transparent, its title and background will become
          visible on page scroll
        </BlockHeader>
        <List strong inset>
          <ListItem
            label
            title="Transparent"
            after={
              <Toggle
                component="div"
                checked={isTransparent === true}
                onChange={() => setIsTransparent(!isTransparent)}
              />
            }
          />
        </List>

        <Block strong inset className="space-y-4">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto
            tempore ratione unde accusantium distinctio nulla quia numquam earum
            odio, optio, nisi rem deserunt. Molestiae delectus, ut assumenda
            numquam magni enim.
          </p>
          <p>
            Architecto molestias cum dolor dolorem provident consequuntur
            incidunt sunt fugiat tenetur odio, recusandae placeat rem veniam.
            Voluptates, repellendus odit, magni nesciunt, optio laborum
            asperiores repudiandae consectetur suscipit ab cupiditate eum.
          </p>
          <p>
            Aliquam, iste accusamus deleniti temporibus exercitationem neque
            perferendis optio, blanditiis quisquam molestias perspiciatis cumque
            harum tenetur veniam. Dolorum fugit doloribus est, deserunt,
            eligendi, quaerat quidem itaque tempore laborum non illum?
          </p>
          <p>
            Rerum magni sunt quis veniam, dolor ratione saepe ducimus tempore
            voluptatum porro quod commodi? Aperiam laudantium deleniti totam
            dolorum qui accusantium iste saepe facere optio, soluta maxime
            mollitia deserunt cumque.
          </p>
          <p>
            Iusto tempore quis provident, saepe illum ex ipsum cupiditate
            explicabo ratione unde facere nemo delectus harum, blanditiis eius
            sit asperiores nam. Aut cupiditate est tempore officia, perspiciatis
            esse asperiores repudiandae?
          </p>
          <p>
            Consequuntur itaque harum eos vero, reiciendis dolorum iure non
            earum molestias tenetur sint enim, maxime recusandae ad perferendis
            repudiandae! Sit, quos exercitationem beatae numquam laborum nobis
            natus. Obcaecati, ea inventore.
          </p>
          <p>
            Fugit culpa labore sapiente excepturi reiciendis, nulla, nihil neque
            ut veritatis quis quibusdam dolorum? Voluptatibus animi officia
            perspiciatis doloremque cum voluptatem, quia ratione modi vero,
            consequatur ipsum, praesentium quibusdam amet?
          </p>
          <p>
            Laudantium nihil sint nam placeat, nemo rerum ipsam explicabo iusto
            dolores molestiae expedita eos consequuntur ut architecto
            consequatur soluta ad maiores voluptatem tenetur in velit. Minima
            quia molestiae nobis voluptatibus.
          </p>
          <p>
            Expedita soluta quia inventore et placeat id exercitationem quisquam
            eligendi est eius sapiente quo, cum nesciunt mollitia, sit veniam
            ducimus tempora culpa adipisci commodi in autem nihil voluptatem
            corporis? Perspiciatis.
          </p>
          <p>
            Molestias, est? Eligendi vero distinctio voluptatem cumque id
            voluptatibus, officia minima repellendus sit illo tempora labore
            provident? Eum tenetur consectetur quae, in facilis autem ipsam
            doloribus voluptate vitae suscipit nobis.
          </p>
          <p>
            Obcaecati optio iste hic, soluta minus ullam, perferendis pariatur
            non possimus autem nostrum libero sapiente. Corporis quo cum iusto
            exercitationem velit. Non beatae eveniet asperiores ipsa
            consequuntur temporibus sapiente earum!
          </p>
          <p>
            Temporibus, omnis. Excepturi dolorum expedita laudantium quasi quod
            id adipisci, esse, nam atque in, incidunt ex ab distinctio
            repellendus beatae voluptatem alias odit illum quis. Illo numquam
            voluptatibus error voluptatum!
          </p>
        </Block>
      </div>
    </Page>
  );
}

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  Segmented,
  SegmentedButton,
} from 'konsta/react';

export default function SubnavbarPage() {
  return (
    <Page>
      <Navbar
        title="Subnavbar"
        subnavbar={
          <Segmented strong>
            <SegmentedButton small strong active>
              Button
            </SegmentedButton>
            <SegmentedButton small strong>
              Button
            </SegmentedButton>
            <SegmentedButton small strong>
              Button
            </SegmentedButton>
          </Segmented>
        }
      />
      <div className="relative">
        <Block strongIos outlineIos>
          <p>
            Subnavbar is useful when you need to put any additional elements
            into Navbar, like Tab Links or Search Bar. It also remains visible
            when Navbar hidden.
          </p>
        </Block>
      </div>
    </Page>
  );
}