<div class="content-panel">
<div class="nav">
<h1>Categories:</h1>
<div class="links">
<? foreach($categories as $category) { ?>
<a href="/cat/<?= $category->id ?>"><?= e($category->name) ?></a>
<? } ?>
</div>
</div>
css:
.content-panel .nav {
width: 170px;
margin: 1em;
align-self: flex-start;
}
.content-panel .nav .links {
background: #d8d8d8;
padding: .5em 0;
}
.content-panel .nav h1 {
font-weight: bold;
padding: 0.8em;
color: white;
background: #666666;
}
.content-panel .nav a {
display: block;
padding: .4em;
text-align: left;
font-weight: bold;
color: #696e74;
margin: 0 1em;
transition: all .35s ease .0s;
}
.content-panel .nav a:hover {
color: #3d4043;
margin-right: 1.5em;
margin-left: 0.5em;
}
<? foreach($categories as $category) : ?>
<? if ($currentPage == $category->id) : ?>
<a href="/cat/<?= $category->id ?>" class="currentPageClass"><?= e($category->name) ?></a>
<? else : ?>
<a href="/cat/<?= $category->id ?>"><?= e($category->name) ?></a>
<? endif; ?>
<? endforeach; ?>