🔒 Closed Question regarding REACT JS --layout/outlet

Status
Not open for further replies.

neko021403

Established
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;

}
1674574408983.webp
 
Status
Not open for further replies.

About this Thread

  • 0
    Replies
  • 431
    Views
  • 1
    Participants
Last reply from:
neko021403

Trending Topics

Online now

Members online
1,088
Guests online
1,011
Total visitors
2,099

Forum statistics

Threads
2,274,853
Posts
28,958,844
Members
1,233,461
Latest member
Kdgwapo
Back
Top