FastAPI and HTML

I’m trying to embed a sidebar in several HTML files, but I’m not succeeding. I’m using FastAPI, HTML, CSS and JS. Here is the template of what I’m trying to do, but only getting 404 not found for sidebar.html.

Here is the login.py:

from fastapi import FastAPI, APIRouter, Form, Depends, Request
from fastapi.responses import RedirectResponse, HTMLResponse
from fastapi.staticfiles import StaticFiles
from starlette import status
import os

from app.services.login import Login
from app.db.conn import users
from app.utils.cookie_auth import get_user_hash_from_auth_cookie, remove_auth, set_auth

app = FastAPI()

# Montando arquivos estáticos
app.mount("/static", StaticFiles(directory="app/static"), name="static")
app.mount("/template", StaticFiles(directory="app/template", html = True), name="template")

router = APIRouter()

@router.get("/", response_class=HTMLResponse)
async def main_page(request: Request):
    if get_user_hash_from_auth_cookie(request):
        return RedirectResponse(url="/home")
    else:
        with open("app/template/html/login.html") as f:
            content = f.read().replace("{{ error_message }}", "")
            return HTMLResponse(content=content)


@router.get("/login", response_class=HTMLResponse)
async def login_form(request: Request):
    with open("app/template/html/login.html") as f:
        content = f.read().replace("{{ error_message }}", "")
        return HTMLResponse(content=content)


@router.post("/login")
async def login(request: Request, username: str = Form(...), password: str = Form(...), db=Depends(users)):
    service = Login(request, db)
    try:
        user = service.get_user(username)

        if user["password"] == password:
            response = RedirectResponse(url="/", status_code=status.HTTP_302_FOUND)
            set_auth(response, username, user["privilages"])
            return response
        else:
            # Exibir erro de senha incorreta
            with open("app/template/html/login.html") as f:
                content = f.read().replace("{{ error_message }}", "Senha incorreta")
                return HTMLResponse(content=content)
    except Exception as e:
        print(e)
        # Exibir erro de usuário não encontrado
        with open("app/template/html/login.html") as f:
            content = f.read().replace("{{ error_message }}", "Usuário não encontrado")
            return HTMLResponse(content=content)


@router.get("/home", response_class=HTMLResponse)
async def home(request: Request):
    if not get_user_hash_from_auth_cookie(request):
        return RedirectResponse(url="/login", status_code=status.HTTP_302_FOUND)

    with open("app/template/html/home.html") as f:
        return HTMLResponse(content=f.read())


@router.get("/logout")
async def logout():
    response = RedirectResponse(url="/login", status_code=status.HTTP_302_FOUND)
    remove_auth(response)
    return response

app.include_router(router)

Here is the sidebar.html:

<!-- sidebar.html -->
<div class="sidebar">
    <div class="sidebar-header">
        <img src="/static/images/logo.png" alt="Logo" class="logo">
    </div>
    <ul class="sidebar-menu">
        <li class="menu-item">
            <a href="#">
                <i class="fas fa-home"></i> Painel
            </a>
        </li>
        <li class="menu-item">
            <a href="#">
                <i class="fas fa-envelope"></i> Mensagens
            </a>
        </li>
        <li class="menu-item">
            <a href="#">
                <i class="fas fa-search"></i> Pesquisas
            </a>
        </li>
        <li class="menu-item">
            <a href="#">
                <i class="fas fa-paper-plane"></i> Disparos
            </a>
        </li>
        <li class="menu-item">
            <a href="#">
                <i class="fas fa-check-square"></i> Auditoria
            </a>
        </li>
        <li class="menu-item">
            <a href="#">
                <i class="fas fa-shopping-cart"></i> Vendas
            </a>
        </li>
        <li class="menu-item">
            <a href="#">
                <i class="fas fa-exchange-alt"></i> Negociações
            </a>
        </li>
    </ul>
</div>

Here is home.html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Painel SCC - Home</title>
    <link rel="stylesheet" href="/static/css/home.css">
    <link rel="stylesheet" href="/static/css/sidebar.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div id="sidebar-placeholder"></div>
    <div class="content">
        <!-- Seu conteúdo principal vai aqui -->
    </div>

    <!-- Importando o arquivo JavaScript -->
    <script src="/static/js/sidebar.js"></script>
</body>
</html>

Here is sidebar.js:

document.addEventListener("DOMContentLoaded", function() {
    fetch('/template/html/sidebar.html')
    .then(response => response.text())
    .then(data => {
        document.getElementById('sidebar-placeholder').innerHTML = data;
    });

});