I'm integrating a bootstrap template into a react app and I'm having trouble getting two of the components- Home and ProductIndex - to render. When I inspect with the react dev tool the components aren't in the DOM at all. The html to follow has issues that I haven't begun to deal with yet, but for it not to render at all is mystifying me. Not sure what the problem is.
Here is the Home component
import React, { Component } from 'react'
class Home extends Component {
render() {
return (
<div>
<div className="modal fade" id="productView" tabindex="-1" role="dialog" aria-hidden="true">
<div className="modal-dialog modal-lg modal-dialog-centered" role="document">
<div className="modal-content">
<div className="modal-body p-0">
<div className="row align-items-stretch">
<div className="col-lg-6 p-lg-0"><a className="product-view d-block h-100 bg-cover bg-center" style="background: url(img/product-5.jpg)" href="img/product-5.jpg" data-lightbox="productview" title="Red digital smartwatch"></a><a className="d-none" href="img/product-5-alt-1.jpg" title="Red digital smartwatch" data-lightbox="productview"></a><a className="d-none" href="img/product-5-alt-2.jpg" title="Red digital smartwatch" data-lightbox="productview"></a></div>
<div className="col-lg-6">
<button className="close p-4" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div className="p-5 my-md-4">
<ul className="list-inline mb-2">
<li className="list-inline-item m-0"><i className="fas fa-star small text-warning"></i></li>
<li className="list-inline-item m-0"><i className="fas fa-star small text-warning"></i></li>
<li className="list-inline-item m-0"><i className="fas fa-star small text-warning"></i></li>
<li className="list-inline-item m-0"><i className="fas fa-star small text-warning"></i></li>
<li className="list-inline-item m-0"><i className="fas fa-star small text-warning"></i></li>
</ul>
<h2 className="h4">Red digital smartwatch</h2>
<p className="text-muted">$250</p>
<p className="text-small mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut ullamcorper leo, eget euismod orci. Cum sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus. Vestibulum ultricies aliquam convallis.</p>
<div className="row align-items-stretch mb-4">
<div className="col-sm-7 pr-sm-0">
<div className="border d-flex align-items-center justify-content-between py-1 px-3"><span className="small text-uppercase text-gray mr-4 no-select">Quantity</span>
<div className="quantity">
<button className="dec-btn p-0"><i className="fas fa-caret-left"></i></button>
<input className="form-control border-0 shadow-0 p-0" type="text" value="1"/>
<button className="inc-btn p-0"><i className="fas fa-caret-right"></i></button>
</div>
</div>
</div>
<div className="col-sm-5 pl-sm-0"><a className="btn btn-dark btn-sm btn-block h-100 d-flex align-items-center justify-content-center px-0" href="cart.html">Add to cart</a></div>
</div><a className="btn btn-link text-dark p-0" href="#"><i className="far fa-heart mr-2"></i>Add to wish list</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="container">
<section className="hero pb-3 bg-cover bg-center d-flex align-items-center" style="background: url(img/hero-banner-alt.jpg)">
<div className="container py-5">
<div className="row px-4 px-lg-5">
<div className="col-lg-6">
<p className="text-muted small text-uppercase mb-2">New Inspiration 2020</p>
<h1 className="h2 text-uppercase mb-3">20% off on new season</h1><a className="btn btn-dark" href="shop.html">Browse collections</a>
</div>
</div>
</div>
</section>
<section className="pt-5">
<header className="text-center">
<p className="small text-muted small text-uppercase mb-1">Carefully created collections</p>
<h2 className="h5 text-uppercase mb-4">Browse our categories</h2>
</header>
<div className="row">
<div className="col-md-4 mb-4 mb-md-0"><a className="category-item" href="shop.html"><img className="img-fluid" src="img/cat-img-1.jpg" alt=""/><strong className="category-item-title">Clothes</strong></a></div>
<div className="col-md-4 mb-4 mb-md-0"><a className="category-item mb-4" href="shop.html"><img className="img-fluid" src="img/cat-img-2.jpg" alt=""/><strong className="category-item-title">Shoes</strong></a><a className="category-item" href="shop.html"><img className="img-fluid" src="img/cat-img-3.jpg" alt=""/><strong className="category-item-title">Watches</strong></a></div>
<div className="col-md-4"><a className="category-item" href="shop.html"><img className="img-fluid" src="img/cat-img-4.jpg" alt=""/><strong className="category-item-title">Electronics</strong></a></div>
</div>
</section>
<section className="py-5">
<header>
<p className="small text-muted small text-uppercase mb-1">Made the hard way</p>
<h2 className="h5 text-uppercase mb-4">Top trending products</h2>
</header>
<div className="row">
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-"></div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-1.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Kui Ye Chen’s AirPods</a></h6>
<p className="small text-muted">$250</p>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-primary">Sale</div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-2.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Air Jordan 12 gym red</a></h6>
<p className="small text-muted">$300</p>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-"></div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-3.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Cyan cotton t-shirt</a></h6>
<p className="small text-muted">$25</p>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-info">New</div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-4.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Timex Unisex Originals</a></h6>
<p className="small text-muted">$351</p>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-danger">Sold</div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-5.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Red digital smartwatch</a></h6>
<p className="small text-muted">$250</p>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-"></div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-6.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Nike air max 95</a></h6>
<p className="small text-muted">$300</p>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-"></div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-7.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Joemalone Women prefume</a></h6>
<p className="small text-muted">$25</p>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-"></div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-8.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Apple Watch</a></h6>
<p className="small text-muted">$351</p>
</div>
</div>
</div>
</section>
<section className="py-5 bg-light">
<div className="container">
<div className="row text-center">
<div className="col-lg-4 mb-3 mb-lg-0">
<div className="d-inline-block">
<div className="media align-items-end">
<svg className="svg-icon svg-icon-big svg-icon-light">
<use href="#delivery-time-1"> </use>
</svg>
<div className="media-body text-left ml-3">
<h6 className="text-uppercase mb-1">Free shipping</h6>
<p className="text-small mb-0 text-muted">Free shipping worlwide</p>
</div>
</div>
</div>
</div>
<div className="col-lg-4 mb-3 mb-lg-0">
<div className="d-inline-block">
<div className="media align-items-end">
<svg className="svg-icon svg-icon-big svg-icon-light">
<use href="#helpline-24h-1"> </use>
</svg>
<div className="media-body text-left ml-3">
<h6 className="text-uppercase mb-1">24 x 7 service</h6>
<p className="text-small mb-0 text-muted">Free shipping worlwide</p>
</div>
</div>
</div>
</div>
<div className="col-lg-4">
<div className="d-inline-block">
<div className="media align-items-end">
<svg className="svg-icon svg-icon-big svg-icon-light">
<use href="#label-tag-1"> </use>
</svg>
<div className="media-body text-left ml-3">
<h6 className="text-uppercase mb-1">Festival offer</h6>
<p className="text-small mb-0 text-muted">Free shipping worlwide</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="py-5">
<div className="container p-0">
<div className="row">
<div className="col-lg-6 mb-3 mb-lg-0">
<h5 className="text-uppercase">Let's be friends!</h5>
<p className="text-small text-muted mb-0">Nisi nisi tempor consequat laboris nisi.</p>
</div>
<div className="col-lg-6">
<form action="#">
<div className="input-group flex-column flex-sm-row mb-3">
<input className="form-control form-control-lg py-3" type="email" placeholder="Enter your email address" aria-describedby="button-addon2"/>
<div className="input-group-append">
<button className="btn btn-dark btn-block" id="button-addon2" type="submit">Subscribe</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
<footer className="bg-dark text-white">
<div className="container py-4">
<div className="row py-5">
<div className="col-md-4 mb-3 mb-md-0">
<h6 className="text-uppercase mb-3">Customer services</h6>
<ul className="list-unstyled mb-0">
<li><a className="footer-link" href="#">Help & Contact Us</a></li>
<li><a className="footer-link" href="#">Returns & Refunds</a></li>
<li><a className="footer-link" href="#">Online Stores</a></li>
<li><a className="footer-link" href="#">Terms & Conditions</a></li>
</ul>
</div>
<div className="col-md-4 mb-3 mb-md-0">
<h6 className="text-uppercase mb-3">Company</h6>
<ul className="list-unstyled mb-0">
<li><a className="footer-link" href="#">What We Do</a></li>
<li><a className="footer-link" href="#">Available Services</a></li>
<li><a className="footer-link" href="#">Latest Posts</a></li>
<li><a className="footer-link" href="#">FAQs</a></li>
</ul>
</div>
<div className="col-md-4">
<h6 className="text-uppercase mb-3">Social media</h6>
<ul className="list-unstyled mb-0">
<li><a className="footer-link" href="#">Twitter</a></li>
<li><a className="footer-link" href="#">Instagram</a></li>
<li><a className="footer-link" href="#">Tumblr</a></li>
<li><a className="footer-link" href="#">Pinterest</a></li>
</ul>
</div>
</div>
<div className="border-top pt-4" style="border-color: #1d1d1d !important">
<div className="row">
<div className="col-lg-6">
<p className="small text-muted mb-0">© 2020 All rights reserved.</p>
</div>
<div className="col-lg-6 text-lg-right">
<p className="small text-muted mb-0">Template designed by <a className="text-white reset-anchor" href="https://bootstraptemple.com/p/bootstrap-ecommerce">Bootstrap Temple</a></p>
</div>
</div>
</div>
</div>
</footer>
</div>
)
}
}
export default Home
Here is the Header component (this is rendering)
import React, { Component } from 'react';
class Header extends Component {
render() {
return (
<header class="header bg-white">
<div class="container px-0 px-lg-3">
<nav class="navbar navbar-expand-lg navbar-light py-3 px-lg-0"><a class="navbar-brand" href="index.html"><span class="font-weight-bold text-uppercase text-dark">Boutique</span></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shop.html">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="detail.html">Product detail</a>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="pagesDropdown" href="#nav" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
<div class="dropdown-menu mt-3" aria-labelledby="pagesDropdown"><a class="dropdown-item border-0 transition-link" href="index.html">Homepage</a><a class="dropdown-item border-0 transition-link" href="shop.html">Category</a><a class="dropdown-item border-0 transition-link" href="detail.html">Product detail</a><a class="dropdown-item border-0 transition-link" href="cart.html">Shopping cart</a><a class="dropdown-item border-0 transition-link" href="checkout.html">Checkout</a></div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="cart.html"> <i class="fas fa-dolly-flatbed mr-1 text-gray"></i>Cart<small class="text-gray">(2)</small></a></li>
<li class="nav-item"><a class="nav-link" href="#nav"> <i class="far fa-heart mr-1"></i><small class="text-gray"> (0)</small></a></li>
<li class="nav-item"><a class="nav-link" href="#nav"> <i class="fas fa-user-alt mr-1 text-gray"></i>Login</a></li>
</ul>
</div>
</nav>
</div>
</header>
)
}
}
export default Header;
Here is App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home/Home.js'
import Header from './Header/Header.js'
import ProductIndex from './ProductIndex/ProductIndex.js'
function App() {
return (
<div className="wrapper">
<Router>
<Switch>
<Header/>
<Route exact path="/" component={ Home } />
<Route exact path="/products" component={ ProductIndex } />
</Switch>
</Router>
</div>
);
}
export default App;
and index.js
import React from 'react'
import ReactDOM from 'react-dom'
// import './index.scss'
import App from './App'
import { BrowserRouter } from 'react-router-dom'
const appJsx = (
<BrowserRouter>
<App />
</BrowserRouter>
)
ReactDOM.render(appJsx, document.getElementById('root'))
The reason the components do not appear is because the Header is inside teh Switch it should be outside
function App() {
return (
<div className="wrapper">
<Header/>
<Router>
<Switch>
<Route exact path="/" component={ Home } />
<Route exact path="/products" component={ ProductIndex } />
</Switch>
</Router>
</div>
);
}
in addition you have a lot of issues in the code just look at the console...
Related
I am building a react app that renders 2 layouts, a layout without the sidebar nav and topbar when you are not logged in, and then a different layout that does render the topbar and sidebar nav when you are logged in (through a context).
The issue that I am facing is that when logged in, the topbar and sidebar nav render as separate components and any other component that I wish to display ends up all the way at the bottom - see these images for context Pic1 Pic 2
As you can see, everything renders top down ("Dashboard" is an example of a component that I would like rendered next to and below the sidebar and topbar. What I would like to do is render the topbar and sidebar as a single component, and then render any other page components in that large white space. Perhaps there is a way to combine the two bars into a single layout?
I will share some code below...
Topbar.jsx
import "startbootstrap-sb-admin-2-master/css/sb-admin-2.min.css";
import { useAuth } from "../../hooks/auth";
export const TopBar = () => {
const user = useAuth().user;
const { logout } = useAuth();
const handleSubmit = async (e) => {
e.preventDefault();
logout();
};
return (
<div id="content-wrapper" className="d-flex flex-column">
<div id="content">
<div className="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<button
id="sidebarToggleTop"
className="btn btn-link d-md-none rounded-circle mr-3"
>
<i className="fa fa-bars"></i>
</button>
<form className="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div className="input-group">
<input
type="text"
className="form-control bg-light border-0 small"
placeholder="Search for..."
aria-label="Search"
aria-describedby="basic-addon2"
/>
<div className="input-group-append">
<button className="btn btn-primary" type="button">
<i className="fa-solid fa-magnifying-glass"></i>
</button>
</div>
</div>
</form>
<ul className="navbar-nav ml-auto">
<li className="nav-item dropdown no-arrow mx-1">
<div
className="nav-link dropdown-toggle"
href="#"
id="alertsDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i className="fas fa-bell fa-fw"></i>
<span className="badge badge-danger badge-counter">3+</span>
</div>
</li>
<div className="topbar-divider d-none d-sm-block" />
<li className="nav-item dropdown no-arrow">
<div
className="nav-link"
id="userDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<text className="mr-2 d-none d-lg-inline text-gray-600 small">
Hi, {user}!
</text>
<i className="fa-solid fa-user"></i>
</div>
</li>
<li className="nav-item dropdown no-arrow">
<div
className="nav-link"
id="userDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<button
className="btn btn-secondary btn-circle"
type="button"
onClick={handleSubmit}
>
<i className="fa-solid fa-arrow-right-from-bracket"></i>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
);
};
Navbar.jsx (sidebar)
import "startbootstrap-sb-admin-2-master/css/sb-admin-2.min.css";
import { useAuth } from "../../hooks/auth";
export const Navbar = () => {
return (
<div id="wrapper">
<ul
className="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"
id="accordionSidebar"
>
<hr className="sidebar-divider my-0" />
<li className="nav-item active">
<a className="nav-link" href="index.html">
<i className="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<hr className="sidebar-divider" />
<div className="sidebar-heading">Interface</div>
<li className="nav-item">
<a
className="nav-link collapsed"
href="#"
data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="true"
aria-controls="collapseTwo"
>
<i className="fas fa-fw fa-cog"></i>
<span>Components</span>
</a>
<div
id="collapseTwo"
className="collapse"
aria-labelledby="headingTwo"
data-parent="#accordionSidebar"
>
<div className="bg-white py-2 collapse-inner rounded">
<h6 className="collapse-header">Custom Components:</h6>
<a className="collapse-item" href="buttons.html">
Buttons
</a>
<a className="collapse-item" href="cards.html">
Cards
</a>
</div>
</div>
</li>
<li className="nav-item">
<a
className="nav-link collapsed"
href="#"
data-toggle="collapse"
data-target="#collapseUtilities"
aria-expanded="true"
aria-controls="collapseUtilities"
>
<i className="fas fa-fw fa-wrench"></i>
<span>Utilities</span>
</a>
<div
id="collapseUtilities"
className="collapse"
aria-labelledby="headingUtilities"
data-parent="#accordionSidebar"
>
<div className="bg-white py-2 collapse-inner rounded">
<h6 className="collapse-header">Custom Utilities:</h6>
<a className="collapse-item" href="utilities-color.html">
Colors
</a>
<a className="collapse-item" href="utilities-border.html">
Borders
</a>
<a className="collapse-item" href="utilities-animation.html">
Animations
</a>
<a className="collapse-item" href="utilities-other.html">
Other
</a>
</div>
</div>
</li>
<hr className="sidebar-divider" />
<div className="sidebar-heading">Addons</div>
<li className="nav-item">
<a
className="nav-link collapsed"
href="#"
data-toggle="collapse"
data-target="#collapsePages"
aria-expanded="true"
aria-controls="collapsePages"
>
<i className="fas fa-fw fa-folder"></i>
<span>Pages</span>
</a>
<div
id="collapsePages"
className="collapse"
aria-labelledby="headingPages"
data-parent="#accordionSidebar"
>
<div className="bg-white py-2 collapse-inner rounded">
<h6 className="collapse-header">Login Screens:</h6>
<a className="collapse-item" href="login.html">
Login
</a>
<a className="collapse-item" href="register.html">
Register
</a>
<a className="collapse-item" href="forgot-password.html">
Forgot Password
</a>
<div className="collapse-divider"></div>
<h6 className="collapse-header">Other Pages:</h6>
<a className="collapse-item" href="404.html">
404 Page
</a>
<a className="collapse-item" href="blank.html">
Blank Page
</a>
</div>
</div>
</li>
<li className="nav-item">
<a className="nav-link" href="charts.html">
<i className="fas fa-fw fa-chart-area"></i>
<span>Charts</span>
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="tables.html">
<i className="fas fa-fw fa-table"></i>
<span>Tables</span>
</a>
</li>
<hr className="sidebar-divider d-none d-md-block" />
<div className="text-center d-none d-md-inline">
<button className="rounded-circle border-0" id="sidebarToggle" />
</div>
</ul>
</div>
);
};
ProtectedLayout.jsx (layout rendered when logged in)
import { Outlet } from "react-router";
import { Navbar } from "../components/common/Navbar";
import { TopBar } from "../components/common/Topbar";
export const ProtectedLayout = () => {
return (
<>
<div>
<TopBar />
<Navbar />
</div>
<Outlet />
</>
);
};
App.js (routing)
import React from "react";
import { Route, Routes } from "react-router-dom";
import { LoginLayout } from "./layout/LoginLayout";
import { ProtectedLayout } from "./layout/ProtectedLayout";
import { ProtectRoutes } from "./hooks/protectedRoute";
import { Login } from "./pages/LoginPage";
import { Dashboard } from "./pages/DashboardPage";
import { Hi } from "./pages/HiPage";
import { About } from "./pages/AboutPage";
export default function App() {
return (
<Routes>
<Route element={<LoginLayout />}>
<Route path="/" element={<Login />} />
</Route>
<Route path="/auth" element={<ProtectRoutes />}>
<Route
path="/auth/dashboard"
element={
<>
<ProtectedLayout />
<Dashboard />
</>
}
/>
<Route
path="/auth/hi"
element={
<>
<ProtectedLayout />
<Hi />
</>
}
/>
<Route
path="/auth/about"
element={
<>
<ProtectedLayout />
<About />
</>
}
/>
</Route>
</Routes>
);
}
Also, if you have any suggestions on bettering the routing I would be incredibly grateful.
Please let me know if you need any other code.
So i have a footer template i want to use but when I add the content between the footer and the header I am left with a white space between the footer and the content. what could be the problem I haven't used any margins on the elements.
HTML
Head
<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap 4 Navbar</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.css'><link rel="stylesheet" href="./style.css">
</head>
Header
<header>
<!--- Navbar --->
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand text-white" href="#"><i class="fa fa-graduation-cap fa-lg mr-2"></i>BLOG</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nvbCollapse" aria-controls="nvbCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nvbCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item pl-1">
<a class="nav-link" href="#"><i class="fa fa-home fa-fw mr-1"></i>Anasayfa</a>
</li>
<li class="nav-item active pl-1">
<a class="nav-link" href="#"><i class="fa fa-th-list fa-fw mr-1"></i>Blog</a>
</li>
<li class="nav-item pl-1">
<a class="nav-link" href="#"><i class="fa fa-info-circle fa-fw mr-1"></i>Hakkımızda</a>
</li>
<li class="nav-item pl-1">
<a class="nav-link" href="#"><i class="fa fa-phone fa-fw fa-rotate-180 mr-1"></i>İletişim</a>
</li>
<li class="nav-item pl-1">
<a class="nav-link" href="#"><i class="fa fa-user-plus fa-fw mr-1"></i>Kayıt Ol</a>
</li>
<li class="nav-item pl-1">
<a class="nav-link" href="#"><i class="fa fa-sign-in fa-fw mr-1"></i>Oturum Aç</a>
</li>
</ul>
</div>
</div>
</nav>
<!--# Navbar #-->
</header>
Footer
<footer>
<div class="jumbotron jumbotron-fluid bg-secondary p-4 mt-5 mb-0">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 cizgi">
<div class="card bg-secondary border-0">
<div class="card-body text-light text-center">
<h5 class="card-title text-white display-4" style="font-size:30px">Telif Hakkı</h5>
<p class="d-inline lead">Tüm Hakları Saklıdır © 2018<br>
Blog
</p>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 cizgi">
<div class="card bg-secondary border-0">
<div class="card-body text-center">
<h5 class="card-title text-white display-4" style="font-size:30px">İletişim</h5>
<a class="text-light d-block lead" style="margin-left: -20px" href="#"><i class="fa fa-phone mr-2"></i>+90 (000) 000 0 000</a>
<a class="text-light d-block lead" href="#"><i class="fa fa-envelope mr-2"></i>admin#localhost.com</a>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
<div class="card bg-secondary border-0">
<div class="card-body text-center">
<h5 class="card-title text-white display-4" style="font-size:30px">Sosyal Medya</h5>
<a class="text-light" href="#"><i class="fa fa-facebook-square fa-fw fa-2x"></i></a>
<a class="text-light" href="#"><i class="fa fa-twitter-square fa-fw fa-2x"></i></a>
<a class="text-light" href="#"><i class="fa fa-instagram fa-fw fa-2x"></i></a>
<a class="text-light" href="#"><i class="fa fa-linkedin fa-fw fa-2x"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
and the css
.navbar { background-color: #484848; }
.navbar .navbar-nav .nav-link { color: #fff; }
.navbar .navbar-nav .nav-link:hover { color: #fbc531; }
.navbar .navbar-nav .active > .nav-link { color: #fbc531; }
footer a.text-light:hover { color: #fed136!important; text-decoration: none; }
footer .cizgi { border-right: 1px solid #535e67; }
#media (max-width: 992px) { footer .cizgi { border-right: none; } }
and that's what shows on my browser
This white space stays there no matter what I add between the header and footer any ideas ?
added simple text to demonstrate the white space
i was about to answer the same <div class="jumbotron jumbotron-fluid bg-secondary p-4 mb-0">
Nevermind i found what was causing it the boostrap template i used had the attribute mt-5 added to the footer class which is a boostrap attribute that adds top margin to the element changing it to mt-0 fixed it for me.
Basically I am trying to get the parent of the data-toggle="collapse". Currently my navbar has a id="sidebar". I only want to get the data-toggle="collapse" that are inside of this navbar only.
I tried the following but didn't work.
$('[#sidebar > data-toggle=collapse]').prop('disabled', false);
<nav id="sidebar" class="nav flex-column">
<div id="TitleSidebar" class="pt-2 pb-3 px-1 d-flex">
<span id="sidelogo" class="mr-auto p-2">Logo</span>
<button id="SideButtonOpenClose" type="button" class="btn btn-default" href="#" onclick="OpenCloseSideBar()">
<span class="fas fa-align-justify" aria-hidden="true"></span>
</button>
</div>
<!-- fIRST TAB -->
<div id="FirstTitle" class="nav-item active " onclick="changeActiveTabs(event)">
<a id="toggleDropDown" class="nav-link px-0 toggle-arrow " data-toggle="collapse" href="#submenu1" aria-expanded="false">
<div class="d-flex align-items-center justify-content-between ">
<span class="side-icons pl-3 pr-2 fas fa-home"></span>
<span class="sidebartitle text-nowrap mr-auto ">DashBoard</span>
<span class="downarrowicon mr-2 fas fa-angle-right"></span>
</div>
</a>
</div>
etc..
</nav>
The > combinator selects only immediate children. And attribute selectors must be in square brackets, but not the whole expression. Try this:
$('#sidebar [data-toggle=collapse]').prop('disabled', false);
Example:
// Returns one item.
console.log($('#sidebar [data-toggle=collapse]').length)
// Throws an error.
console.log($('[#sidebar > data-toggle=collapse]').length)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="sidebar" class="nav flex-column">
<div id="TitleSidebar" class="pt-2 pb-3 px-1 d-flex">
<span id="sidelogo" class="mr-auto p-2">Logo</span>
<button id="SideButtonOpenClose" type="button" class="btn btn-default" href="#" onclick="OpenCloseSideBar()">
<span class="fas fa-align-justify" aria-hidden="true"></span>
</button>
</div>
<!-- fIRST TAB -->
<div id="FirstTitle" class="nav-item active " onclick="changeActiveTabs(event)">
<a id="toggleDropDown" class="nav-link px-0 toggle-arrow " data-toggle="collapse" href="#submenu1" aria-expanded="false">
<div class="d-flex align-items-center justify-content-between ">
<span class="side-icons pl-3 pr-2 fas fa-home"></span>
<span class="sidebartitle text-nowrap mr-auto ">DashBoard</span>
<span class="downarrowicon mr-2 fas fa-angle-right"></span>
</div>
</a>
</div>
</nav>
this is how it looks:
I want it to get it top next to the first card.
<!-- top nav-->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:white">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="products.html">Products</a></li>
<li class="nav-item"><a class="nav-link" href="inspiration.html">Inspiration</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
</ul>
</div>
</nav>
<!--Section heading-->
<center>
<h1 class="section-heading h1 pt-4">Vedení / zaměstnanci</h1>
</center>
<!--Section description-->
<div style="padding-left:30%;padding-top:3%">
<!--Card-->
<div class="card testimonial-card back" style="width:25%">
<!--Background color-->
<div class="card-up teal lighten-2">
</div>
<!--Avatar-->
<div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px">
</div>
<div class="card-body">
<!--Name-->
<center>
<h4 class="card-title mt-1">Filip Dvořák</h4>
</center>
<hr>
<!--Quotation-->
<center>
<p>Tester, web designer, programmer and a game developer</p>
</center>
</div>
</div>
<!--Card-->
</div>
<div style="padding-left:50%">
<!--Card-->
<div class="card testimonial-card back" style="width:35%">
<!--Background color-->
<div class="card-up teal lighten-2">
</div>
<!--Avatar-->
<div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px;border-radius: 60px 60px 10px 10px;">
</div>
<div class="card-body">
<!--Name-->
<center>
<h4 class="card-title mt-1">Filip Dvořák</h4>
</center>
<hr>
<!--Quotation-->
<p>Tester, web designer, programmer and a game developer</p>
</div>
</div>
<!--Card-->
</div>
<!-- footer-->
<div style="padding-top:17.6%">
<footer class="page-footer fixed-bottom font-small white pt-4">
<div class="container">
<div class="row">
<div class="col spodek text-center" style="padding-top:25px">
<h5 class="text-uppercase font-weight-bold">contact</h5>
<p>filip.dvorak13#gmail.com</p>
</div>
<div class="col"><img src="https://cdn.glitch.com/b511ed4c-fabf-49df-b72a-741fff06f5ca%2Ffghfghf.jpg?1538487766651" class="img" alt="" style="width:400px;height:125px"></div>
<div class="col spodek text-center" style="padding-top:25px">
<h5 class="text-uppercase font-weight-bold">sponsor</h5>
<p>Construsoft s.r.o.</p>
</div>
</div>
</div>
</footer>
</div>
This might be a possible solution. Using flexbox for the introduced <section> element and also for the immediate children.
section {
display: flex;
}
section>div {
flex-grow: 1;
display: flex;
justify-content: center;
}
<!-- top nav-->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:white">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="products.html">Products</a></li>
<li class="nav-item"><a class="nav-link" href="inspiration.html">Inspiration</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
</ul>
</div>
</nav>
<!--Section heading-->
<center>
<h1 class="section-heading h1 pt-4">Vedení / zaměstnanci</h1>
</center>
<!--Section description-->
<section>
<div>
<!--Card-->
<div class="card testimonial-card back" style="width:25%">
<!--Background color-->
<div class="card-up teal lighten-2">
</div>
<!--Avatar-->
<div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px">
</div>
<div class="card-body">
<!--Name-->
<center>
<h4 class="card-title mt-1">Filip Dvořák</h4>
</center>
<hr>
<!--Quotation-->
<center>
<p>Tester, web designer, programmer and a game developer</p>
</center>
</div>
</div>
<!--Card-->
</div>
<div>
<!--Card-->
<div class="card testimonial-card back" style="width:35%">
<!--Background color-->
<div class="card-up teal lighten-2">
</div>
<!--Avatar-->
<div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px;border-radius: 60px 60px 10px 10px;">
</div>
<div class="card-body">
<!--Name-->
<center>
<h4 class="card-title mt-1">Filip Dvořák</h4>
</center>
<hr>
<!--Quotation-->
<p>Tester, web designer, programmer and a game developer</p>
</div>
</div>
<!--Card-->
</div>
</section>
<!-- footer-->
<div>
<footer class="page-footer fixed-bottom font-small white pt-4">
<div class="container">
<div class="row">
<div class="col spodek text-center" style="padding-top:25px">
<h5 class="text-uppercase font-weight-bold">contact</h5>
<p>filip.dvorak13#gmail.com</p>
</div>
<div class="col"><img src="https://cdn.glitch.com/b511ed4c-fabf-49df-b72a-741fff06f5ca%2Ffghfghf.jpg?1538487766651" class="img" alt="" style="width:400px;height:125px"></div>
<div class="col spodek text-center" style="padding-top:25px">
<h5 class="text-uppercase font-weight-bold">sponsor</h5>
<p>Construsoft s.r.o.</p>
</div>
</div>
</div>
</footer>
</div>
When running first time the home page dashboard shows project details and selected project name in side menu. here is the screenshot of currently showing
What exactly, I need is
here is the code i used:
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div id="projectlist" class="sidebar-sticky">
<ul class="nav flex-column nav-pills">
<li class="nav-item">
<a name="EventDrivenLLC" class="nav-link active" href="#">
<img class="img-fluid" style="width:8%" src="./Cloud Thrifty_files/generic_gcp.png">
EventDrivenLLC
<div>
<small>
ProjectId:
</small>
</div>
</a>
</li>
<li class="nav-item">
<a name="NickaJack" class="nav-link" href="#">
<img class="img-fluid" style="width:8%" src="./Cloud Thrifty_files/generic_gcp.png">
NickaJack
<div>
<small>
ProjectId:
</small>
</div>
</a>
</li>
<li class="nav-item">
<a name="NickaJack" class="nav-link" href="#">
<img class="img-fluid" style="width:8%" src="./Cloud Thrifty_files/generic_gcp.png">
NickaJack
<div>
<small>
ProjectId:
</small>
</div>
</a>
</li>
<li class="nav-item">
<a name="alarmist" class="nav-link" href="#">
<img class="img-fluid" style="width:8%" src="./Cloud Thrifty_files/generic_gcp.png">
alarmist
<div>
<small>
ProjectId: alarmist-172522
</small>
</div>
</a>
</li>
Details showned while project selected - project listed are listed from side menu, if any of side menu project is selected then it shows the details of project and project is highlighted.
<div id="decodingideas-147616" class="d-none justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">
<h1 class="h2">Project:decodingideas</h1>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">Compute API Enabled</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">Service Account Key</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">Other Errors</button>
</div>
</div>
<div class="container">
<h4>Compute Instances (0)</h4>
<table class="table table-striped h6">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">GCP Zone</th>
<th scope="col">Startup</th>
<th scope="col">Shutdown</th>
</tr>
Look at your code more closely. Look where you have:
<a name="EventDrivenLLC" class="nav-link active" href="#">
And change it to:
<a name="EventDrivenLLC" class="nav-link" href="#">
I'm not sure this will entirely fix it as I don't see your full coding for that page, but try that first.