Navbarブロック

Navbarコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルなナビゲーションバーです。モダンなデザインパターン、柔軟なレイアウトセクション、カスタマイズ可能なコンテンツエリアを備えた完全なWebサイトナビゲーションインターフェースを提供します。

---

🚀 インストール

npm install @nodeblocks/frontend-navbar-block@0.1.4

---

📖 使用法

import {Navbar} from '@nodeblocks/frontend-navbar-block';

基本的な使用法

function BasicNavbar() {
  return (
    <Navbar
      leftContent={
        <Navbar.Logo src="/img/icon-small.png" alt="Company Logo" style={{height: '32px'}} />
      }
      centerContent={
        <div style={{display: 'flex', gap: '16px'}}>
          <Navbar.Link href="#home"><span>Home</span></Navbar.Link>
          <Navbar.Link href="#about"><span>About</span></Navbar.Link>
          <Navbar.Link href="#services"><span>Services</span></Navbar.Link>
          <Navbar.Link href="#contact"><span>Contact</span></Navbar.Link>
        </div>
      }
      rightContent={
        <Navbar.ButtonLink href="#login">Login</Navbar.ButtonLink>
      }>
      <Navbar.Left />
      <Navbar.Center />
      <Navbar.Right />
    </Navbar>
  );
}

高度な使用法

function AdvancedNavbar() {
  return (
    <Navbar
      leftContent={
        <Navbar.Logo src="/img/icon-small.png" alt="Company Logo" style={{height: '32px'}} />
      }
      centerContent={
        <div style={{display: 'flex', gap: '16px'}}>
          <Navbar.Link href="#home"><span>Home</span></Navbar.Link>
          <Navbar.Link href="#about"><span>About</span></Navbar.Link>
          <Navbar.Link href="#services"><span>Services</span></Navbar.Link>
          <Navbar.Link href="#contact"><span>Contact</span></Navbar.Link>
        </div>
      }
      rightContent={
        <Navbar.ButtonLink href="#login">Login</Navbar.ButtonLink>
      }>
      {({ defaultBlocks, defaultBlockOrder }) => ({
        blocks: {
          ...defaultBlocks,
          
          // 🏢 Custom Left Section with props override
          left: {
            ...defaultBlocks.left,
            props: {
              ...defaultBlocks.left.props,
              className: "custom-navbar-left",
              style: {
                display: 'flex',
                alignItems: 'center',
                gap: '15px',
                padding: '10px 20px',
                backgroundColor: '#f8f9fa',
                borderRadius: '12px',
                border: '2px solid #e9ecef'
              },
              children: (
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                  <div style={{
                    width: '40px',
                    height: '40px',
                    backgroundColor: '#007bff',
                    borderRadius: '50%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: 'white',
                    fontSize: '1.2rem',
                    fontWeight: 'bold'
                  }}>
                    🚀
                  </div>
                  <div>
                    <div style={{ fontWeight: 'bold', fontSize: '1.1rem', color: '#343a40' }}>
                      TechCorp
                    </div>
                    <div style={{ fontSize: '0.8rem', color: '#6c757d' }}>
                      Innovation Hub
                    </div>
                  </div>
                </div>
              )
            },
          },
          
          // 🧭 Rich Center Navigation with full component override
          center: (
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              padding: '8px 16px',
              backgroundColor: '#fff',
              borderRadius: '50px',
              border: '1px solid #e9ecef',
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
            }}>
              {[
                { href: '#home', label: '🏠 Home', color: '#007bff' },
                { href: '#products', label: '📦 Products', color: '#28a745' },
                { href: '#about', label: '👥 About', color: '#17a2b8' },
                { href: '#contact', label: '📞 Contact', color: '#fd7e14' }
              ].map((item, index) => (
                <a
                  key={index}
                  href={item.href}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: '6px',
                    padding: '10px 16px',
                    borderRadius: '25px',
                    textDecoration: 'none',
                    color: '#495057',
                    fontSize: '0.9rem',
                    fontWeight: '500',
                    transition: 'all 0.3s ease',
                    border: '1px solid transparent'
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.backgroundColor = item.color;
                    e.currentTarget.style.color = 'white';
                    e.currentTarget.style.transform = 'translateY(-2px)';
                    e.currentTarget.style.boxShadow = `0 4px 12px ${item.color}30`;
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.backgroundColor = 'transparent';
                    e.currentTarget.style.color = '#495057';
                    e.currentTarget.style.transform = 'translateY(0)';
                    e.currentTarget.style.boxShadow = 'none';
                  }}
                >
                  {item.label}
                </a>
              ))}
            </div>
          ),
          
          // 🎯 Custom Right Section with props override
          right: {
            ...defaultBlocks.right,
            props: {
              ...defaultBlocks.right.props,
              className: "custom-navbar-right",
              style: {
                display: 'flex',
                alignItems: 'center',
                gap: '12px'
              },
              children: (
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                  {/* Search Button */}
                  <button style={{
                    background: 'none',
                    border: '2px solid #6c757d',
                    borderRadius: '50%',
                    width: '40px',
                    height: '40px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    cursor: 'pointer',
                    fontSize: '1rem',
                    transition: 'all 0.3s ease'
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.borderColor = '#007bff';
                    e.currentTarget.style.backgroundColor = '#007bff';
                    e.currentTarget.style.color = 'white';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.borderColor = '#6c757d';
                    e.currentTarget.style.backgroundColor = 'transparent';
                    e.currentTarget.style.color = 'inherit';
                  }}>
                    🔍
                  </button>
                  
                  {/* Login Button */}
                  <button style={{
                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                    border: 'none',
                    borderRadius: '25px',
                    padding: '10px 20px',
                    color: 'white',
                    fontSize: '0.9rem',
                    fontWeight: '600',
                    cursor: 'pointer',
                    transition: 'all 0.3s ease',
                    boxShadow: '0 4px 15px rgba(102, 126, 234, 0.3)'
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.transform = 'translateY(-2px)';
                    e.currentTarget.style.boxShadow = '0 6px 20px rgba(102, 126, 234, 0.4)';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.transform = 'translateY(0)';
                    e.currentTarget.style.boxShadow = '0 4px 15px rgba(102, 126, 234, 0.3)';
                  }}>
                    🔐 Sign In
                  </button>
                  
                  {/* Profile Avatar */}
                  <div style={{
                    width: '36px',
                    height: '36px',
                    borderRadius: '50%',
                    backgroundColor: '#28a745',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: 'white',
                    fontSize: '1rem',
                    fontWeight: 'bold',
                    cursor: 'pointer',
                    transition: 'all 0.3s ease'
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.transform = 'scale(1.1)';
                    e.currentTarget.style.boxShadow = '0 4px 15px rgba(40, 167, 69, 0.3)';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.transform = 'scale(1)';
                    e.currentTarget.style.boxShadow = 'none';
                  }}>
                    👤
                  </div>
                </div>
              )
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </Navbar>
  );
}

---

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

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

プロパティ	型	デフォルト	説明
leftContent	ReactNode	必須	ナビゲーションバーの左セクションに表示するコンテンツ（通常はロゴ）
centerContent	ReactNode	必須	ナビゲーションバーの中央セクションに表示するコンテンツ（通常はナビゲーションリンク）
rightContent	ReactNode	必須	ナビゲーションバーの右セクションに表示するコンテンツ（通常はユーザーアクション/ボタン）
className	string	undefined	ナビゲーションバーコンテナのスタイリング用の追加CSSクラス名
children	BlocksOverride	undefined	デフォルトブロックをオーバーライドするか、カスタムナビゲーションバーセクションを追加する関数

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

サブコンポーネント

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

Navbar.Left

プロパティ	型	デフォルト	説明
children	ReactNode	コンテキストの leftContent	左セクションに表示するコンテンツ（コンテキストの leftContent をオーバーライド）

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

Navbar.Center

プロパティ	型	デフォルト	説明
children	ReactNode	コンテキストの centerContent	中央セクションに表示するコンテンツ（コンテキストの centerContent をオーバーライド）

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

Navbar.Right

プロパティ	型	デフォルト	説明
children	ReactNode	コンテキストの rightContent	右セクションに表示するコンテンツ（コンテキストの rightContent をオーバーライド）

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

Navbar.Logo

プロパティ	型	デフォルト	説明
src	string	必須	ロゴ画像のソースURL
alt	string	必須	ロゴ画像の代替テキスト

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

Navbar.Link

プロパティ	型	デフォルト	説明
href	string	必須	リンクの宛先URL
children	ReactNode	必須	リンク内に表示するコンテンツ

Navbar.ButtonLink

プロパティ	型	デフォルト	説明
href	string	必須	ボタンリンクの宛先URL
children	ReactNode	必須	ボタン内に表示するコンテンツ

---

🔧 TypeScriptサポート

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

import {Navbar} from '@nodeblocks/frontend-navbar-block';
import {ComponentProps, ReactNode} from 'react';

// Main component interface
interface NavbarProps extends Omit<ComponentProps<'nav'>, 'children'> {
  leftContent: ReactNode;
  centerContent: ReactNode;
  rightContent: ReactNode;
  className?: string;
}

// Usage example with comprehensive typing
const customNavbar: NavbarProps = {
  leftContent: <Navbar.Logo src="/logo.svg" alt="Logo" />,
  centerContent: (
    <nav>
      <Navbar.Link href="#home">Home</Navbar.Link>
      <Navbar.Link href="#products">Products</Navbar.Link>
      <Navbar.Link href="#about">About</Navbar.Link>
    </nav>
  ),
  rightContent: (
    <div>
      <Navbar.ButtonLink href="#login">Login</Navbar.ButtonLink>
      <Navbar.ButtonLink href="#register">Register</Navbar.ButtonLink>
    </div>
  ),
  className: 'my-custom-navbar',
};

// Example with sub-component customization
function AdvancedNavbar() {
  return (
    <Navbar {...customNavbar}>
      <Navbar.Left />
      <Navbar.Center />
      <Navbar.Right
        onClick={e => console.log('Right section clicked')}
        style={{backgroundColor: 'lightgray'}}
        className="my-custom-right-section">
        {/* This overrides rightContent from context */}
        <Navbar.ButtonLink href="#custom-action">Custom Action</Navbar.ButtonLink>
      </Navbar.Right>
    </Navbar>
  );
}

---

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