CSS Grid - Content overlapping issue - css

Question

Is it possible to create the following layout using CSS grid?
The layout itself is pretty straightforward. Here's what I have so far:
HTML:
<div class="sidebar__wrapper">
<div class="sidebar__item mb-1" [class.mt-3]="item.options.length"
*ngFor="let item of sidebarItems; let first = first;">
<div class="sidebar__icon ark-cursor-pointer" [class.align-self]="item.options.length" (click)="item.isExpand = !item.isExpand">
<img [src]="item.icon" alt="icon" [class.valign--middle]="item.options.length">
</div>
<div class="sidebar__label font--14">
<div *ngIf="!showItemTitle"></div>
<a class="sidebar__header pl-1" [routerLink]="item.stateName" [class.font--light]="!item.options.length" [ngClass]="{'font--11 text-uppercase sidebar__header--blue' : item.options.length}" (click)="item.isExpand = !item.isExpand"
*ngIf="showItemTitle">{{ 'Sidebar.' + item.property + '.Title' | translate}}</a>
<ng-container *ngFor="let subItem of item.options; let first = first">
<a class="sidebar__subheader pl-1" [routerLink]="subItem.stateName" [class.mt-2]="first"
*ngIf="showItemTitle && item.isExpand" [ngClass]="hasActiveChild(subItem)"><span>{{ 'Sidebar.' + item.property +'.'+ subItem.subtitle | translate}}</span></a>
</ng-container>
</div>
</div>
CSS:
.sidebar__wrapper,
.sidebar__item,
.sidebar__label {
display: grid;
}
.sidebar__wrapper {
align-items: flex-start;
grid-template-columns: 100%;
}
.sidebar__item {
/* grid-template-columns: 20px auto 20px; */
grid-template-columns: 20px auto;
margin: 0 15px 0 8px;
align-items: center;
column-gap: 5px;
}
.sidebar__label {
align-items: center;
row-gap: .5rem;
grid-template-columns: 100%;
grid-auto-rows: 23px;
}
.font--14 {
font-size: 14px;
}
.font--11 {
font-size: 11px;
}
.sidebar__header {
font-weight: var(--bold-font-weight);
}
.sidebar__subheader {
font-weight: var(--light-font-weight);
}
.sidebar__icon {
justify-self: center;
}
.sidebar__icon img {
height: 15px;
width: auto;
vertical-align: unset;
}
#side-bar a {
text-decoration: none;
list-style-type: none;
color: #FFFFFF;
}
#side-bar .active-text-bold {
background-color: rgba(104, 131, 158, 0.31);
border-radius: 5px;
padding: .25em .125rem;
width: calc(100% + 5px);
}
.align-self {
align-self: flex-start;
}
.valign--middle {
vertical-align: middle !important;
}
.sidebar__header--blue {
color: rgba(111,140,169, 0.8) !important;
}
The object sidebarItems looks as such:
const sidebarItems = [
{
icon: 'assets/images/icon/sidebar_time.png',
isExpand: false,
title: 'Gestion du temps',
property: 'TimeManagement',
stateName: '/time/stats',
options: [
{
subtitle: 'AccountChart',
stateName: '/accounting/accounts'
}
]
},
{
icon: 'assets/images/icon/sidebar_contacts.png',
property: 'Contact',
isExpand: true,
stateName: '/contacts/list',
options: []
}
];
hasActiveChild(item) {
let className = '';
if (location.pathname.includes(item.stateName)) {
className = 'active-text-bold';
}
return className;
}
The above code creates the following layout:
However, I'm unable to re-create the spacing on the left of each sub-item.
I've tried to name the grid lines and set the grid-column: 2/4. It somehow messes up the layout.
If you have some ideas on how I can solve this issue, please let me know. Thank you.
Thanks.

Answer 1

Please look into the CSS padding property.
In your case, adding a left padding to the links should do.
Try this:
.sidebar__item {
/* grid-template-columns: 20px auto 20px; */
grid-template-columns: 20px auto;
margin: 0 15px 0 8px;
align-items: center;
column-gap: 5px;
padding-left: 5px;
}