Create expandable offcanvas if multiple page is created under dash.register_page

Hi,

How to create expandable side bar similar to this, but multiple page is created under the dash.register_page.

Code:

app.py

sidebar = dbc.Nav(
        [
            dbc.NavLink(
                [
                    html.Div(page["name"], className="ms-2"),
                ],
                href=page["path"],
                active="exact",
            )
            for page in dash.page_registry.values()
        ],
        vertical=True,
        pills=True,
        className="bg-light",
        # style=SIDEBAR_STYLE,
)



app.layout = dbc.Container([
        html.Div([
               dbc.Button(html.I(className ="bi bi-list"), #"Menu",
               id="open-offcanvas", n_clicks=0),
              
             dbc.Offcanvas([
                 dcc.Location(id="url"),
                sidebar,
                content
                ],
         
            id="offcanvas",
            title="Welcome to .../",
            is_open=False,
             ),
       ]),


dbc.Row([
    dbc.Col(html.Div("Tes",
                     style={'fontSize':50, 'textAlign':'center'}))
]),

html.Hr(),

dbc.Row([
         dbc.Col([
                dash.page_container
            ], xs=8, sm=8, md=10, lg=10, xl=10, xxl=10)
    ]
)
], fluid=True)

page1.py

dash.register_page(__name__,
               path='/',  # '/' is home page and it represents the url
               name='Home',  # name of page, commonly used as name of link
               title='Main',  # title that appears on browser's tab
               # image='pg1.png',  # image in the assets folder
               # description='Histograms are the new bar charts.'

)

# page 1 data
layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.H1('Welcome to ...', className = 'text-center text-primary, mb-4 '
                    ,style={'font-weight': 'bold'}),
        ]),
    ]),