- Joined
- Nov 3, 2022
- Posts
- 510
- Reaction
- 1,139
- Points
- 378
Goodevening po ..
baguhan lang po sa REACT JS . .
tanong ko lang po kung tama po ba itong ganto layout?
ganito din po ba sa inyo? PWEDE PO MAITA YUNG SA INYO PO?
ganto po kasi ginawa ko , dont know if tama po or okay sya:
import React from 'react'
import { Link, Outlet } from 'react-router-dom'
import Header from './Header'
function Layout() {
return (
<div>
<div className='main'>
<div className='sidebar'>
<Link to={'/'}>Home</Link>
<Link to={'/about'}>About</Link>
<Link to={'/record'}>Record</Link>
<Link to={'/dashboard'}>Dashboard</Link>
</div>
<div className='container'>
<div className='header'>
<Header/>
</div>
<Outlet/>
</div>
</div>
</div>
)
}
export default Layout
---------------------
CSS
.sidebar{
display: flex;
flex-direction: column;
height: 100vh;
background-color: skyblue;
}
.main{
display: flex;
background-color: blue;
}
.header{
width: 100vw;
height: 60px;
background-color: yellow;
}
.container{
display: flex;
flex-direction: column;
}
baguhan lang po sa REACT JS . .
tanong ko lang po kung tama po ba itong ganto layout?
ganito din po ba sa inyo? PWEDE PO MAITA YUNG SA INYO PO?
ganto po kasi ginawa ko , dont know if tama po or okay sya:
import React from 'react'
import { Link, Outlet } from 'react-router-dom'
import Header from './Header'
function Layout() {
return (
<div>
<div className='main'>
<div className='sidebar'>
<Link to={'/'}>Home</Link>
<Link to={'/about'}>About</Link>
<Link to={'/record'}>Record</Link>
<Link to={'/dashboard'}>Dashboard</Link>
</div>
<div className='container'>
<div className='header'>
<Header/>
</div>
<Outlet/>
</div>
</div>
</div>
)
}
export default Layout
---------------------
CSS
.sidebar{
display: flex;
flex-direction: column;
height: 100vh;
background-color: skyblue;
}
.main{
display: flex;
background-color: blue;
}
.header{
width: 100vw;
height: 60px;
background-color: yellow;
}
.container{
display: flex;
flex-direction: column;
}
Attachments
-
You do not have permission to view the full content of this post. Log in or register now.