Untitled
unknown
javascript
2 years ago
2.1 kB
7
Indexable
//---------------sidebar.module.css------------------------- .sidebar { height: 100%; width: 350px; position: fixed; z-index: 1; left: 0; overflow-x: hidden; padding-top: 0px; transition: 0.5s; background-color: #2F4050; float: left; position: fixed; } .SidebarList { height: auto; padding: 0; width: 100%; } .row { width: 100%; height: 60px; border: 1px solid black; list-style-type: none; margin: 0%; display: flex; flex-direction: row; color: white; justify-content: center; align-items: center; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } .row:hover { cursor: pointer; background-color: #293846; } .row #active { background-color: #293846; } .icon { flex: 30%; display: grid; place-items: center; } .title { flex: 70%; } //-----------------------Header.js------------------------------ import React from 'react'; import Container from 'react-bootstrap/Container'; import Nav from 'react-bootstrap/Nav'; import Navbar from 'react-bootstrap/Navbar'; import { NavLink } from 'react-router-dom'; const Headers = () => { return ( <> <Navbar bg="dark" variant="dark" fixed="top" style={{ zIndex: 1 }}> <Container> <NavLink to="/" className="text-light text-decoration-none"> Login </NavLink> <Nav className=""> <NavLink to="/register" className="text-light text-decoration-none mt-2 mb-3" > Register </NavLink> <img src="/images/image-3.jpg" style={{ width: 50 }} alt="" /> </Nav> </Container> </Navbar> <div style={{ height: 80 }} /> {/* Add a placeholder div to prevent content from overlapping with the fixed header */} </> ); }; export default Headers;
Editor is loading...