Hello guys, I'm new in REACTJS and Im using Material UI. My question is how can I chop chop this code here, I want to separate the functions for drawer in other file and called it DrawerSlider.js and import it to HTML tags in DrawerView.js wich contains the html tags, - import React from 'react';
-
import clsx from 'clsx';
-
import { makeStyles, useTheme } from '@material-ui/core/styles';
-
import Drawer from '@material-ui/core/Drawer';
-
import AppBar from '@material-ui/core/AppBar';
-
import Toolbar from '@material-ui/core/Toolbar';
-
import List from '@material-ui/core/List';
-
import CssBaseline from '@material-ui/core/CssBaseline';
-
import Typography from '@material-ui/core/Typography';
-
import Divider from '@material-ui/core/Divider';
-
import IconButton from '@material-ui/core/IconButton';
-
import MenuIcon from '@material-ui/icons/Menu';
-
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-
import ListItem from '@material-ui/core/ListItem';
-
import ListItemIcon from '@material-ui/core/ListItemIcon';
-
import ListItemText from '@material-ui/core/ListItemText';
-
import InboxIcon from '@material-ui/icons/MoveToInbox';
-
import MailIcon from '@material-ui/icons/Mail';
-
-
const drawerWidth = 240;
-
-
const useStyles = makeStyles((theme) => ({
-
root: {
-
display: 'flex',
-
},
-
appBar: {
-
zIndex: theme.zIndex.drawer + 1,
-
transition: theme.transitions.create(['width', 'margin'], {
-
easing: theme.transitions.easing.sharp,
-
duration: theme.transitions.duration.leavingScreen,
-
}),
-
},
-
appBarShift: {
-
marginLeft: drawerWidth,
-
width: `calc(100% - ${drawerWidth}px)`,
-
transition: theme.transitions.create(['width', 'margin'], {
-
easing: theme.transitions.easing.sharp,
-
duration: theme.transitions.duration.enteringScreen,
-
}),
-
},
-
menuButton: {
-
marginRight: 36,
-
},
-
hide: {
-
display: 'none',
-
},
-
drawer: {
-
width: drawerWidth,
-
flexShrink: 0,
-
whiteSpace: 'nowrap',
-
},
-
drawerOpen: {
-
width: drawerWidth,
-
transition: theme.transitions.create('width', {
-
easing: theme.transitions.easing.sharp,
-
duration: theme.transitions.duration.enteringScreen,
-
}),
-
},
-
drawerClose: {
-
transition: theme.transitions.create('width', {
-
easing: theme.transitions.easing.sharp,
-
duration: theme.transitions.duration.leavingScreen,
-
}),
-
overflowX: 'hidden',
-
width: theme.spacing(7) + 1,
-
[theme.breakpoints.up('sm')]: {
-
width: theme.spacing(9) + 1,
-
},
-
},
-
toolbar: {
-
display: 'flex',
-
alignItems: 'center',
-
justifyContent: 'flex-end',
-
padding: theme.spacing(0, 1),
-
// necessary for content to be below app bar
-
...theme.mixins.toolbar,
-
},
-
content: {
-
flexGrow: 1,
-
padding: theme.spacing(3),
-
},
-
}));
-
-
export default function MiniDrawer() {
-
const classes = useStyles();
-
const theme = useTheme();
-
const [open, setOpen] = React.useState(false);
-
-
const handleDrawerOpen = () => {
-
setOpen(true);
-
};
-
-
const handleDrawerClose = () => {
-
setOpen(false);
-
};
-
-
return (
-
<div className={classes.root}>
-
<CssBaseline />
-
<AppBar
-
position="fixed"
-
className={clsx(classes.appBar, {
-
[classes.appBarShift]: open,
-
})}
-
>
-
<Toolbar>
-
<IconButton
-
color="inherit"
-
aria-label="open drawer"
-
onClick={handleDrawerOpen}
-
edge="start"
-
className={clsx(classes.menuButton, {
-
[classes.hide]: open,
-
})}
-
>
-
<MenuIcon />
-
</IconButton>
-
<Typography variant="h6" noWrap>
-
Mini variant drawer
-
</Typography>
-
</Toolbar>
-
</AppBar>
-
<Drawer
-
variant="permanent"
-
className={clsx(classes.drawer, {
-
[classes.drawerOpen]: open,
-
[classes.drawerClose]: !open,
-
})}
-
classes={{
-
paper: clsx({
-
[classes.drawerOpen]: open,
-
[classes.drawerClose]: !open,
-
}),
-
}}
-
>
-
<div className={classes.toolbar}>
-
<IconButton onClick={handleDrawerClose}>
-
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
-
</IconButton>
-
</div>
-
<Divider />
-
<List>
-
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-
<ListItem button key={text}>
-
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
-
<ListItemText primary={text} />
-
</ListItem>
-
))}
-
</List>
-
<Divider />
-
<List>
-
{['All mail', 'Trash', 'Spam'].map((text, index) => (
-
<ListItem button key={text}>
-
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
-
<ListItemText primary={text} />
-
</ListItem>
-
))}
-
</List>
-
</Drawer>
-
<main className={classes.content}>
-
<div className={classes.toolbar} />
-
<Typography paragraph>
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-
ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
-
facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
-
gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
-
donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
-
adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
-
Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
-
imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
-
arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
-
donec massa sapien faucibus et molestie ac.
-
</Typography>
-
<Typography paragraph>
-
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
-
facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
-
tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
-
consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
-
vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
-
hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
-
tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
-
nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
-
accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
-
</Typography>
-
</main>
-
</div>
-
);
-
}
-
or you can visit this site, https://material-ui.com/components/drawers/#drawer
and scroll down to Mini variant drawer, you can view the code there. Hopefully you understand what I mean.
Than you.
0 2104 Sign in to post your reply or Sign up for a free account.
Similar topics |
by: matt |
last post by:
Hi
I want to use a universal file "settings.inc" to hold the values for 3
or 4 php scripts. I have tried including it into all the pages in the
top of the script, but have thus far been unsuccessful. Do i need to
declate the values in some special way?
Ta
matt
|
by: Pernell Williams |
last post by:
Hi all:
I am new to Python, and this is my first post (and it won't be my last!), so
HELLO EVERYONE!! I am attempting to use "xreadlines", an outer loop and an
inner loop in conjunction with "file.tell() and file.seek() in order to
navigate through a file in order to print specific lines (for example, every
5th line). Allow me to illustrate by example:
|
by: Girish |
last post by:
We have two db's. One live and one test.
When I right click on the live one in SQL Enterprise Manager and
select properties -> Data Files ->
File Name is LIVE.MDF
Location is F:\Data\LIVE.MDF
When I right click on the test one in SQL Enterprise Manager and
select properties -> Data Files ->
File Name is LIVE.MDF
|
by: strawberry |
last post by:
i have a db set up that i access using an ftp connection, and an sql script
file that i wish to run, how do i go about doing so?
tia
|
by: Larry R Harrison Jr |
last post by:
I have an Access 97 secured database which I designed myself. I have the
workgroup file and I have been both been trying to access it using a custom
shortcut--which I updated to reflect the current filepaths of both the
database and workgroup file--and I also tried just manually joining the
workgrup file and double-clicking the aplication. I was successful at
"joining" the workgroup file.
I keep getting 'You Don't Have the Necessary...
| |
by: guru.slt |
last post by:
my c program fails to write file that is bigger than 2G bytes. I used
gcc compiler. After writing for a while, It says: "filesize limit
exceed". How to solve this?
But, if I compile the c code by "c++", then it can write more than 2G
bytes in a file. Where is the problem for "gcc"?
the code is here:
---------------------------
#include <stdio.h>
|
by: chiranjiv choudhary via .NET 247 |
last post by:
Can we have CodeBehind file in another server or same machine but diffrent location or directory
--------------------------------
From: chiranjiv choudhary
-----------------------
Posted by a user from .NET 247 (http://www.dotnet247.com/)
<Id>8svNZUU0T0eArey2uATMWw==</Id>
|
by: MilanB |
last post by:
Hello
I'm asking is it possible that two or more Web User Control have same file
(.ascx) name within same project? Namespace is different.
I got error message: "CS1595: 'ASP.EditForm_ascx' is defined in multiple
places;"
I know that I have two controls EditForm, in different namespaces, but with
same file name: "EditForm_ascx"
If it is of any importance, I use both user controls on same page.
|
by: dev121 |
last post by:
Hi all,
I have attempted to create a vb.net application that can extract neccessary data from a xml file to txt format. This is all working fine.
The next step for me is to be able to scan a default folder for new files using a timer.
I understand how the timer will work but need obviously to know how to scan a folder for files. which class do i use for that?
every new xml file in the default folder should be converted when the...
|
by: 4124 |
last post by:
how can i cheak if the file empty or not in c language
(i have function(FILE* fopenOrDie(char* name);))
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| |
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
| |
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |