Magento – Magento 2.2.2 – Display Customer Account header dropdown and remove Sign Out link post login

custom-themecustomerlayoutmagento2xml

After successful login, Luma theme shows customer account details in dropdown on header as seen in below image

enter image description here

I need to replicate the same in our custom theme which has Blank as its parent.

Vendor/Theme/Magento_Theme/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
       <referenceContainer name="header.panel">     
       <block class="Magento\Framework\View\Element\Html\Links" name="header.links">
                <arguments>
                    <argument name="css_class" xsi:type="string">header links</argument>
                </arguments>
        </block>
       </referenceContainer>
    </body>
</page>

Vendor/Theme/Magento_Customer/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="header.links">
            <block class="Magento\Customer\Block\Account\Customer" name="customer" template="Magento_Customer::account/customer.phtml" before="-"/>
            <block class="Magento\Customer\Block\Account\AuthorizationLink" name="authorization-link-login" template="Magento_Customer::account/link/authorization.phtml">
            </block>
        </referenceBlock>

        <move element="top.links" destination="customer"/>
    </body>
</page>

Vendor/Theme/Magento_Customer/templates/account/customer.phtml

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile
/** @var Magento\Customer\Block\Account\Customer $block */
?>
<?php if($block->customerLoggedIn()): ?>
    <li class="customer-welcome">
        <span class="customer-name"
              role="link"
              tabindex="0"
              data-mage-init='{"dropdown":{}}'
              data-toggle="dropdown"
              data-trigger-keypress-button="true"
              data-bind="scope: 'customer'">
            <span data-bind="text: customer().fullname"></span>
            <button type="button"
                    class="action switch"
                    tabindex="-1"
                    data-action="customer-menu-toggle">
                <span><?= $block->escapeHtml(__('Change')) ?></span>
            </button>
        </span>
        <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                        "customer": {
                            "component": "Magento_Customer/js/view/customer"
                        }
                    }
                }
            }
        }
        </script>
        <?php if($block->getChildHtml()):?>
        <div class="customer-menu" data-target="dropdown">
            <?= $block->getChildHtml() ?>
        </div>
        <?php endif; ?>
    </li>
<?php endif; ?>

Here, when user is not logged in, I can see Sign In link but after user logs in I can see sign-out in user account dropdown on header as well as besides it. How do I resolve this?

Best Answer

Add this to your css file:

.header.panel>.header.links>.customer-welcome+.authorization-link { display: none; }

Related Topic