The side bar contains navigational links or menu. It also contains close icon to close the sidebar.
First, set the background color, text color, and width of the sidebar.
.ampstart-sidebar {
background-color: #fff;
color: #000;
width: 300px
}
Add the right and left padding.
.px3 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
Final code will be:
<amp-sidebar id="header-sidebar" class="ampstart-sidebar px3" layout="nodisplay">
</amp-sidebar>
To add the close icon:
Change the size of close icone.
.ampstart-navbar-trigger {
font-size: 2rem
}
<div class="flex justify-start items-center ampstart-sidebar-header">
<div role="button" aria-label="Close Sidebar" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger items-start">✕</div>
</div>