我正在为一个项目制作一个网站，在页面的主要内容旁边有一个垂直的导航栏。我使用bootstrap制作了两个主栏，一个用于导航栏，另一个用于通过路由显示的其余内容。我给导航栏的栏指定了“固定顶部”类。这（一开始）正确地使导航栏停留在视口的同一位置，而不管我在页面上滚动到哪里。
但是，导航栏现在包含指向登录页面或其个人资料（取决于他们是否登录）的按钮。
为了实现这一点，我尝试在我的navbar函数组件中使用条件渲染。我使用了一个if-else语句，根据用户是否登录来渲染带有登录按钮的整个navbar，或者渲染配置文件和注销按钮，然而，在这样做的过程中，navbar不再固定在视口中，而是沿着页面的其余部分滚动。
是我的实现导致了这个问题吗？还是这是条件渲染固有的问题？我该如何解决这个问题？
我的应用程序功能组件的基本示例

function App() {
    return (
        <Router>
            <div className="App">
                <Container fluid>
                    <Col className="fixed-top">
                        <Navbar />
                    </Col>
                    <Col>
                        <Routes>
                           All of my routing
                        </Routes>
                    </Col>
                </Container>
            </div>
        </Router>
    );
}

export default App;

导航栏功能组件的基本示例

const Navbar = () => {
    A bunch of firebase related stuff to check if the user is logged in
    const auth = getAuth();
    
    const [status, setStatus] = useState({
        status: "signed out"
    })

    useEffect(()=>{
        onAuthStateChanged(auth, (user) => {
            if (user) {
              setStatus({
                status: "signed in"
              });
            } else {
              setStatus({
                status: "signed out"
              });
            }
          });
    }, [])

    if(status.status == "signed out") {
        return (
            <Card>
                Here goes all the stuff in my navbar including the website title and logo
               <ButtonGroup vertical>
                    Here are all the buttons on my navbar including the sign in page button but not 
                    including the your profile page button or logout button
               </ButtonGroup>
            </Card>
        );
    } else {
        return (
            <Card>
                Here goes all the stuff in my navbar including the website title and logo
               <ButtonGroup vertical>
                    Here are all the buttons on my navbar not including the sign in page button but 
                    including the your profile page button or logout button
               </ButtonGroup>
            </Card>
        );
    }
}

export default Navbar;

我尝试了其他几种条件渲染的方法，但似乎都不起作用。提前感谢你的帮助！