# Navigation drawers
v-navigation-drawer コンポーネントは、ユーザーがアプリケーション内を移動するために使用するものです。 ナビゲーション・ドロワーは、 vue-router の有無にかかわらず、ボックス内で動作するように事前設定されています。 表示の目的で、いくつかの例は v-card 要素でラップされています。 アプリケーション内では、一般的にv-app直下の子要素としてv-navigation-drawerを配置します。
# 使い方
ナビゲーションドロワーは主にアプリケーションのページへのリンクを保存するために使用されます。 v-model の開始値としてnull を使用すると、ドロワーがモバイルでは閉じた状態、デスクトップでは開いた状態として初期化されます。 nav プロパティを使用して、ドロワーを v-list コンポーネントとペアリングするのが一般的です。
# API
# 注意事項
app プロパティが有効な v-navigation-drawer を使用している場合は、例のように absolute プロパティを使用する必要はありません。
expand-on-hover prop は v-main のコンテンツエリアを変更しません。 コンテンツエリアを expand-on-hover に応答させるには、データプロパティに mini-variant.sync をバインドします。
# サンプル
# Props
# Bottom drawer
bottom プロパティを使用すると、モバイルデバイスの場合、ドロワーを画面下部から開くように移動することができます。 これは代替のスタイルであり、mobile-breakpoint を満たすときに有効になります。
# Expand on hover
コンポーネントを mini-variant モードにし、マウスホバーで開くようにします。 これは、v-main の領域を変更しません。 幅は、mini-variant-width プロパティで設定できます。
# Images
src プロパティを利用することで、ドロワーに任意の背景画像を適用できます。 必要な場合は、img スロットを利用して、v-img によるカスタマイズができます。
# Mini variant
mini-variant プロパティを利用すると、ドロワーは細くなり（デフォルトで56px）、v-list 内は先頭にある要素以外すべて非表示になります。 この例では、 .sync 修飾子を使用して、ドロワーの開閉を紐づけています。
# Permanent and floating
By default, a navigation drawer has a 1px right border that separates it from content. In this example we want to detach the drawer from the left side and let it float on its own. The floating property removes the right border (or left if using right).
# Right
ナビゲーションドロワーは、アプリケーション（または要素）の右側に配置することもできます。 This is also useful for creating a side-sheet with auxiliary information that may not have any navigation links. RTL（右から左へ記述される言語）を利用する場合は、明示的に right を定義する必要があります。
# Temporary
temporary は、ドロワーをアプリケーション画面の上に重なるように表示し、幕（overlay）を表示して背景を暗くします。 モバイル端末ではデフォルトでこの挙動になります。 ドロワーの外をクリックすることで、ドロワーは閉じます。
# その他
# 色付きドロワー
ナビゲーションドロワーは、アプリケーションのデザインに合わせてカスタマイズできます。 ここでは、 append スロットを使用してカスタム背景色と追加コンテンツエリアを適用します。
# 結合ドロワー
この例では、ネストしたドロワーに対応するカスタム幅を定義します。 v-row を使用して、ドロワーとリストが水平方向に隣り合ってスタックするようにします。