huge updates

templates/components/bottom_nav.html

@@ -0,0 +1,134 @@
+<!-- Bottom Navigation -->
+<div class="bottom-nav">
+  <div class="nav-container">
+    <a href="#" class="nav-item active" data-section="dashboard">
+      <i class="fas fa-home"></i>
+      <span>Dashboard</span>
+    </a>
+    {% if user.designation == 'Teacher' %}
+      <a href="#subjectsSection" class="nav-item" data-section="subjects" onclick="showSection('subjectsSection'); return false;">
+        <i class="fas fa-graduation-cap"></i>
+        <span>Subjects</span>
+      </a>
+      <a href="#" class="nav-item" data-section="schedule">
+        <i class="fas fa-clock"></i>
+        <span>Schedule</span>
+      </a>
+      <a href="#" class="nav-item" data-section="attendance">
+        <i class="fas fa-user-check"></i>
+        <span>Attendance</span>
+      </a>
+      <a href="#" class="nav-item" data-section="leave">
+        <i class="fas fa-calendar-times"></i>
+        <span>Leaves</span>
+      </a>
+      <a href="#" class="nav-item" data-section="notice">
+        <i class="fas fa-bullhorn"></i>
+        <span>Notices</span>
+      </a>
+      <a href="#" class="nav-item" data-section="feedback">
+        <i class="fas fa-star"></i>
+        <span>Feedback</span>
+      </a>
+      <a href="#" class="nav-item" data-section="profile">
+        <i class="fas fa-id-card"></i>
+        <span>Profile</span>
+      </a>
+    {% else %}
+      <a href="#" class="nav-item" data-section="subjects">
+        <i class="fas fa-graduation-cap"></i>
+        <span>Subjects</span>
+      </a>
+      <a href="#" class="nav-item" data-section="routine">
+        <i class="fas fa-calendar-week"></i>
+        <span>Routine</span>
+      </a>
+      <a href="#" class="nav-item" data-section="attendance">
+        <i class="fas fa-user-check"></i>
+        <span>Attendance</span>
+      </a>
+      <a href="#" class="nav-item" data-section="leave">
+        <i class="fas fa-calendar-times"></i>
+        <span>Leaves</span>
+      </a>
+      <a href="#" class="nav-item" data-section="feedback">
+        <i class="fas fa-star"></i>
+        <span>Feedback</span>
+      </a>
+      <a href="#" class="nav-item" data-section="notice">
+        <i class="fas fa-bullhorn"></i>
+        <span>Notices</span>
+      </a>
+      <a href="#" class="nav-item" data-section="profile">
+        <i class="fas fa-id-card"></i>
+        <span>Profile</span>
+      </a>
+    {% endif %}
+    <a href="#" class="nav-item" onclick="document.getElementById('logoutForm').submit(); return false;">
+      <i class="fas fa-sign-out-alt"></i>
+      <span>Logout</span>
+    </a>
+    <form id="logoutForm" method="post" action="{% url 'logout' %}" style="display: none;">
+      {% csrf_token %}
+    </form>
+  </div>
+</div>
+
+<!-- Navigation Styles -->
+<style>
+  .bottom-nav {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: white;
+    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
+    z-index: 1000;
+  }
+
+  .nav-container {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 10px 0;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .nav-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #666;
+    text-decoration: none;
+    font-size: 0.9rem;
+    transition: color 0.3s ease;
+  }
+
+  .nav-item i {
+    font-size: 1.2rem;
+    margin-bottom: 4px;
+  }
+
+  .nav-item.active {
+    color: #3F51B5;
+  }
+
+  .nav-item:hover {
+    color: #3F51B5;
+  }
+
+  @media (max-width: 768px) {
+    .nav-container {
+      padding: 8px 0;
+    }
+    
+    .nav-item {
+      font-size: 0.8rem;
+    }
+    
+    .nav-item i {
+      font-size: 1rem;
+    }
+  }
+</style>