“chakra ui avec menu de humburger” Réponses codées

chakra ui avec menu de 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 avec menu de 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 avec menu de 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 avec menu de 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

Réponses similaires à “chakra ui avec menu de humburger”

Questions similaires à “chakra ui avec menu de humburger”

Parcourir les réponses de code populaires par langue

Parcourir d'autres langages de code

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