Skip to content

Commit

Permalink
fixed header with offcanvas
Browse files Browse the repository at this point in the history
  • Loading branch information
@kami2016
kami2016 committed Jun 18, 2024
1 parent adbb779 commit 58d43e6
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 214 deletions.
0 dist/assets/Projekt.b5edb7d6.png → dist/assets/Projekte.b5edb7d6.png
View file
File renamed without changes
18 changes: 9 additions & 9 deletions dist/assets/index.5d3a495d.js → dist/assets/index.9cc7b115.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<title>Buero Vatter</title>


<script type="module" crossorigin src="/bv2024_frontend/assets/index.5d3a495d.js"></script>
<script type="module" crossorigin src="/bv2024_frontend/assets/index.9cc7b115.js"></script>
<link rel="stylesheet" href="/bv2024_frontend/assets/index.09aee9f1.css">
</head>
<body>
Expand Down
68 changes: 17 additions & 51 deletions src/assets/styles/global_styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,12 @@
body {
overflow: scroll;
overflow-x: hidden;
overflow-y: auto;
}

#root {
width: 100%;
--highlight-color: null;

}

.App {
Expand All @@ -80,6 +80,8 @@ body {
#logo_nav_container {
padding-left: 0px;
padding-right: 0px;
display: contents;

}

#nav_btn {
Expand Down Expand Up @@ -122,65 +124,21 @@ body {
}

/*modify bootstrap css*/
.custom-toggler.navbar-toggler {
.navbar-light .navbar-toggler {
border: 2px solid #C00000;
margin-right: 5px;
padding: 1px 10px;
}

.btn_container {
align-self: end;
}

button.navbar-toggler.custom-toggler.btn.btn-primary:hover {
background-color: rgb(192, 0, 0, 0.1);
}

.modal-backdrop {
z-index: 1;
margin-top: 20px;
}

.btn-primary {
color: #000000;
}

.custom-toggler .navbar-toggler-icon {
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(192,0,0,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/></svg>");
width: 28px;
}

.modal-dialog {
position: fixed;
margin: auto;
width: 200px;
height: 100%;
right: 0px;
}

.modal-content {
height: 100%;
}

.modal-body ul li {
text-align: center;
font-size: 130%;
padding: 5px;
}

.btn-primary:focus {
background-color: #ffffff;
}

.modalNav {
color: #C00000;
font-family: 'Barlow Condensed', sans-serif;
font-size: 20px;
letter-spacing: -0.5px;
font-weight: 500;
text-transform: uppercase;
.navbar-light .navbar-toggler:hover {
background-color: rgb(192, 0, 0, 0.1);
}

.navbar-light .navbar-nav .nav-link {
.nav-link {
color: #C00000;
font-family: 'Barlow Condensed', sans-serif;
font-size: 20px;
Expand All @@ -203,6 +161,14 @@ button.navbar-toggler.custom-toggler.btn.btn-primary:hover {
text-decoration: underline;
}

.navbar_column {
column-gap: 1.25em;
}

.navbar-light .navbar-nav .nav-link {
color: #C00000;
}

.nav-link:hover {
color: #8f0909;
text-decoration: underline;
Expand Down
218 changes: 65 additions & 153 deletions src/pages/Others/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import TitlePictureComp from "./TitlePictureComp";
import Container from "react-bootstrap/Container";
import bv_logo from "../../assets/imgs/logos/bv_logo.svg";
import side_logo from "../../assets/imgs/logos/side_logo.svg";

import { Navbar, Offcanvas } from "react-bootstrap";
const Header = () => {
const location = useLocation();
let page = location.pathname.substring(1);
Expand All @@ -17,159 +17,71 @@ const Header = () => {

return (
<Container fluid className="header_container">
<Container>
<Nav className="border-bottom navbar fixed-top bg-white navbar-expand-lg navbar-light flex-nowrap">
<Container>
<Container id="logo_nav_container">
<Link to="/" className="navbar-brand">
<img
src={bv_logo}
alt="logo"
height="100px"
className="main_logo"
/>
<img
src={side_logo}
height="98px"
alt="side_logo"
className="side_logo align-bottom"
/>
</Link>
</Container>

<div className="btn_container">
<Button
className="navbar-toggler custom-toggler "
type="button"
onClick={handleShow}
>
<span className="navbar-toggler-icon"></span>
</Button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul id="nav_btn" className="navbar-nav">
<li className="nav-item">
<NavLink
reloadDocument
activeclassname="active"
className="nav-link"
aria-current="page"
to="/Dienstleistungen"
>
Dienstleistungen
</NavLink>
</li>
<li className="nav-item">
<NavLink
reloadDocument
to="/Mitarbeitende"
activeclassname="active"
className="nav-link "
>
Über uns
</NavLink>
</li>
<li className="nav-item">
<NavLink
reloadDocument
to="/Themen"
activeclassname="active"
className="nav-link"
>
Themen
</NavLink>
</li>
<li className="nav-item">
<NavLink
reloadDocument
to="/Projekte"
activeclassname="active"
className="nav-link"
>
Projekte
</NavLink>
</li>
<li className="nav-item">
<NavLink
reloadDocument
to="/Kontakt"
activeclassname="active"
className="nav-link"
>
Kontakt
</NavLink>
</li>
</ul>
</div>
</div>
<Navbar
collapseOnSelect
expand="lg"
className="fixed-top bg-white navbar-light flex-nowrap"
>
<Container className="align-items-end">
<Navbar.Brand id="logo_nav_container">
<Link to="/" className="navbar-brand">
<img
src={bv_logo}
alt="logo"
height="100px"
className="main_logo"
/>
<img
src={side_logo}
height="98px"
alt="side_logo"
className="side_logo align-bottom"
/>
</Link>

<Modal show={show} onHide={handleClose} className="modal show">
<Modal.Dialog className="modal-dialog" role="document">
<div className="modal-content">
<Modal.Header
closeButton
className="modal-header"
></Modal.Header>
<Modal.Body>
<ul className="navbar-nav">
<li>
<NavLink
reloadDocument
activeclassname="active"
className="modalNav"
aria-current="page"
to="/Dienstleistungen"
>
Dienstleistungen
</NavLink>
</li>
<li className="nav-item">
<NavLink
reloadDocument
to="/Mitarbeitende"
activeclassname="active"
className="modalNav"
>
Über uns
</NavLink>
</li>
<li className="nav-item">
<NavLink
reloadDocument
to="/Themen"
activeclassname="active"
className="modalNav"
>
Themen
</NavLink>
</li>
<li className="nav-item">
<NavLink
reloadDocument
to="/Projekte"
activeclassname="active"
className="modalNav"
>
Projekte
</NavLink>
</li>
<li className="nav-item">
<NavLink
reloadDocument
to="/Kontakt"
activeclassname="active"
className="modalNav"
>
Kontakt
</NavLink>
</li>
</ul>
</Modal.Body>
</div>
</Modal.Dialog>
</Modal>
</Container>
</Nav>
</Container>
<Navbar.Toggle
aria-controls={`offcanvasNavbar-expand-lg`}
className="mb-2"
/>
<Navbar.Offcanvas
id={`offcanvasNavbar-expand-lg`}
aria-labelledby={`offcanvasNavbarLabel-expand-lg`}
placement="end"
backDrop="true"
className="w-50"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title
id={`offcanvasNavbarLabel-expand-lg`}
></Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body className="justify-content-end mb-2">
<Nav className="navbar_column">
<Nav.Link
href="#/Dienstleistungen"
aria-current="page"
reloadDocument
>
Dienstleistungen
</Nav.Link>
<Nav.Link href="#/Mitarbeitende" reloadDocument>
Über uns
</Nav.Link>
<Nav.Link href="#/Themen" reloadDocument>
Themen
</Nav.Link>
<Nav.Link href="#/Projekte" reloadDocument>
Projekte
</Nav.Link>
<Nav.Link href="#/Kontakt" reloadDocument>
Kontakt
</Nav.Link>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Navbar.Brand>
</Container>
</Navbar>

<Container fluid className="title_pic_content">
<TitlePictureComp page={page}></TitlePictureComp>
Expand Down

0 comments on commit 58d43e6

Please sign in to comment.