Navigation Components

<!-- Basic Navigation Container -->
<c-nav.container>
  <c-nav.item icon="home">Home</c-nav.item>
  <c-nav.item icon="person">Profile</c-nav.item>
  <c-nav.item icon="settings">Settings</c-nav.item>
</c-nav.container>

<!-- With Header and Footer -->
<c-nav.container>
  <c-slot name="header">
    <div class="flex items-center mb-2">
      <span class="material-symbols mr-2">dashboard</span>
      <span class="font-medium">Dashboard</span>
    </div>
  </c-slot>
  
  <c-nav.item icon="home">Home</c-nav.item>
  <c-nav.item icon="person">Profile</c-nav.item>
  
  <c-slot name="footer">
    <div class="flex items-center">
      <span class="material-symbols mr-2">account_circle</span>
      <span>User Profile</span>
    </div>
  </c-slot>
</c-nav.container>

<!-- Base Page Integration -->
{% extends 'material/base_page.html' %}

{% block nav_header %}
  <div class="flex items-center mb-2">
    <span class="material-symbols mr-2">dashboard</span>
    <span class="font-medium">My App</span>
  </div>
{% endblock nav_header %}

{% block nav_items %}
  <c-nav.item icon="home">Home</c-nav.item>
  <c-nav.item icon="person">Profile</c-nav.item>
{% endblock nav_items %}

{% block nav_footer %}
  <div class="flex items-center">
    <span class="material-symbols mr-2">account_circle</span>
    <span>User Profile</span>
  </div>
{% endblock nav_footer %}