<div class="w-full">
    <c-lb.navbar class="bg-base-100 border border-base-200 rounded-box">
        <c-lb.navbar.start>
            <c-lb.button btnStyle="ghost" size="lg">
                <c-lbi n="rmx.apps" w="1em" h="1em" />
                My App
            </c-lb.button>
        </c-lb.navbar.start>
        <c-lb.navbar.center class="hidden lg:flex">
            <c-lb.menu direction="horizontal">
                <c-lb.menu.item href="/" title="Home">
                    <c-lbi n="rmx.home" w="1em" h="1em" />
                    Home
                </c-lb.menu.item>
                <c-lb.menu.item href="/about" title="About">
                    <c-lbi n="rmx.info-i" w="1em" h="1em" />
                    About
                </c-lb.menu.item>
                <c-lb.menu.item type="submenu-details" title="Services">
                    <c-lbi n="rmx.settings" w="1em" h="1em" />
                    Services
                    <c-lb.menu.item href="/web-design" title="Web Design">
                        <c-lbi n="rmx.palette" w="1em" h="1em" />
                        Web Design
                    </c-lb.menu.item>
                    <c-lb.menu.item href="/development" title="Development">
                        <c-lbi n="rmx.code" w="1em" h="1em" />
                        Development
                    </c-lb.menu.item>
                    <c-lb.menu.item href="/consulting" title="Consulting">
                        <c-lbi n="rmx.group" w="1em" h="1em" />
                        Consulting
                    </c-lb.menu.item>
                </c-lb.menu.item>
                <c-lb.menu.item href="/contact" title="Contact">
                    <c-lbi n="rmx.mail" w="1em" h="1em" />
                    Contact
                </c-lb.menu.item>
            </c-lb.menu>
        </c-lb.navbar.center>
        <c-lb.navbar.end>
            <c-lb.dropdown alignment="end" placement="bottom">
                <c-lb.dropdown.trigger>
                    <c-lb.button btnStyle="ghost" size="sm" tabindex="0">
                        <c-lbi n="rmx.user" w="1em" h="1em" />
                            User Menu
                    </c-lb.button>
                </c-lb.dropdown.trigger>
                <c-lb.dropdown.content class="bg-base-100 border border-base-200 w-48">
                    <c-lb.menu class="w-full">
                        <c-lb.menu.item href="/profile" title="Profile">
                            <c-lbi n="rmx.user" w="1em" h="1em" />
                            Profile
                        </c-lb.menu.item>
                        <c-lb.menu.item href="/settings" title="Settings">
                            <c-lbi n="rmx.settings" w="1em" h="1em" />
                            Settings
                        </c-lb.menu.item>
                        <c-lb.menu.item href="/logout" title="Logout">
                            <c-lbi n="rmx.logout-box" w="1em" h="1em" />
                            Logout
                        </c-lb.menu.item>
                    </c-lb.menu>
                </c-lb.dropdown.content>
            </c-lb.dropdown>
        </c-lb.navbar.end>
    </c-lb.navbar>
</div>
