Enhance styling when "Dropdown" is used within "Header".

[curt-w]

---

name: Feature request
about: Suggest an idea for this project
title: ''
labels: ''
assignees: ''

Feature Type
[ ] Clarity Port
[X] Enhancement

Description
Enhance styling when "Dropdown" is used within "Header". Provided the following example, there is great opportunity to utilize the drop down control within the header with some very minor styling tweaks. Or, perhaps there is another more applicable approach. Thanks in advance for any feedback!

P.S. - apologies if I missed anything in the submission.

[curt-w]

I can't figure out code snippets... I've attached a .txt of the header code sample. Apologies on the poor formatting on initial submission.

header_code_sample.txt

[curt-w]

Just wanted to share the result - I was able to achieve styling evolving my CSS a bit. While the styling might be a bit specific to my implementation / not as re-usable as it should, maybe it'll be helpful somewhere - very minimal testing performed but it's allowed me to move forward with my concepts.

        <Dropdown Position=Position.BottomLeft>
            <DropdownTrigger>
                <div style="height:100%;margin-top:0.5rem;"><NavItem Icon="user"></NavItem></div>
            </DropdownTrigger>
            <DropdownMenu>
                <DropdownHeader>Account</DropdownHeader>
                <a href="MicrosoftIdentity/Account/SignIn"><DropdownItem><Icon Shape="login" Size="24" style="margin-bottom:0.15rem;margin-right:0.3rem;color:var(--clr-dropdown-item-color, #666666);" />Log in</DropdownItem></a>
                <DropdownItem><Icon Shape="pod" Size="24" style="margin-bottom:0.15rem;margin-right:0.3rem;color:var(--clr-dropdown-item-color, #666666);" />Register</DropdownItem>
            </DropdownMenu>
        </Dropdown>
        <Dropdown Position=Position.BottomLeft>
            <DropdownTrigger>
                <div style="height:100%;margin-top:0.5rem;"><NavItem Icon="cog"></NavItem></div>
            </DropdownTrigger>
            <DropdownMenu>
                <DropdownHeader>Settings</DropdownHeader>
                <DropdownItem><Icon Shape="info-circle" Size="24" style="margin-bottom:0.15rem;margin-right:0.3rem;color:var(--clr-dropdown-item-color, #666666);" />User settings</DropdownItem>
                <DropdownItem><Icon Shape="terminal" Size="24" style="margin-bottom:0.15rem;margin-right:0.3rem;color:var(--clr-dropdown-item-color, #666666);" />Debug console</DropdownItem>
            </DropdownMenu>
        </Dropdown>

[karan-kang]

Tracked as issue with Clarity UI itself: vmware-clarity/ng-clarity#114

[karan-kang]

Fixed, releasing as part of v0.12.0