From ed344b92faf3c6acddaf8ce78d916e8c2ecc7f86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= <wingkwong.code@gmail.com>
Date: Thu, 6 Feb 2025 04:41:02 +0800
Subject: [PATCH] refactor(navbar): remove dropdown menu width (#4757)

* refactor: remove dropdown menu width

* refactor: shorter description
---
 .../navbar/with-dropdown-menu/page.tsx         | 11 +++++------
 .../navbar/with-dropdown-menu.raw.jsx          | 11 +++++------
 .../navbar/stories/navbar.stories.tsx          | 18 +++++-------------
 3 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/apps/docs/app/examples/navbar/with-dropdown-menu/page.tsx b/apps/docs/app/examples/navbar/with-dropdown-menu/page.tsx
index 4d3cafa58..e744da835 100644
--- a/apps/docs/app/examples/navbar/with-dropdown-menu/page.tsx
+++ b/apps/docs/app/examples/navbar/with-dropdown-menu/page.tsx
@@ -59,42 +59,41 @@ export default function Page() {
           </NavbarItem>
           <DropdownMenu
             aria-label="ACME features"
-            className="w-[340px]"
             itemClasses={{
               base: "gap-4",
             }}
           >
             <DropdownItem
               key="autoscaling"
-              description="ACME scales apps to meet user demand, automagically, based on load."
+              description="ACME scales apps based on demand and load"
               startContent={icons.scale}
             >
               Autoscaling
             </DropdownItem>
             <DropdownItem
               key="usage_metrics"
-              description="Real-time metrics to debug issues. Slow query added? We’ll show you exactly where."
+              description="Real-time metrics to debug issues"
               startContent={icons.activity}
             >
               Usage Metrics
             </DropdownItem>
             <DropdownItem
               key="production_ready"
-              description="ACME runs on ACME, join us and others serving requests at web scale."
+              description="ACME runs on ACME, join us at web scale"
               startContent={icons.flash}
             >
               Production Ready
             </DropdownItem>
             <DropdownItem
               key="99_uptime"
-              description="Applications stay on the grid with high availability and high uptime guarantees."
+              description="High availability and uptime guarantees"
               startContent={icons.server}
             >
               +99% Uptime
             </DropdownItem>
             <DropdownItem
               key="supreme_support"
-              description="Overcome any challenge with a supporting team ready to respond."
+              description="Support team ready to respond"
               startContent={icons.user}
             >
               +Supreme Support
diff --git a/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx b/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx
index 533d17ebb..cdd2f941e 100644
--- a/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx
+++ b/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx
@@ -252,42 +252,41 @@ export default function App() {
           </NavbarItem>
           <DropdownMenu
             aria-label="ACME features"
-            className="w-[340px]"
             itemClasses={{
               base: "gap-4",
             }}
           >
             <DropdownItem
               key="autoscaling"
-              description="ACME scales apps to meet user demand, automagically, based on load."
+              description="ACME scales apps based on demand and load"
               startContent={icons.scale}
             >
               Autoscaling
             </DropdownItem>
             <DropdownItem
               key="usage_metrics"
-              description="Real-time metrics to debug issues. Slow query added? We’ll show you exactly where."
+              description="Real-time metrics to debug issues"
               startContent={icons.activity}
             >
               Usage Metrics
             </DropdownItem>
             <DropdownItem
               key="production_ready"
-              description="ACME runs on ACME, join us and others serving requests at web scale."
+              description="ACME runs on ACME, join us at web scale"
               startContent={icons.flash}
             >
               Production Ready
             </DropdownItem>
             <DropdownItem
               key="99_uptime"
-              description="Applications stay on the grid with high availability and high uptime guarantees."
+              description="High availability and uptime guarantees"
               startContent={icons.server}
             >
               +99% Uptime
             </DropdownItem>
             <DropdownItem
               key="supreme_support"
-              description="Overcome any challenge with a supporting team ready to respond."
+              description="Support team ready to respond"
               startContent={icons.user}
             >
               +Supreme Support
diff --git a/packages/components/navbar/stories/navbar.stories.tsx b/packages/components/navbar/stories/navbar.stories.tsx
index f632aeffb..604bf508b 100644
--- a/packages/components/navbar/stories/navbar.stories.tsx
+++ b/packages/components/navbar/stories/navbar.stories.tsx
@@ -265,7 +265,6 @@ const WithDropdownTemplate = (args: NavbarProps) => {
             </NavbarItem>
             <DropdownMenu
               aria-label="ACME features"
-              className="w-[340px]"
               itemClasses={{
                 base: "gap-4",
                 wrapper: "py-3",
@@ -273,42 +272,35 @@ const WithDropdownTemplate = (args: NavbarProps) => {
             >
               <DropdownItem
                 key="autoscaling"
-                description="ACME scales apps to meet user demand, automagically, based on load."
+                description="ACME scales apps based on demand and load"
                 startContent={icons.scale}
               >
                 Autoscaling
               </DropdownItem>
-              <DropdownItem
-                key="safe_and_sound"
-                description="A secure mission control, without the policy headache. Permissions, 2FA, and more."
-                startContent={icons.lock}
-              >
-                Safe and Sound
-              </DropdownItem>
               <DropdownItem
                 key="usage_metrics"
-                description="Real-time metrics to debug issues. Slow query added? We’ll show you exactly where."
+                description="Real-time metrics to debug issues"
                 startContent={icons.activity}
               >
                 Usage Metrics
               </DropdownItem>
               <DropdownItem
                 key="production_ready"
-                description="ACME runs on ACME, join us and others serving requests at web scale."
+                description="ACME runs on ACME, join us at web scale"
                 startContent={icons.flash}
               >
                 Production Ready
               </DropdownItem>
               <DropdownItem
                 key="99_uptime"
-                description="Applications stay on the grid with high availability and high uptime guarantees."
+                description="High availability and uptime guarantees"
                 startContent={icons.server}
               >
                 +99% Uptime
               </DropdownItem>
               <DropdownItem
                 key="supreme_support"
-                description="Overcome any challenge with a supporting team ready to respond."
+                description="Support team ready to respond"
                 startContent={icons.user}
               >
                 +Supreme Support