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

サイドナビゲーションブロック

SideNavigation は、MUI Stack（component="aside"）をベースにした折りたたみ可能なサイドメニューで、オプションのフローティングオーバーレイモードとデータ駆動のリンクを備えています。

インストール​

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

必要なもの​

項目理由
linksナビゲーション項目（href、任意の text、アイコン、isActive、unreadCount）
header (optional)任意のアイコンとラベルを持つ上部リンク
isMenuOpen / setIsMenuOpen (optional)開閉状態をまとめて制御します。両方省略すると内部状態を使います（初期状態は閉じています）
isFloating (optional)ポータル、背景、閉じるボタン付きのフローティングドロワー（デフォルトは false）
制御された開閉状態

親からメニューを制御する場合は、isMenuOpen と setIsMenuOpen を一緒に渡してください。両方を省略すると、このブロックは独自の状態を保持します（メニューボタンがクリックされるまで閉じたままです）。

ライブ例

例ではインラインモード（isFloating={false}）を使い、メニューを開いた状態から始めるため、ドキュメントプレビューでサイドバーが表示されます。ポータルと背景付きのドロワーには isFloating を使ってください（Storybook を参照）。

コード例​

ライブエディター
function Example() {
  const [isMenuOpen, setIsMenuOpen] = React.useState(true);

  return (
    <div style={{ minHeight: 320 }}>
      <SideNavigation
        isFloating={false}
        isMenuOpen={isMenuOpen}
        setIsMenuOpen={setIsMenuOpen}
        header={{ icon: HomeOutlined, text: 'Home', href: '#home' }}
        links={[
          { icon: DashboardOutlined, text: 'Dashboard', href: '#dashboard' },
          { icon: ShoppingCartOutlined, text: 'Products', href: '#products' },
          { icon: SettingsOutlined, text: 'Settings', href: '#settings' },
        ]}
      />
    </div>
  );
}
結果
Loading...

重要なプロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
links{ icon?: SvgIconComponent; text?: ReactNode; href: string; isActive?: boolean; unreadCount?: number }[]はい-ナビゲーションリンク項目
header{ icon?: SvgIconComponent; text?: ReactNode; href: string }いいえundefinedlinks の上にある任意のヘッダーリンク
isFloatingbooleanいいえfalsetrue のとき、開いたメニューはポータル、背景、閉じるボタンを使います
isMenuOpenbooleanいいえ内部 falseメニューパネルが開いているかどうか
setIsMenuOpen(open: boolean) => voidいいえ内部セッター制御された使用では isMenuOpen と一緒に渡します

コンテンツプロパティ​

ルートに links と header を設定します。サブコンポーネントは、ローカルでブロックを上書きしない限り、コンテキストからそれらを読み取ります。

コンポーネントプロパティ型必須デフォルト説明
LinkschildrenReactNodeいいえheader + links を描画デフォルトのヘッダーとリンク一覧を置き換えます
LinksformatTextForUnreadCount(unreadCount: number) => number | stringいいえ件数が 99 を超えると 99...、それ以外は件数unreadCount のバッジテキスト
MenuButtonchildrenReactNodeいいえMenu / MenuOpen アイコントグルボタンのコンテンツ
MenuButtononClickReact.MouseEventHandlerいいえisMenuOpen を切り替えカスタムクリックハンドラ
OverlayonClick() => voidいいえ() => setIsMenuOpen(false)背景のクリック（フローティングモード）
CloseButtonchildrenReactNodeいいえClose アイコンフローティングパネル内の閉じるコントロール
OpenMenucontainerPortalProps['container']いいえdocument.bodyisFloating 時のポータル先

Links、MenuButton、Overlay、CloseButton、OpenMenu はそれぞれ SideNavigation.Links などです。リンクの icon 値には MUI SvgIconComponent を使います（例: HomeOutlined）。

レイアウトと構成のプロパティ​

プロパティ型必須デフォルト説明
childrenBlocksOverride | ReactNodeいいえundefinedコンパウンドサブコンポーネント、または blocks と blockOrder を返す関数オーバーライド
classNamestringいいえundefinedルート aside のクラス名（デフォルトで nbb-side-navigation が適用されます）
sxSxPropsいいえundefinedルート aside 用の MUI システムスタイル

SideNavigation は StackProps（children を除く）を継承します。ルートは component="aside"、maxWidth: 300、direction="column" を使います。ルートレベルの描画順序は menuButton、次に openMenu で、defaultBlockOrder は menuButton、openMenu、overlay、closeButton、links です。

デフォルト UI ブロック​

ブロック基盤備考
SideNavigation（ルート）Stack（component="aside"）maxWidth: 300。デフォルトでは menuButton + openMenu を描画します
SideNavigation.MenuButtonIconButton + SvgIconメニューを切り替えます。デフォルトは Menu アイコンで、インラインで開いているときは MenuOpen になります
SideNavigation.OpenMenuBox + Portalフローティング: Overlay、パネル、CloseButton、Links を含むポータル。インライン: Links のみ
SideNavigation.OverlayBox開いているときのフローティング openMenu 内の背景
SideNavigation.CloseButtonIconButtonフローティングパネル内（Close アイコン）。メニューを閉じます
SideNavigation.LinksStack（component="nav"）+ Linkデフォルトのヘッダー/リンク一覧。開いているときはテキストと未読件数が表示されます

TypeScript​

import { SideNavigation } from '@nodeblocks/frontend-side-navigation-block';
import { DashboardOutlined, HomeOutlined } from '@mui/icons-material';
import type { SvgIconComponent } from '@mui/icons-material';
import type { ReactNode } from 'react';

type NavLink = {
  icon?: SvgIconComponent;
  text?: ReactNode;
  href: string;
  isActive?: boolean;
  unreadCount?: number;
};

const links: NavLink[] = [
  { icon: DashboardOutlined, text: 'Dashboard', href: '/dashboard', isActive: true },
];

<SideNavigation
  header={{ icon: HomeOutlined, text: 'Home', href: '/home' }}
  links={links}
/>;