From fc62ec79ec7629a9db7d37c956ae99e9fa92da27 Mon Sep 17 00:00:00 2001
From: bzy107 <bzy107>
Date: Sat, 20 Jul 2024 22:29:03 +0900
Subject: [PATCH] docs: Add an Explanation for Customizing Width of the
 Navigation

---
 packages/panels/docs/06-navigation.md | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/panels/docs/06-navigation.md b/packages/panels/docs/06-navigation.md
index 3730d7742c..cf8cb59a6e 100644
--- a/packages/panels/docs/06-navigation.md
+++ b/packages/panels/docs/06-navigation.md
@@ -314,6 +314,32 @@ public function panel(Panel $panel): Panel
 }
 ```
 
+## Customizing width of the navigation
+You can customize width of the navigation using the `sidebarWidth()` method.
+```php
+use Filament\Panel;
+
+public function panel(Panel $panel): Panel
+{
+    return $panel
+        // ...
+        ->sidebarWidth('auto');
+}
+```
+Additionally, if you are using the `sidebarCollapsibleOnDesktop()` method, you can customize width of the icons when collapsed using the `collapsedSidebarWidth()` method.
+
+```php
+use Filament\Panel;
+
+public function panel(Panel $panel): Panel
+{
+    return $panel
+        // ...
+        ->sidebarCollapsibleOnDesktop()
+        ->collapsedSidebarWidth('auto');
+}
+```
+
 ## Advanced navigation customization
 
 The `navigation()` method can be called from the [configuration](configuration). It allows you to build a custom navigation that overrides Filament's automatically generated items. This API is designed to give you complete control over the navigation.