Collapse the title for the Sider in the layout

[stephanie-rimel]

I am using this Sider version of the layout and I want my Logo and Title to collapse like the Menu does, where it removes the text and just shows the icon. Right now the collapse option only is working on the Menu items. How can I change this?

Here is the code, it is taken from the Sider layout from the ant blazor component page here https://antblazor.com/en-US/components/layout
it is the sider layout, and out of the box, there is no functionality to collapse the title.

@using AntDesign
@inherits LayoutComponentBase
<Layout>
    <Sider @bind-Collapsed=@collapsed NoTrigger OnCollapse="OnCollapse">
        <div class="logo-collapsed" id="logo-collapsed" aria-hidden="true" role="menuitem">
            <img id="img" class="img" src="assets/logo1.png"/>
            <h1 class="logoText" id="logoText">Cointrader</h1>
        </div>
        <Menu Theme="MenuTheme.Light" Mode="MenuMode.Inline" DefaultSelectedKeys=@(new[] {"1"})>
            <MenuItem Key="1">
                <Icon Type="radar-chart" Theme="outline"/>
                <span>Dashboard</span>
            </MenuItem>
            <MenuItem Key="2">
                <Icon Type="dollar-circle" Theme="outline"/>
                <span>Trades</span>
            </MenuItem>
            <MenuItem Key="3">
                <Icon Type="fire" Theme="outline"/>
                <span>Crypto</span>
            </MenuItem>
            <MenuItem Key="4">
                <Icon Type="sketch" Theme="outline"/>
                <span>Webhooks</span>
            </MenuItem>
        </Menu>
    </Sider>
    <Layout Class="site-layout">
        <Header Class="site-layout-background">
            @if (collapsed)
            {
                <Icon Type="menu-unfold" Theme="outline" Class="trigger" OnClick="toggle"/>
            }
            else
            {
                <Icon Type="menu-fold" Theme="outline" Class="trigger" OnClick="toggle" />
            }
        </Header>
        <Content Class="site-layout-background" Style="margin: 24px 16px;padding: 24px;min-height: 280px;">
            Content
        </Content>
    </Layout>
</Layout>

<script>
    function remove() {
        const element = document.getElementById('logoText')

        element.classList.remove(element); // reset animation
        void element.offsetWidth; // trigger reflow
        element.classList.add(element); // start animation
    }

</script>




@code{
    bool collapsed;

    void toggle()
    {
        collapsed = !collapsed;
        
    }

    void OnCollapse(bool isCollapsed)
    {
        Console.WriteLine($"Collapsed: {isCollapsed}");
    }

}