you can add a condition with pathname to showing the component or not

something like this:

const router = useRouter():

return (
   ...
   {router.pathname !== '/login' && <Sidebar path={router.route} />}
   ...
)

If you have some pages that are protected and can be seen by logged in user than you would need Public and Protected Routes and you can show in your Public routes only

If this is not the case then solution mentioned by @kaveh karami is good

I would create a HOC(Higher-Order-Component) called WithSidebar:

import Main from '../../components/Main/Main';
import Sidebar from '../../components/Sidebar/Sidebar';
import classes from './WithSidebar.module.scss';

const WithSidebar = (Component) => {

    return props => (
        <div className={classes.WithSidebar}>
            <Sidebar />
            <Main className={classes.Container}>
                <Component {...props} />
            </Main>
        </div>
    );
};

export default WithSidebar;

And then export the pages that should include the sidebar like so:

import WithSidebar from '../hoc/WithSidebar/WithSidebar';

const MyPage = () => {

    return (...)
}

export default WithSidebar(MyPage)

I find this approach really cleaner than conditionally rendering based on the pathname.