Inconsistent styling of NavUl when hamburger expanded then viewport is resized

[jennydaman]

Describe the bug

This bug is apparent on https://flowbite-svelte.com/docs/pages/introduction

The <NavUl> component contains a <ul>, which cannot be styled properly. Furthermore, it looks different when you:

1. Decrease the viewport width so that the <NavHamburger> appears
2. Expand the hamburger menu
3. Increase the viewport width again.

Original look

Bugged Look

Notice how there is now a rounded border around the <NavUl>.

This problem is worse if there is custom styling applied to the outer <Navbar>. Setting classUl on the <NavUl> leads to other, still undesirable behavior.

Original Look

Here, I have two <Navbar>: the first one has classUl unset whereas the second one has classUl="bg-blue-500"

Bugged Look

I repeat the steps to trigger the bug.

The behavior I would like to achieve is where:

• <Navbar> has a custom background color
• <NavUl> has a custom background color when the hamburger menu is expanded
• <NavUl>'s background color is unset on wide viewports

Sadly the desired behavior is not possible.

Reproduction

Sorry, I don't feel comfortable authorizing Stackblitz with my GitHub account. I reproduced the issue in Stackblitz. Here is the diff:

diff --git a/package.json b/package.json
index 3a5a888..c019400 100644
--- a/package.json
+++ b/package.json
@@ -26,9 +26,9 @@
                "eslint": "^9.6.0",
                "eslint-config-prettier": "^9.1.0",
                "eslint-plugin-svelte": "^2.41.0",
                "flowbite": "^2.4.1",
-               "flowbite-svelte": "^0.46.14",
+               "flowbite-svelte": "^0.47.1",
                "flowbite-svelte-icons": "^1.6.1",
                "globals": "^15.8.0",
                "postcss": "^8.4.39",
                "prettier": "^3.3.2",
diff --git a/src/lib/TopBar.svelte b/src/lib/TopBar.svelte
new file mode 100644
index 0000000..0ffcbe9
--- /dev/null
+++ b/src/lib/TopBar.svelte
@@ -0,0 +1,11 @@
+<script>
+import {Navbar, NavLi, NavUl, NavHamburger} from "flowbite-svelte";
+export let classUl = "";
+</script>
+
+<Navbar class="bg-green-200">
+  <NavHamburger />
+  <NavUl classUl={classUl}>
+    <NavLi>I am a NavLi</NavLi>
+  </NavUl>
+</Navbar>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1e42cb9..73d6b35 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,12 @@
 <script>
   import { Heading, P, List, Li, Label, MultiSelect } from 'flowbite-svelte';
+  import TopBar from "$lib/TopBar.svelte";
 </script>
 
+<TopBar />
+<TopBar classUl="bg-blue-500"/>
+
 <div class='p-9'>
 <Heading tag="h1">Flowbite-Svelte Playground</Heading>
 <List tag="ol">
   <Li class="text-2xl">Fork this Stackblitz project</Li>

Flowbite version and System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/kit: ^2.5.18 => 2.7.2 
    flowbite-svelte: ^0.47.1 => 0.47.1 
    svelte: 4.2.18 => 4.2.18 
    vite: ^5.3.3 => 5.4.10