Prevent the double lightning header while navigation to Lightning Web Component

Question

I have a Lightning web component which doesn't fit in the half-sized modal popup screen but I need to open it from the action on the record page.

I have found an interesting idea about how this can be implemented.

This is the auraQuickAction.html listing

<aura:component implements="flexipage:availableForAllPageTypes,force:lightningQuickAction,force:hasRecordId,force:hasSObjectName" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.onInit}" /> 
    <lightning:navigation aura:id="navService"/>
</aura:component>   

This is auraQuickActionController.js listing

({
    onInit : function(cmp) {
        var navService = cmp.find("navService");
        var compDefinition = {
            componentDef: "c:createFromRecord",
            attributes: {
                recordId: cmp.get('v.recordId'),
                objectApiName: cmp.get('v.sObjectName')
            }
        };
        // Base64 encode the compDefinition JS object
        var encodedCompDef = btoa(JSON.stringify(compDefinition));

        var pageReference = {
            type: 'standard__webPage',
            attributes: {
                url: '/one/one.app#' + encodedCompDef
            }
        }
        navService.navigate(pageReference);
    }
})

The component is opened, however, the double lightning header is shown, which I want to avoid.

Answer 1

Looks like that it is enough to replace the line navService.navigate(pageReference); with line

window.location.href = '/one/one.app#' + encodedCompDef;

and this will work like a charm.

Also, pageReference variable is no longer needed.

({
    onInit : function(cmp) {
        var navService = cmp.find("navService");
        var compDefinition = {
            componentDef: "c:createFromRecord",
            attributes: {
                recordId: cmp.get('v.recordId'),
                objectApiName: cmp.get('v.sObjectName')
            }
        };
        // Base64 encode the compDefinition JS object
        var encodedCompDef = btoa(JSON.stringify(compDefinition));

        window.location.href = '/one/one.app#' + encodedCompDef;
    }
})