Mobile Side Panel Overlap fixed

[Girish0902]

Pull Request Summary

Briefly describe what this PR accomplishes and why it’s needed.
Fixes an issue where the mobile side-panel navigation was clipped and partially obscured by the sticky header on small screens. The problem was caused by the header creating a localized stacking/containing context due to its backdrop-filter property, paired with the fact that the mobile nav panel lived inside the header container within the DOM tree.

Reference any related issues (e.g., Fixes #12).
Fixes: Mobile side panel overlap in the Attendance screen.

---

Changes Introduced

List the key changes made in this PR:

• DOM Teleportation: Updated script logic to move .nav-links completely out of the header block and into the root document.body framework on mobile viewports, smoothly restoring it back during desktop screen resizes.
• State Class Hooks: Added a body.nav-open state utility class toggle to dynamically alter header styles whenever the mobile side menu overlay triggers active.
• Containing Context Clear: Conditionally disabled the header's CSS backdrop-filter rules while the mobile navigation pane remains open, preventing the browser from trapping fixed-position children under the header bounds.
• Z-Index Correction: Raised the layering priorities of .nav-overlay and the active mobile .nav-links structure to clearly map them comfortably above the header surface stack.
• Adaptive Layout Handling: Refined the navigation setup and structural window event resize loops to ensure the pristine desktop presentation remains completely unbroken.

---

Screenshots / Demo (for UI changes)

If applicable, include before-and-after visuals to illustrate the impact.

| Before |

| After |

---

Checklist

Please ensure the following before requesting review:

• Code follows project conventions and best practices.
• Feature or fix works correctly on both mobile and desktop (Tested in DevTools).
• No new console errors or accessibility regressions.
• Documentation updated if applicable.
• Visuals attached for UI-related updates.

---

Additional Notes

Add any relevant context, design considerations, or follow-up tasks here.

• Crucial performance fix for the SmartAttend layout dashboard wrapper.
• Isolating mobile-only nodes directly in document.body avoids structural stacking bugs without breaking semantic layout requirements for accessibility screen readers.

[github-actions]

📥 Pull Request Received

Thank you for your contribution to College Daddy. Your pull request has been received and is currently under review.

🔗 Linked Issues

• FEAT: Enable Student Contribution Feature #12: FEAT: Enable Student Contribution Feature

✅ Pre-Merge Checklist

Please ensure the following requirements are met:

• Changes adhere to contribution guidelines
• Related issues are referenced in description
• All changes tested and verified locally
• Code follows project standards

👤 Reviewer Assigned

@mugenkyou has been assigned to review this pull request.

---

Our team will review your submission shortly. We appreciate your effort in improving the platform for students.

[Girish0902]

@mugenkyou , I have successfully resolve the issue plz check it and add labels nsoc level 2