### File

`projects/commons/src/lib/shared/modules/user-info/components/user-info.component.ts`

### Metadata

selector | `b2c-user-info`
styleUrls | `./user-info.component.scss`
templateUrl | `./user-info.component.html`

    import { Component } from '@angular/core';

    @Component({
        selector: 'b2c-user-info',
        templateUrl: './user-info.component.html',
        styleUrls: [ './user-info.component.scss' ],
    })

    export class UserInfoComponent {}

    <cmn-nav-bar color="is-dark">
        <div class="navbar-menu">
            <div class="navbar-start">
                <a [routerLink]="['/sign', 'in']"
                   class="navbar-item">
                    Login
                </a>
                <a [routerLink]="['/sign', 'up']"
                   class="navbar-item">
                    Register
                </a>
            </div>
            <div class="navbar-end">
                <cmn-lang-picker></cmn-lang-picker>
            </div>
        </div>
    </cmn-nav-bar>

`./user-info.component.scss`

    @import "../../../../../assets/styles/settings/_colors";

    :host {
        ::ng-deep {
            cmn-nav-bar {
                .navbar {
                    min-height: 0;
                    height: 40px;

                    .container {
                        min-height: 0;
                    }

                    .navbar-item {
                        padding-left: 0;
                        margin-right: 2em;
                        text-transform: uppercase;

                        &:hover {
                            color: $primary !important;
                            background-color: transparent !important;
                        }
                    }

                    cmn-lang-picker {
                        cmn-dropdown {
                            .dropdown-trigger {
                                button {
                                    background-color: transparent;
                                    color: white;
                                    font-weight: 100;
                                    text-transform: uppercase;
                                }
                            }

                            .dropdown-menu {
                                min-width: 0;

                                .dropdown-content {
                                    border-radius: 0;
                                    background-color: #444444;

                                    .dropdown-item {
                                        color: white;
                                        font-size: 12px;
                                        padding: 1em 1.5em;
                                        text-transform: uppercase;

                                        &:hover {
                                            background-color: transparent;
                                            color: $primary;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""