“chakra ui dengan menu humburger” Kode Jawaban

chakra ui dengan menu humburger

<Flex>
<Flex position="fixed" top="1rem" right="1rem" align="center">
  {/* Desktop */}
  <Flex>
    <Link href="/" passHref>
      <Button as="a" variant="ghost" aria-label="Home" my={5} w="100%">
        Home
      </Button>
    </Link>

    <Link href="/about" passHref>
      <Button as="a" variant="ghost" aria-label="About" my={5} w="100%">
        About
      </Button>
    </Link>

    <Link href="/contact" passHref>
      <Button as="a" variant="ghost" aria-label="Contact" my={5} w="100%">
        Contact
      </Button>
    </Link>
  </Flex>

  {/* Mobile */}
  <IconButton
    aria-label="Open Menu"
    size="lg"
    mr={2}
    icon={<HamburgerIcon />}
    onClick={}
  />
  <Switch color="green" isChecked={isDark} onChange={toggleColorMode} />
</Flex>
{/* Mobile Content */}
<Flex
  bgColor="gray.50"
  overflowY="auto"
  flexDir="column"
>
  <Flex justify="flex-end">
    <IconButton
      mt={2}
      mr={2}
      aria-label="Open Menu"
      size="lg"
      icon={<CloseIcon />}
      onClick={}
    />
  </Flex>

  <Flex flexDir="column" align="center">
    <Link href="/" passHref>
      <Button as="a" variant="ghost" aria-label="Home" my={5} w="100%">
        Home
      </Button>
    </Link>

    <Link href="/about" passHref>
      <Button as="a" variant="ghost" aria-label="About" my={5} w="100%">
        About
      </Button>
    </Link>

    <Link href="/contact" passHref>
      <Button as="a" variant="ghost" aria-label="Contact" my={5} w="100%">
        Contact
      </Button>
    </Link>
  </Flex>
</Flex>
Girish Chaudhari

chakra ui dengan menu humburger

<IconButton
    aria-label="Open Menu"
    size="lg"
    mr={2}
    icon={
    <HamburgerIcon />
    }
    onClick={() => changeDisplay('flex')} // added line
/>

<Flex
  display={display} // added line
  bgColor="gray.50"
  overflowY="auto"
  flexDir="column"
>

<IconButton
    mt={2}
    mr={2}
    aria-label="Open Menu"
    size="lg"
    icon={
        <CloseIcon />
    }
    onClick={() => changeDisplay('none')} // added line
/>
Girish Chaudhari

chakra ui dengan menu humburger

import React, { useState } from 'react'
import { useColorMode, Switch, Flex, Button, IconButton } from '@chakra-ui/react'
import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons'
import Link from 'next/link'
Girish Chaudhari

chakra ui dengan menu humburger

const [display, changeDisplay] = useState('none')
Girish Chaudhari

Menu Chakra UI

<Menu>
							<MenuButton>
								<Icon as={AiOutlineMore} h='7' w='7' />
							</MenuButton>
							<MenuList padding='0'>
								<MenuItem>Edit</MenuItem>
								<MenuItem
									onClick={() => {
										deleteHeaderFieldMutation.mutate(row.value.id);
									}}
								>
									Delete
								</MenuItem>
							</MenuList>
						</Menu>
Himanshu Jangid

Jawaban yang mirip dengan “chakra ui dengan menu humburger”

Pertanyaan yang mirip dengan “chakra ui dengan menu humburger”

Jelajahi jawaban kode populer menurut bahasa

Jelajahi bahasa kode lainnya

Shell/Bash
C#
C++
C
CSS
HTML
Java
JavaScript
Objective-C
PHP
Python
Sql
Swift
Ruby
TypeScript
Go
Kotlin
Assembly
R
VBA
Scala
Rust
Dart
Elixir
Clojure
Haskell
Matlab
Erlang
Cobol
Fortran
Scheme
Perl
Groovy
Lua
Julia
Delphi
Abap
Lisp
Prolog
Pascal
ActionScript
Basic
Solidity
PowerShell
GDScript
Excel