상단메뉴를 펼쳤을때 좌측네비바에 영향을 줍니다ㅠㅠ

Question

안녕하세요 css 디자인 초보입니다.css 문제인지 js 문제인지 모르겠는데,어떻게 하면 좌측네비 메뉴바 영역의 영향을 주지않고상단메뉴의 하위상세메뉴를 펼칠수 있을까요?material-ui 머트리얼 기반으로 추가로 메뉴바를 만들었습니다. DropdownMenu.js import { useState } from "react"; import 'boxicons'; export default function DropdownMenu({ selected, setSelected }) { const [isActive, setIsActive] = useState(false); // 주메뉴 : MyPage, Self-Cusomizing, 회계1, 회계2, 재고1, 재고2, 관리 세무, 그룹웨어 /* [ 상세메뉴 ] MyPage : 주문서조회, 주문서 입력, 판매조회, 판매입력, 판매현황 회계1 : 회계2 : 재고1 : 기초 등록, 영업관리, 구매관리, 생산/외주, 기타, 출력물 재고2 : A/S관리 , 시리얼/로트No, 품질관리, 계약관리, 이익관리, 오더관리, 수출관리, 쇼핑몰관리, WMS 관리 : 세무 : 그룹웨어 / const options = ["스팸단어", "영업관리", "구매관리", "생산/외주", "기타이동", "출력물"];// const options = ["A/S관리", "시리얼/로트No", "품질관리", "계약관리", "이익관리", "오더관리","수출관리", "쇼핑몰관리", "WMS"]; return ( setIsActive(!isActive)}>{selected} {isActive && ( {options.map((option) => ( { // setSelected(option); setIsActive(false); }} className="dropdown-item"> {option} ))} )} ); } App.css/ DropdownMenu Styles.css */ .dropdown { user-select: none; } .dropdown .dropdown-btn { color: rgb(0, 0, 0); cursor: pointer; } .dropdown .dropdown-content { position: absolute; background: #1976d2; top: 100%; left: 0px; padding: 10px; box-shadow: 2px 2px 6px 6px rgba(0, 0, 0, 0.06); color: rgb(255, 255, 255); display: flex; width: 100%; font-size: 12px; height: 55px; } .dropdown .dropdown-content .dropdown-item { padding: 10px; cursor: pointer; } a::after { content: ''; display: inline-block; position: absolute; left: 50%; bottom: 0; width: 0; height: 5px; margin: 0 -5px; border: 0 solid transparent; border-bottom-color: #fff; border-width: 0 5px 5px 5px; } MiniDrawer.js 입니다 import * as React from 'react'; import { useState } from "react"; import { styled, useTheme } from '@mui/material/styles'; // import { makeStyles } from '@mui/styles'; import Box from '@mui/material/Box'; import MuiDrawer from '@mui/material/Drawer'; import MuiAppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; import List from '@mui/material/List'; import CssBaseline from '@mui/material/CssBaseline'; import Typography from '@mui/material/Typography'; import Divider from '@mui/material/Divider'; import IconButton from '@mui/material/IconButton'; import MenuIcon from '@mui/icons-material/Menu'; import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import ListItem from '@mui/material/ListItem'; import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemText from '@mui/material/ListItemText'; import InboxIcon from '@mui/icons-material/MoveToInbox'; import MailIcon from '@mui/icons-material/Mail'; import DropdownMenu from './DropdownMenu.js'; const drawerWidth = 240; const openedMixin = (theme) => ({ width: drawerWidth, transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen, }), overflowX: 'hidden', }); const closedMixin = (theme) => ({ transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), overflowX: 'hidden', width: calc(${theme.spacing(7)} + 1px), [theme.breakpoints.up('sm')]: { width: calc(${theme.spacing(9)} + 1px), }, }); const DrawerHeader = styled('div')(({ theme }) => ({ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', padding: theme.spacing(0, 1), // necessary for content to be below app bar ...theme.mixins.toolbar, })); const AppBar = styled(MuiAppBar, { shouldForwardProp: (prop) => prop !== 'open', })(({ theme, open }) => ({ zIndex: theme.zIndex.drawer + 1, transition: theme.transitions.create(['width', 'margin'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), ...(open && { marginLeft: drawerWidth, width: calc(100% - ${drawerWidth}px), transition: theme.transitions.create(['width', 'margin'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen, }), }), })); const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })( ({ theme, open }) => ({ width: drawerWidth, flexShrink: 0, whiteSpace: 'nowrap', boxSizing: 'border-box', ...(open && { ...openedMixin(theme), '& .MuiDrawer-paper': openedMixin(theme), }), ...(!open && { ...closedMixin(theme), '& .MuiDrawer-paper': closedMixin(theme), }), }), ); export default function MiniDrawer() { const theme = useTheme(); // const classes = useStyles(); const [open, setOpen] = React.useState(false); const [selected, setSelected] = useState("재고"); // const MenuName = ["MyPage", "Self-Cusomizing", "회계1", "회계2", "재고1", "재고2", "관리", "세무", "그룹웨어"]; const handleDrawerOpen = () => { setOpen(true); }; const handleDrawerClose = () => { setOpen(false); }; const handleClose = () => { setOpen(false); }; const handleToggle = () => { setOpen(!open); }; return ( {selected} {theme.direction === 'rtl' ? : } {['하위메뉴에', '따른', '메뉴명', '구성', '계획'].map((text, index) => ( {index % 2 === 0 ? : } ))} {['메뉴1', '메뉴2', '메뉴3', '메뉴4'].map((text, index) => ( {index % 2 === 0 ? : } ))} 테스트 현재 개발중입니다. 조금만 기다려주시기 바랍니다. ); } 그리고 혹시 "재고" 메뉴 옆에 또다른 메뉴들을 두고싶은데 어떻게 할수있을까요?

실크론 · Answer

{selected} 이부분에 들어가는거 같아요const [selected, setSelected] = useState("재고"); 여기에 추가하면 될꺼같아요

상단메뉴를 펼쳤을때 좌측네비바에 영향을 줍니다ㅠㅠ

1개의 답변

Q&A 목록