body {
    padding: 0;
    height: 100vh;
    width: 100vw;

    display: flex;

    .sidebar-open {
        width: 15%;
    }
    .sidebar-close{
        width: 0px;
        cursor: pointer;
    }

    .sidebar-footer,
    .sidebar-header {
        display: flex;
        align-items: center;
        gap: 1rem;

        cursor: pointer;
         &:hover {
            background-color: var(--muted);
        }
    }

    .sidenav-links {
        display: flex;
        flex-direction: column;
        margin-bottom: 2.5rem;
        gap: 0.3rem;
        align-items: flex-start;
    }

    .sidenav-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        padding-bottom: 0;
    }

    .htmx-indicator {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    #main-content {
        width: 100%;

        overflow: auto;
    }
}