add dynamic is-active for nav

This commit is contained in:
Jackzie 2025-04-15 15:53:28 -05:00
parent e4870bf88e
commit f342f693db
10 changed files with 78 additions and 16 deletions

View file

@ -0,0 +1,10 @@
{{#> layouts/main }}
<div class="content">
<h4>Credits</h4>
<ul>
<li><a href="https://www.flaticon.com/free-icons/default" title="default icons">Default icons created by kliwir art -
Flaticon</a></li>
</ul>
</div>
{{/layouts/main}}

View file

@ -11,6 +11,7 @@
<link rel="stylesheet" href="/static/css/bulma.min.css">
<link href="/static/icons/css/fontawesome.css" rel="stylesheet" />
<link href="/static/icons/css/solid.css" rel="stylesheet" />
<link href="/static/icons/css/regular.css" rel="stylesheet" />
<link href="/static/icons/css/brands.css" rel="stylesheet" />
</head>
<body>

View file

@ -25,10 +25,29 @@
</div>
</div>
<div class="navbar-item">
Bell
<a class="icon">
<i class="far fa-bell"></i>
<span class="ml-2" >0</span>
</a>
</div>
<div class="navbar-item">
User
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
<img src="/static/img/default_user.png" alt="User Image" />
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/help/about">
About
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
</nav>

View file

@ -1,13 +1,13 @@
<aside class="sidebar pl-0 mb-0">
<p class="sidebar-header">Workspace</p>
<ul class="sidebar-list">
<li class="is-active"><a href="#"><i class="fa fa-file"></i> Files</a></li>
<li><a href="#"><i class="fas fa-heart"></i> Favorites</a></li>
<li><a href="#"><i class="fas fa-clock"></i> Activities</a></li>
<li class="{{is-active-exact route '/'}} {{is-active route '/library'}}"><a href="/"><i class="fa fa-file"></i> Files</a></li>
<li class="{{is-active route '/favorites'}}"><a href="/favorites"><i class="fas fa-heart"></i> Favorites</a></li>
<li class="{{is-active route '/activity'}}"><a href="/activity"><i class="fas fa-clock"></i> Activities</a></li>
</ul>
<p class="sidebar-header">Help</p>
<ul class="sidebar-list">
<li><a href="#">Help</a></li>
<li><a href="#">About</a></li>
<li class="{{is-active-exact route '/help'}}"><a href="/help">Help</a></li>
<li class="{{is-active route '/help/about'}}"><a href="/help/about">About</a></li>
</ul>
</aside>