使用 Next.js 布局时，内容显示在侧边栏下方

Question

我正在使用 mantine.dev 为我的应用程序创建侧边栏组件，并使用 next.js 布局来确保它出现在每个页面上。链接工作正常，但实际页面内容显示在侧边栏下方，而不是旁边。如图所示：

这是导航栏组件：

export function NavbarSimple() {
  const { classes, cx } = useStyles();
  const [active, setActive] = useState('Dashboard');

  const items = data.map((item, index) => (   
    <Link href={item.link} passHref style={{textDecoration: 'none'}}>
      <NavLink
        style={{ textDecoration: 'none' }}
        key={item.label}     
        // @ts-ignore
        active={index === active} 
        label={item.label}
        icon={<item.icon size={16} stroke={1.5} />}
        // @ts-ignore
        onClick={() => setActive(index)}

      />   
    </Link>
  ));

  return (
    <Navbar height='100vh' width={{ sm: '28vh' }} p="md" zIndex={0}>
      <Navbar.Section grow>
        <Group className={classes.header} position="apart">         
          <Code sx={{ fontWeight: 700 }}>0.1</Code>
        </Group>
        {items}
      </Navbar.Section>
     
{/* Bottom section Here \/ */}

      <Navbar.Section className={classes.footer}>
        <a href="#" className={classes.item} onClick={(event) => event.preventDefault()}>
          <IconSwitchHorizontal className={classes.linkIcon} stroke={1.5} />
          <span>Change account</span>
        </a>

        <a href="#" className={classes.item} onClick={(event) => event.preventDefault()}>
          <IconLogout className={classes.linkIcon} stroke={1.5} />
          <span>Logout</span>
        </a>
      </Navbar.Section>
    </Navbar>
  );
}

这是布局：

import { NavbarSimple } from "./Navbar/Navbar";



export default function Layout({ children }) {
    return (
      <>
        <NavbarSimple />
        <main>{children}</main>
          
        
      </>
    )
  }

我尝试过使用 mantine 的 appshell 组件并使用其中的导航栏，但我不太确定在使用 appshell 时如何更改页面，并且在使用它时它会重新渲染整个页面，所以我使用 next.js布局，但它也不起作用。

Answer 1

尝试类似：

export default function Layout({ children }) {
    return (
        <div>
            <div
                style={{
                    display: "flex",
                    flexDirection: "row"
                }}
            >
                <NavbarSimple />
                <div
                    style={{
                        width: "100%"
                    }}
                >
                    <main>{children}</main>
                </div>
            </div>
        </div>
    )
}

Answer 2

您的页面和导航栏是两个不同的组件，layout.js 将按照代码中提供的方式在每个页面上方呈现导航栏。如果您希望内容在导航栏组件旁边呈现，那么您需要提供

position: relative/absolute

（相应地）和

zIndex:10

。它对我有用；

在您的导航栏组件上尝试此 CSS；

position: absolute/relative;
z-index: 10;