For my project, I am working on creating a straightforward Navigation bar using Chakra UI and Next JS. The goal is to have an svg logo positioned at the top-left, while the menu and UI buttons are aligned to the top-right. However, I'm facing challenges with the justify property not behaving as expected, and even including a <Spacer /> component doesn't seem to make a difference despite being present in the DOM.
I have been following tutorials on YouTube, adjusting the display values between none and flex based on breakpoints, but I can't seem to get the positioning of the nav bar elements right.
Currently, all my logo and menu items are aligned to the left, and no matter what I try, their positioning remains unchanged.
UPDATE: I found that specifying a pixel value for margin left works, but using margin-left: auto does not have any effect.
import { useColorMode, IconButton, Flex, Button, Spacer } from "@chakra-ui/react";
import { SunIcon, MoonIcon, HamburgerIcon, CloseIcon } from "@chakra-ui/icons"
import NextLink from 'next/link'
import { useState } from "react"
import styled from "@emotion/styled";
import SiteLogo from "./Logo"
const DarkModeSwitch = () => {
const { colorMode, toggleColorMode} = useColorMode()
const [display, changeDisplay] = useState("none")
const iconColor = {
light: 'black',
dark: 'white'
}
const navHoverBg = {
light: 'gray.600',
dark: 'gray.300'
}
const bgColor = {
light: 'white',
dark: '#171717'
}
const color = {
light: 'black',
dark: 'white'
}
const StickyNav = styled(Flex)`
position: sticky;
z-index: 10;
top: 0;
backdrop-filter: saturate(180%) blur(20px);
transition: height .5s, line-height .5s;
`
return(
<StickyNav
flexDir="row"
justifyContent="space-between"
alignItems="center"
maxWidth="1000px"
midWidth="max-content"
width="100%"
bg={bgColor[colorMode]}
color={color[colorMode]}
as="nav"
px={[2, 6, 6]}
py={2}
mt={8}
mb={[0, 0, 8]}
mx="auto"
>
<Flex
align="center"
>
<SiteLogo />
<Flex
display={['none', 'none', 'flex', 'flex']}
justify="flex-end"
>
<NextLink href="/" passHref>
<Button as="a" variant="ghost" p={[1, 2, 4]} _hover={{backgroundColor: navHoverBg[colorMode]}}>
Home
</Button>
</NextLink>
<NextLink href="/map" passHref>
<Button as="a" variant="ghost" p={[1, 2, 4]} _hover={{ba...