Navigation Bar

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
└── 📁src
    └── App.css
    └── App.tsx
    └── 📁assets
        └── logo.webp
        └── react.svg
    └── 📁components
        └── NavBar.tsx
    └── index.css
    └── main.tsx
    └── vite-env.d.ts
NavBar.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import { HStack, Image, Text } from "@chakra-ui/react";
import logo from "../assets/logo.webp";

const NavBar = () => {
  return (
    <HStack>
      <Image src={logo} boxSize="60px" />
    </HStack>
  );
};

export default NavBar;
App.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { Grid, GridItem, Show } from "@chakra-ui/react";
import NavBar from "./components/NavBar";

function App() {
  return (
    <Grid
      templateAreas={{
        base: `"nav" "main"`,
        lg: `"nav nav" "aside main"`,
      }}
    >
      <GridItem area="nav">
        <NavBar />
      </GridItem>
      <Show above="lg">
        <GridItem area="aside" bg="gold">
          Aside
        </GridItem>
      </Show>
      <GridItem area="main" bg="dodgerblue">
        Main
      </GridItem>
    </Grid>
  );
}

export default App;

2024-07-12 23:17 2024-07-13 00:08

评论