the hamburger menu not toggling on mobile view

[sylvahh]

so I am running a project on vue with tailwind, I added some components from flowbite the sidebar component was one of them.

The issue I'm having right now is that when the user navigates to the page; say the user navigates from the login page to the dashboard page on mobile, when I click the button to display the sidebar it clicks but the sidebar doesn't come out until I refresh the page then it begins to be responsive

is this a bug I should be worried about or is the issue from my end?

[zoltanszogyenyi]

Hello @sylvahh,

Thanks for reporting back to Flowbite.

Can you please give me some more context in which this happens in your case? What framework are you using? Can you share the code and a screenshot of what's happening?

Cheers, Zoltan

[sylvahh]

hi @zoltanszogyenyi ,

As I mentioned earlier this is a Vue framework and I'm using it with tailwind and Javascript. the issue remains the same whenever I navigate from the login page to the user dashboard on mobile and try to open the sidebar it doesn't respond until I refresh the page

here are some snap shots to give you more context:

login screen:

dashboard screen: NB: I have already clicked the hamburger menu but the sidebar didn't come up

sidebar: PS: this was after I have refreshed the page.

tailwind.config snippet

I hope this was enough context

[zoltanszogyenyi]

Hey @sylvahh,

Thanks for the examples - did you try using the init functions as described in the Flowbite Vue guide? Should allow the event listeners to persist throughout the change of state if used on the onMounted lifecycle methods.

Cheers, Zoltan

[sylvahh]

@zoltanszogyenyi I opened the flowbite docs you posted and saw the initModals method. not sure where to call it but I tried calling it on the sidebar component and also at the App.vue component none of them solved the problem still.

[zoltanszogyenyi]

@sylvahh I believe you may be using the Drawer component there and not the Modal - can you please try using initDrawers instead.

Check the data attributes that are being added there for the trigger hamburger menu.

[sylvahh]

my bad, I was able to change the method to initDrawers and tried calling it on the app.vue and also on the sidebar component but it still didn't work.

[zoltanszogyenyi]

That looks good, but what data attributes are being used on the toggle button (hamburger menu)? Are the id's corresponding?

You can check out a life example of a drawer in the Flowbite Vue starter kit as a reference.

[sylvahh]

well, I have gone through both of them they seem to be okay.

here:

[yamakan0317]

I have same problem. user navigates from the main page to the dashboard page on mobile, when I click the button to display the sidebar it clicks but the sidebar doesn't come out until I refresh the page then it begins to be responsive.

share the code. https://wp7ib1-5173.preview.csb.app/ https://github.com/yamakan0317/flowbite-drawer-not-work

[sormpe]

I can also confirm this issue.

[JoshuaSmeda]

Same issue here

[sudheersuri]

I had the exact same issue, i resolved it by doing 2 things 1) add js file using Nexjs Script tag like below before end of body tag <Script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></Script>

2) call initFlowbite() in the same file where you wrote your responsive menu html code (ex: layout.js)

import { initFlowbite } from 'flowbite'
useEffect(() => {
    initFlowbite();
  }, []);

[Niehaus]

@sylvahh I have the same configuration as you, and the thing that worked out for is the code below:

<script setup>
import { initFlowbite } from 'flowbite'
import { onMounted } from 'vue'

onMounted(() => {
  initFlowbite()
})
</script>

you have to call it in the same file that your sidebar component is as @sudheersuri has said 😸

[deleonjulio]

@zoltanszogyenyi I have the same issue with sidebar, I'm using React, Vite and react-router-dom. I use the sidebar example here https://flowbite.com/docs/components/sidebar/

On Safari The Sidebar doesn't open if you click it.

On Firefox The Sidebar doesn't open if you click it when you're from different route. -The user login, redirected to dashboard (the one with sidebar) -The user click the sidebar, it doesn't open. (It will only work (open and close) if you refresh the page)

I managed to solve this 2 problems using @sudheersuri solution, thank you.

I need to use the initFlowbite to make it work.

    `import React, {useEffect} from 'react';
    import { initFlowbite } from 'flowbite'

    export const Navigation = () => {

        const darkMode = true;

        useEffect(() => {
          initFlowbite();
        }, []);

        return (
            <React.Fragment>
                <Nav darkMode={darkMode}  />
                <Aside darkMode={darkMode} />
            </React.Fragment>
        )
    }

    const Nav = ({darkMode} : {darkMode: boolean}) => {
       return (
          <nav className={`fixed top-0 z-50 w-full bg-white border-b border-gray-200 ${darkMode && 'dark:bg-gray-800 dark:border-gray-700'}`}>
             <div className="px-3 py-3 lg:px-5 lg:pl-3">
                <div className="flex items-center justify-between">
                   <div className="flex items-center justify-start">
                   <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" className="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
                         <span className="sr-only">Open sidebar</span>
                         <svg className="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
                        </svg>
                      </button>
                   <a href="https://flowbite.com" className="flex ml-2 md:mr-24">
                      <img src="https://flowbite.com/docs/images/logo.svg" className="h-8 mr-3" alt="FlowBite Logo" />
                      <span className={`self-center text-xl font-semibold sm:text-2xl whitespace-nowra ${darkMode && 'dark:text-white'}`}>App Name</span>
                   </a>
                   </div>
                   <div className="flex items-center">
                      <div className="flex items-center ml-3">
                         <div>
                            <button type="button" className="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600" aria-expanded="false" data-dropdown-toggle="dropdown-user">
                                <span className="sr-only">Open user menu</span>
                                <img className="w-8 h-8 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="user photo" />
                            </button>
                         </div>
                         <div className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600" id="dropdown-user">
                            <div className="px-4 py-3" role="none">
                                <p className="text-sm text-gray-900 dark:text-white" role="none">
                                Neil Sims
                                </p>
                                <p className="text-sm font-medium text-gray-900 truncate dark:text-gray-300" role="none">
                                neil.sims@flowbite.com
                                </p>
                            </div>
                            <ul className="py-1" role="none">
                                <li>
                                <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">Settings</a>
                                </li>
                                <li>
                                <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">Sign out</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                   </div>
                </div>
             </div>
          </nav>
       )
    }

    const Aside = ({darkMode} : {darkMode: boolean}) => {
       return (
          <aside id="logo-sidebar" className={`fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 ${darkMode && 'dark:bg-gray-800 dark:border-gray-700'}`} aria-label="Sidebar">
             <div className={`h-full px-3 pb-4 overflow-y-auto bg-white ${darkMode && 'dark:bg-gray-800'}`}>
                <ul className="space-y-2 font-medium">
                   <li>
                      <a href="#" className={`flex items-center p-2 text-gray-900 rounded-lg ${darkMode && 'dark:text-white'} hover:bg-gray-100 ${darkMode ? 'dark:hover:bg-gray-700' : 'dark:hover:bg-gray-200'}`}>
                         <span className="ml-3">Dashboard</span>
                      </a>
                   </li>
                   <li>
                      <a href="#" className={`flex items-center p-2 text-gray-900 rounded-lg ${darkMode && 'dark:text-white'} hover:bg-gray-100 ${darkMode ? 'dark:hover:bg-gray-700' : 'dark:hover:bg-gray-200'}`}>
                         <span className="flex-1 ml-3 whitespace-nowrap">Users</span>
                      </a>
                   </li>
                </ul>
             </div>
          </aside>
       )
    }

`

[haenno]

@sylvahh I have the same configuration as you, and the thing that worked out for is the code below:

<script setup>
import { initFlowbite } from 'flowbite'
import { onMounted } from 'vue'

onMounted(() => {
  initFlowbite()
})
</script>

you have to call it in the same file that your sidebar component is as @sudheersuri has said 😸

I just called it in the App.vue`. Now all functions work properly (my problem was the sidebar example -- the hamburger menu was without any function).

Thanks a lot!

[sylvahh]

hey @haenno I ended up building my own sidebar component using tailwind but it's good to know that there is a fix, I will use it next time I need a sidebar component. thanks again man

[PPaivank]

I had the exact same issue, i resolved it by doing 2 things

1. add js file using Nexjs Script tag like below before end of body tag <Script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></Script>
2. call initFlowbite() in the same file where you wrote your responsive menu html code (ex: layout.js)

import { initFlowbite } from 'flowbite'
useEffect(() => {
    initFlowbite();
  }, []);

just experienced the same issue today, your answer fixed my problem, thank you!!!

import { initFlowbite } from "flowbite";

export default function Navbar() { useEffect(() => { initFlowbite(); }, []);

[lokesh6167]

Thanks initFlowBite() is working..

This initFlowBite function is only present in flowbite library or its also present in flowbite-react also?

[sarb001]

@sylvahh I have the same configuration as you, and the thing that worked out for is the code below:

<script setup>
import { initFlowbite } from 'flowbite'
import { onMounted } from 'vue'

onMounted(() => {
  initFlowbite()
})
</script>

you have to call it in the same file that your sidebar component is as @sudheersuri has said 😸

I just called it in the App.vue`. Now all functions work properly (my problem was the sidebar example -- the hamburger menu was without any function).

Thanks a lot!

Hey, i'm still facing issue few hous ago but thnks this solution works for me ( in React )

[zoltanszogyenyi]

Hey everyone,

Please check our upgraded Vue and Nuxt guide using a composable:

• https://flowbite.com/docs/getting-started/vue/
• https://flowbite.com/docs/getting-started/nuxt-js/#data-attributes

The starter repo template has also been updated:

• https://github.com/themesberg/tailwind-vue-starter
• https://github.com/themesberg/tailwind-nuxt-starter

Cheers, Zoltan

[bewba]

Do you have a way to fix this for sveltekit?