Sidebar issues

[estebanrts10]

I have set up rewind-ui in my next-js project so that i can use the sidebar component. I have run into some issues and have tried tweaking the code given here https://rewind-ui.dev/components/sidebar, but the sidebar is still not working just right.

here are some images about how it looks. my issue is that the logo/title/button do not appear when the page is launched or when i hover over the sidebar. Once i press the open button they appear, but according to the guide, it should work differently. Here is the code for my component. Any thoughts on what could be causing this? import React, { useState } from "react"; import { Sidebar, useSidebar, Overlay } from "@rewind-ui/core"; import Image from "next/image"; import { RocketLaunchIcon, BriefcaseIcon, UsersIcon, ShieldCheckIcon, KeyIcon, AdjustmentsHorizontalIcon, LifebuoyIcon, EnvelopeOpenIcon, BookOpenIcon, } from "@heroicons/react/24/outline"; import Button from "@mui/material/Button";

const SidebarComponent = () => { const [expanded, setExpanded] = useState(true); const [mobile, setMobile] = useState(false); const sidebar = useSidebar();

const handleToggle = (state) => {
    setExpanded(state.expanded);
    setMobile(state.mobile);
};

const handleMobileToggle = () => {
    sidebar.toggleMobile();
};

return (
    <div className="relative flex flex-row w-full h-full min-h-[35rem]">
        <Sidebar onToggle={handleToggle} className="h-full">
            <Sidebar.Head>
                <Sidebar.Head.Logo>
                    <Image
                        src="/images/iamsa.png"
                        width={40}
                        height={40}
                        alt="Rewind-UI"
                    />
                </Sidebar.Head.Logo>
                <Sidebar.Head.Title>Rewind-UI</Sidebar.Head.Title>
                <Sidebar.Head.Toggle />
            </Sidebar.Head>

            <Sidebar.Nav>
                <Sidebar.Nav.Section>
                    <Sidebar.Nav.Section.Item
                        icon={<RocketLaunchIcon className="h-6 w-6" />}
                        label="Dashboard"
                        href="#"
                    />
                </Sidebar.Nav.Section>

                <Sidebar.Nav.Section>
                    <Sidebar.Nav.Section.Item
                        icon={<BriefcaseIcon className="h-6 w-6" />}
                        label="Clients"
                        href="#"
                    />
                    <Sidebar.Nav.Section.Item
                        icon={<UsersIcon className="h-6 w-6" />}
                        label="Users"
                        as="button"
                    >
                        <Sidebar.Nav.Section isChild>
                            <Sidebar.Nav.Section.Item
                                icon={
                                    <span className="w-1 h-1 rounded bg-transparent" />
                                }
                                label="List all"
                                href="#"
                            />
                            <Sidebar.Nav.Section.Item
                                icon={
                                    <span className="w-1 h-1 rounded bg-transparent" />
                                }
                                label="Add new"
                                href="#"
                            />
                            <Sidebar.Nav.Section.Item
                                icon={
                                    <span className="w-1 h-1 rounded bg-transparent" />
                                }
                                label="Archived"
                                href="#"
                            />
                        </Sidebar.Nav.Section>
                    </Sidebar.Nav.Section.Item>
                    <Sidebar.Nav.Section.Item
                        icon={<ShieldCheckIcon className="h-6 w-6" />}
                        label="Roles"
                        href="#"
                    />
                    <Sidebar.Nav.Section.Item
                        icon={<KeyIcon className="h-6 w-6" />}
                        label="Permissions"
                        href="#"
                    />
                    <Sidebar.Nav.Section.Item
                        icon={
                            <AdjustmentsHorizontalIcon className="h-6 w-6" />
                        }
                        label="Settings"
                        href="#"
                    />
                </Sidebar.Nav.Section>

                <Sidebar.Nav.Section>
                    <Sidebar.Nav.Section.Item
                        icon={<LifebuoyIcon className="h-6 w-6" />}
                        label="Contact"
                        href="#"
                    />
                    <Sidebar.Nav.Section.Item
                        icon={<EnvelopeOpenIcon className="h-6 w-6" />}
                        label="Tickets"
                        href="#"
                    />
                    <Sidebar.Separator />
                    <Sidebar.Nav.Section.Item
                        icon={<BookOpenIcon className="h-6 w-6" />}
                        label="Documentation"
                        href="#"
                    />
                </Sidebar.Nav.Section>
            </Sidebar.Nav>

            <Sidebar.Footer>
                <div className="flex flex-col justify-center items-center text-sm">
                    <span className="font-semibold">Rewind-UI</span>
                    <span>version x.y.z</span>
                </div>
            </Sidebar.Footer>
        </Sidebar>

        <main
            className={`transition-all transform duration-100 text-slate-700 flex-grow flex flex-col ${
                expanded ? "md:ml-64" : "md:ml-20"
            }`}
        >
            {mobile && (
                <Overlay
                    blur="none"
                    onClick={handleMobileToggle}
                    className="md:hidden z-40"
                />
            )}
            <header className="flex flex-row sticky top-0 px-8 items-center bg-white border-b border-b-gray-100 w-full shadow-sm min-h-[4rem]">
                <Button
                    onClick={handleMobileToggle}
                    size="sm"
                    icon
                    className="ml-auto flex md:hidden"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        height="1em"
                        viewBox="0 0 448 512"
                    >
                        <path d="M448 96c0-17.7-14.3-32-32-32H32C14.3 64 0 78.3 0 96s14.3 32 32 32H416c17.7 0 32-14.3 32-32zm0 320c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32z" />
                        <path
                            className="opacity-50"
                            d="M0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32z"
                        />
                    </svg>
                </Button>
            </header>
        </main>
    </div>
);

};

export default SidebarComponent;

[NickDunas]

Could you check the working example I have here and let me know if it helps you fix yours: https://github.com/rewindui/rewindui/tree/main/apps/dashboard

[estebanrts10]

I have been working with this example and even when my code is exactly the same i run into some issues. I have fixed one of my issues by adding the js tag in my src/ content in my tailwind.config.js file module.exports = { content: [ "./src//.{js,html,jsx,tsx}", "./node_modules/@rewind-ui/core/dist/theme/styles/.js", ], but i seem to have an issue with the sidebar when it is closed, specifically the toggle button. i can only open it using the button that appears when the screen is small enough. the open toggle button does not appear when the sidebar is closed(neither does the logo or title/basically anyhing above the rocketlaunch icon is invisible unless i forcibly open the menu using the mobile button). i have attempted to follow your example exactly but nothing seems to work for me. Any thoughts?

[NickDunas]

Sorry but I am on annual leave right now, so cannot do much. Is there a chance that you could invite me to your repo to take a look?