fix(navbar): do not close menu if no url provided #217

qwikerx · Nov 19, 2024 · 0ce1222 · 0ce1222
1 parent 0d87495
commit 0ce1222
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/apps/web/src/generated-examples.ts b/apps/web/src/generated-examples.ts
@@ -1538,7 +1538,7 @@ export const examples: Record<string, Example[]> = {
       description: 'This example can be used to show a secondary dropdown menu when clicking on one of the navigation links.',
       url: '/examples/[theme-rtl]/navbar/03-with-dropdown',
       content:
-        'import { component$ } from \'@builder.io/qwik\'\nimport { Dropdown, Navbar } from \'flowbite-qwik\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\n\nexport default component$(() => {\n  return (\n    <Navbar fluid rounded>\n      <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">\n        <img src="/small-logo.png" alt="Flowbite qwik logo" width="215" height="195" class="h-8 w-auto" />\n        <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite Qwik</span>\n      </Navbar.Brand>\n      <div class="flex items-center md:order-2">\n        <Dropdown\n          as={\n            <img\n              class="h-8 w-8 rounded-full"\n              src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"\n              alt="user photo"\n            />\n          }\n        >\n          <Dropdown.Item header>\n            <span class="block text-sm">Bonnie Green</span>\n            <span class="block truncate text-sm font-medium">[email protected]</span>\n          </Dropdown.Item>\n          <Dropdown.Item>Dashboard</Dropdown.Item>\n          <Dropdown.Item>Settings</Dropdown.Item>\n          <Dropdown.Item>Earnings</Dropdown.Item>\n          <Dropdown.Item divider />\n          <Dropdown.Item>Sign out</Dropdown.Item>\n        </Dropdown>\n        <Navbar.Toggle />\n      </div>\n      <Navbar.Collapse>\n        <Navbar.Link href="/navbars" active>\n          Home\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">About</Navbar.Link>\n        <Navbar.Link href="/navbars" tag="div">\n          <Dropdown label="Services" inline>\n            <Dropdown.Item>Dashboard</Dropdown.Item>\n            <Dropdown.Item>Settings</Dropdown.Item>\n            <Dropdown.Item>Earnings</Dropdown.Item>\n          </Dropdown>\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">Pricing</Navbar.Link>\n        <Navbar.Link href="/navbars">Contact</Navbar.Link>\n      </Navbar.Collapse>\n    </Navbar>\n  )\n})',
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Dropdown, Navbar } from \'flowbite-qwik\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\n\nexport default component$(() => {\n  return (\n    <Navbar fluid rounded>\n      <Navbar.Brand tag={Link} href="https://flowbite-qwik.com/">\n        <img src="/small-logo.png" alt="Flowbite qwik logo" width="215" height="195" class="h-8 w-auto" />\n        <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite Qwik</span>\n      </Navbar.Brand>\n      <div class="flex items-center md:order-2">\n        <Dropdown\n          as={\n            <img\n              class="h-8 w-8 rounded-full"\n              src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"\n              alt="user photo"\n            />\n          }\n        >\n          <Dropdown.Item header>\n            <span class="block text-sm">Bonnie Green</span>\n            <span class="block truncate text-sm font-medium">[email protected]</span>\n          </Dropdown.Item>\n          <Dropdown.Item>Dashboard</Dropdown.Item>\n          <Dropdown.Item>Settings</Dropdown.Item>\n          <Dropdown.Item>Earnings</Dropdown.Item>\n          <Dropdown.Item divider />\n          <Dropdown.Item>Sign out</Dropdown.Item>\n        </Dropdown>\n        <Navbar.Toggle />\n      </div>\n      <Navbar.Collapse>\n        <Navbar.Link href="/navbars" active>\n          Home\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">About</Navbar.Link>\n        <Navbar.Link tag="div">\n          <Dropdown label="Services" inline>\n            <Dropdown.Item>Dashboard</Dropdown.Item>\n            <Dropdown.Item>Settings</Dropdown.Item>\n            <Dropdown.Item>Earnings</Dropdown.Item>\n          </Dropdown>\n        </Navbar.Link>\n        <Navbar.Link href="/navbars">Pricing</Navbar.Link>\n        <Navbar.Link href="/navbars">Contact</Navbar.Link>\n      </Navbar.Collapse>\n    </Navbar>\n  )\n})',
       height: '400',
     },
     {

diff --git a/apps/web/src/routes/examples/[theme-rtl]/navbar/03-with-dropdown/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/navbar/03-with-dropdown/index.tsx
@@ -42,7 +42,7 @@ export default component$(() => {
           Home
         </Navbar.Link>
         <Navbar.Link href="/navbars">About</Navbar.Link>
-        <Navbar.Link href="/navbars" tag="div">
+        <Navbar.Link tag="div">
           <Dropdown label="Services" inline>
             <Dropdown.Item>Dashboard</Dropdown.Item>
             <Dropdown.Item>Settings</Dropdown.Item>

diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flowbite-qwik",
-  "version": "0.37.9",
+  "version": "0.37.10",
   "description": "Official Qwik components built for Flowbite and Tailwind CSS",
   "keywords": [
     "design-system",
@@ -17,8 +17,8 @@
   "license": "MIT",
   "module": "./lib/flowbite.qwik.mjs",
   "main": "./lib/flowbite.qwik.cjs",
-  "types": "./lib-types/index.d.ts",
   "qwik": "./lib/flowbite.qwik.mjs",
+  "types": "./lib-types/index.d.ts",
   "type": "module",
   "style": "./lib/style.css",
   "exports": {

diff --git a/packages/lib/src/components/Navbar/NavbarLink.tsx b/packages/lib/src/components/Navbar/NavbarLink.tsx
@@ -34,7 +34,7 @@ export const NavbarLink = component$<NavbarLinkProps>(({ active = false, tag: Co
   const { themeName } = useFlowbiteThemable()
 
   const handleClick = $(() => {
-    setIsOpen(false)
+    if (props.href) setIsOpen(false)
   })
 
   return (