メインコンテンツまでスキップ

Side Navigationブロック

SideNavigationコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルなサイドナビゲーションメニューです。モダンなデザインパターン、モバイルレスポンシブ動作、フローティングと固定モード、柔軟なカスタマイズオプションを備えた完全なナビゲーションインターフェースを提供します。

🚀 インストール​

npm install @nodeblocks/frontend-side-navigation-block

📖 使用法​

import {SideNavigation} from '@nodeblocks/frontend-side-navigation-block';
ライブエディター
function BasicSideNavigation() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const navigationHeader = {
    icon: 'home' as const,
    text: 'ホーム',
    href: '#home',
  };

  const navigationLinks = [
    {icon: 'dashboard' as const, text: 'ダッシュボード', href: '#dashboard'},
    {icon: 'shopping_cart' as const, text: 'プロダクト', href: '#products'},
    {icon: 'reorder' as const, text: '注文', href: '#orders'},
    {icon: 'settings' as const, text: '設定', href: '#settings'},
    {icon: 'help' as const, text: 'サポート', href: '#support'},
  ];

  return (
    <SideNavigation
      isFloating={true}
      isMenuOpen={isMenuOpen}
      setIsMenuOpen={setIsMenuOpen}
      header={navigationHeader}
      links={navigationLinks}>
      <SideNavigation.Links />
    </SideNavigation>
  );
}
結果
Loading...

🔧 プロパティリファレンス​

メインコンポーネントプロパティ​

プロパティ型デフォルト説明
isFloatingbooleanundefinedナビゲーションがコンテンツの上にフロート（モバイルスタイル）するか、固定位置にするか
isMenuOpenbooleanundefinedナビゲーションメニューが開いているか閉じているかを制御
setIsMenuOpen(isMenuOpen: boolean) => void必須メニューの開閉状態を制御する関数
header{ icon?: IconType; text?: ReactNode; href: string }必須オプションのアイコン、テキストコンテンツ、hrefを持つヘッダーリンクオブジェクト
links{ icon?: IconType; text?: ReactNode; href: string }[]必須オプションのアイコンを持つナビゲーションリンクオブジェクトの配列
childrenBlocksOverrideundefinedデフォルトブロックをオーバーライドするか、カスタムナビゲーションコンポーネントを追加する関数

サブコンポーネント​

SideNavigationコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

SideNavigation.Overlay​

プロパティ型デフォルト説明
childrenReactNodeundefinedオーバーレイのカスタムコンテンツ
setIsMenuOpen(isMenuOpen: boolean) => voidコンテキストからオーバーレイがクリックされたときにメニュー状態を制御する関数

注意: このコンポーネントはすべてのHTML div要素プロパティを継承します。

SideNavigation.MenuButton​

プロパティ型デフォルト説明
childrenReactNode<Icon icon="menu" />メニューボタンのカスタムコンテンツ（デフォルトはハンバーガーアイコン）
isMenuOpenbooleanコンテキストから現在のメニュー開閉状態
setIsMenuOpen(isMenuOpen: boolean) => voidコンテキストからメニュー状態を切り替える関数

注意: このコンポーネントはすべてのHTML button要素プロパティを継承します。

プロパティ型デフォルト説明
childrenReactNodeデフォルトリンクレンダリングデフォルトリンクレンダリングをオーバーライドするカスタムコンテンツ
header{ icon?: IconType; text?: ReactNode; href: string }コンテキストから表示するヘッダーリンクオブジェクト
links{ icon?: IconType; text?: ReactNode; href: string }[]コンテキストから表示するナビゲーションリンクの配列

注意: このコンポーネントはすべてのHTML nav要素プロパティを継承します。

🔧 TypeScriptサポート​

包括的な型定義による完全なTypeScriptサポート：

import {SideNavigation} from '@nodeblocks/frontend-side-navigation-block';
import {ComponentProps, ReactNode} from 'react';

// メインコンポーネントインターフェース
interface SideNavigationProps extends Omit<ComponentProps<'aside'>, 'children'> {
  isFloating?: boolean;
  isMenuOpen?: boolean;
  setIsMenuOpen: (isMenuOpen: boolean) => void;
  header: { icon?: string; text?: ReactNode; href: string };
  links: { icon?: string; text?: ReactNode; href: string }[];
}

// 包括的な型付けでの使用例
interface CustomNavigationData {
  headerItem: { icon?: string; text?: ReactNode; href: string };
  menuItems: { icon?: string; text?: ReactNode; href: string }[];
  isResponsive: boolean;
  onMenuToggle: (isOpen: boolean) => void;
}

const NavigationComponent = ({headerItem, menuItems, isResponsive, onMenuToggle}: CustomNavigationData) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleMenuToggle = (isMenuOpen: boolean) => {
    setIsOpen(isMenuOpen);
    onMenuToggle(isMenuOpen);
  };

  return (
    <SideNavigation
      isFloating={isResponsive}
      isMenuOpen={isOpen}
      setIsMenuOpen={handleMenuToggle}
      header={headerItem}
      links={menuItems}
      onClick={e => console.log('ナビゲーションがクリックされました')}>
      <SideNavigation.Links />
    </SideNavigation>
  );
};

React、TypeScript、モダンWebスタンダードを使用して❤️で構築されました。