Skip to main content

​
API Endpoints

The backend provides the following endpoints for managing footer menu links.
  • Endpoint: GET /admin/footer-menu
  • Description: Retrieves all footer menu links, sorted by their order.
  • Response: 
    [
  {
    "_id": "menu-id",
    "label": "About Us",
    "url": "/about",
    "order": 1,
    "isActive": true
  },
  {
    "_id": "menu-id-2",
    "label": "External Site",
    "url": "https://example.com",
    "order": 2,
    "isActive": false
  }
]
  • Endpoint: POST /admin/footer-menu
  • Description: Creates a new footer menu link.
  • Request Body: 
    {
  "label": "Contact",
  "url": "/contact",
  "order": 3,
  "isActive": true
}
  • Response: 
    {
  "_id": "menu-id-3",
  "label": "Contact",
  "url": "/contact",
  "order": 3,
  "isActive": true
}
  • Endpoint: PUT /admin/footer-menu/{id}
  • Description: Updates an existing footer menu link.
  • Request Body: 
    {
  "label": "New Label",
  "url": "/new-slug",
  "order": 1,
  "isActive": false
}
  • Response: 
    {
  "_id": "menu-id",
  "label": "New Label",
  "url": "/new-slug",
  "order": 1,
  "isActive": false
}
  • Endpoint: DELETE /admin/footer-menu/{id}
  • Description: Deletes a footer menu link permanently.
  • Response: 
    {
  "message": "Footer menu link deleted successfully"
}

​
Frontend Implementation

To fetch and display footer menu links: 
useEffect(() => {
  axios.get(`${import.meta.env.VITE_BASE_URL}/admin/footer-menu`)
    .then(response => setLinks(response.data))
    .catch(error => console.error("Error fetching footer links", error));
}, []);

const handleSubmit = async (e) => {
  e.preventDefault();
  const method = editingId ? "put" : "post";
  const url = editingId ? `/admin/footer-menu/${editingId}` : "/admin/footer-menu";
  
  await axios[method](`${import.meta.env.VITE_BASE_URL}${url}`, form)
    .then(() => {
      setForm({ label: "", url: "", order: 0, isActive: true });
      setEditingId(null);
      fetchLinks();
    })
    .catch(error => console.error("Error saving footer link", error));
};

​
Active/Inactive Status Display

<div className="flex items-center space-x-2">
  {link.isActive ? (
    <span className="text-green-600 font-medium">Active</span>
  ) : (
    <span className="text-red-500 font-medium">Inactive</span>
  )}
</div>

​
Conclusion

The Footer Menu Management system allows full control over website footer links. Administrators can dynamically update, add, and remove links, ensuring seamless navigation for users. Internal and external links are supported, and visibility can be controlled via the isActive flag.