Looking to revamp the layout of my angularJS website, specifically one page. Currently, information is displayed in a table format but I would like to switch it up by adding a left sidebar featuring a list of names (tiles). When a user clicks on a name, the right sidebar should dynamically show more details about that specific individual. Any tips or suggestions on how to efficiently achieve this using HTML and CSS would be greatly appreciated.
Below is the basic code snippet I have created so far:
body {
margin: 40px;
}
.lft_sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 120px 120px 120px;
grid-template-areas: "....... header header" "sidebar content content" "footer footer footer";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
}
.header,
.footer {
background-color: #999;
}<div class="wrapper">
<div class="header">Header</div>
<div class="lft_sidebar">Name 1</div>
<div class="lft_sidebar">Name 2</div>
<div class="lft_sidebar">Name 3</div>
<div class="lft_sidebar">Name 4</div>
<div class="rght_sidebar"> More details about Selected Name</div>
</div>