Shellbar usage, documentation or github examples

[ansujohn]

Description

I need couple of clarifications on Shellbar

1) Change the background colour of Shellbar Tried this css file has

.header {
    background-color: black;
    color: white;
}

The tried to use that in Shellbar with no effect

<Shellbar
                className="header" ....

How can I change the background colour?

2. I am trying to use Avatar for profile. I have installed "fiori-fundamentals": "^1.7.8",

and added this line in the index.css file @import '../node_modules/fiori-fundamentals/dist/fiori-fundamentals.min.css';

<Shellbar
profile={<Avatar glyph='customer'/>}

but customer icon does not show up. Whats the right way to use icons in Avatar?

3. backButton Is there a way to easily add a link to back button? <Link to='/home'></Link>

4. On click of profile, I want to show a Popover, is there a way to do that?

   Like onProfileClick={handleProfileClick}

It would be really helpful if you can give some github code samples or more documentation.

Versions

fiori-fundamentals: 1.7.8 fundamental-react: 0.13.1

---

NOTE: Where applicable, please include uncropped screen captures.

DISCLAIMER: After triaging an issue, the fundamental-react team will see if it can be reproduced or confirmed. If more information is needed, the fundamental-react team will contact the author. Any issues awaiting responses from the author for more than 7 days will be closed. The author can re-open the issue at a later time if they can present the requested information.

[github-actions[bot]]

Hello @ansujohn, thank you for using fundamental-react! The fundamental-react team will triage your issue as soon as possible.

[ansujohn]

I used Shellbar from @ui5/webcomponents-react and it worked with minimal code

import {ShellBar} from '@ui5/webcomponents-react/lib/ShellBar';
import {Avatar} from '@ui5/webcomponents-react/lib/Avatar';
import '@ui5/webcomponents-icons/dist/customer';
import '@ui5/webcomponents-icons/dist/nav-back';

<ShellBar
                logo={<img slot='logo' alt='logo' src='images/sap.png'/>}
                onLogoClick={function noRefCheck() {
                }}
                onProfileClick={handleProfileClick}
                primaryTitle="PRODUCTS"
                profile={<Avatar icon='customer'/>}
                startButton={<Link slot='startButton' to='/home'>
                    <ui5-button icon='nav-back' design='Transparent' style={{'color': 'white'}}
                                slot='startButton'/>
                </Link>}
                slot=""
                style={{'--sapShellColor': 'black'}}
                tooltip=""
            />

I want to port the above code to use fundamental-react.