.sidebar {
    width: 250px;
    background: #fff;
    height: 100vh;
    overflow-y: auto;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;

    &.left {
        float: left;
    }

    &.right {
        float: right;
        direction: rtl;
    }

    &.hidden-left {
        transform: translateX(-100%);
    }

    &.hidden-right {
        transform: translateX(100%);
    }

    .sidebar-content {
        padding: 1rem;

        .user-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 1.5rem;

            .avatar {
                width: 70px;
                height: 70px;
                border-radius: 50%;
                object-fit: cover;
            }

            .username {
                margin-top: 0.5rem;
                font-weight: bold;
            }
        }

        .sidebar-nav {
            .nav-link {
                display: flex;
                align-items: center;
                padding: 0.75rem 1rem;
                border-radius: 8px;
                transition: background 0.2s;
                color: #333;
                text-decoration: none;

                &:hover {
                    background-color: #f0f0f0;
                }

                .icon {
                    margin-inline-end: 0.5rem;
                }
            }

            .nav-sublink {
                display: block;
                margin: 0.25rem 0 0.25rem 1rem;
                font-size: 0.9rem;
                color: #666;

                &:hover {
                    color: #000;
                }
            }
        }
    }
}