Develop Reference

how to factor out html code and have other files inherit it in vanilla js/html

I have html for a navbar (from bootstrap) which I have to copy paste every time I add a new page to my website. I want to factor out the navbar html to a separate file and have every other html file just inherit the html for it. I am using vanilla JS, HTML and CSS so stuff like {%extends ...%} is not really an option.
Navbar html:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" 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 active">
<a class="nav-link" href="about_me.html">About Me<span class="sr-only"></span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="ec.html">Extracirriculuars<span class="sr-only"></span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="interests.html">Interests<span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/dddictionary">Github</a>
</li>
</ul>
</div>
</nav>
Any help is appreciated!

react firebase auth not recognizing when user is signed in

In my react app in the header it checks if the user is signed in or not. The issue is that it thinks there is no user signed in even when there is. This wasn't a problem when I had a single page app, only now is it an issue.
Header:
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
import React from 'react'
import SignIn from "./SignIn";
import SignOut from "./SignOut";
function Dropdown() {
const user = firebase.auth().currentUser;
return (
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{user.displayName}
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/profile">My facts</a></li>
<li><a class="dropdown-item" href="#">Admin</a></li>
<li><hr class="dropdown-divider" /></li>
<li><SignOut class="dropdown-item btn btn-link text-dark" /></li>
</ul>
</li>
)
}
function Header() {
const user = firebase.auth().currentUser;
const handelSubmit = (e) => {
e.preventDefault();
}
return (
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Cool Cow Facts</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./">Home</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-link nav-link active" data-bs-toggle="modal" data-bs-target="#exampleModal">
Submit Fact
</button>
</li>
</ul>
<form onSubmit={handelSubmit}>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
{ user ? <Dropdown /> : <SignIn class="btn btn-link nav-link active text-dark" message="Sign In" /> }
</ul>
</form>
</div>
</div>
</nav>
)
}
export default Header
Any help is appreciated thanks!

Bootstrap navbar collapse not working with bundled bootstrap files

I want to include a navbar that I copied from the bootstrap example page in views of my asp.net application. The navbar is as follows,
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" asp-controller="Home" asp-action="Index">Bata</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" asp-controller="Home" asp-action="Index">Home</a>
</li>
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item">
<a class="nav-link" asp-action="ListUsers" asp-controller="Admin">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="ListPurchases" asp-controller="Purchase">Purchases</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="ListCurrencies" asp-controller="Admin">Currency Management</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="List" asp-controller="unitItem">Inventory Management</a>
</li>
}
<li class="nav-item">
<a class="nav-link" asp-controller="Contact" action="Index">Contact</a>
</li>
</ul>
#await Component.InvokeAsync("CheckoutSummary")
#await Html.PartialAsync("LoginPartial")
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
The navbar displays properly but it will not collapse when the button is clicked. The button is getting the click event you can tell since the button turns orange.
I have bundled my bootstrap and js files like this and include the vendor files in the view.
{
"outputFileName": "wwwroot/vendor.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css.map",
"node_modules/bootstrap/dist/css/bootstrap.css.map",
],
"minify": { "enabled": true }
},
{
"outputFileName": "wwwroot/vendor.min.js",
"inputFiles": [
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map",
"node_modules/jquery/dist/jquery.min.js"
],
"minify": { "enabled": false }
}
]
Is there something I could be missing why the collapse button is not working?

It sounds like you are trying to copy the functionality of the last example on the navbar page. If so, it looks like you are missing some of their classes. try including them.
Here is the code from their example. For testing you could try starting with their example and slowly incorporate what you want to be in the navbar. This will help you figure out what you are missing.
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
https://getbootstrap.com/docs/4.0/components/navbar/#external-content

Using an anchor tag to display a modal in Vue.js

I'm new to Vue.js I'm trying to make an anchor tag in my navbar component(a link), when clicked display a modal component, but i'm not able to.
I only see solutions for buttons which uses the attribute data target, that isnt available as an attribute on the anchor tag.
I'm also not trying to route to the LoginModal.vue component, what am i doing wrong and who do i go about it ?
Navbar.Vue
<template>
<nav class="navbar navbar-expand-md py-3">
<div class="container">
<a class="navbar-brand" href="/"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navlinks" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fas fa-bars" style="color: #283990; font-size:28px;"></i></span>
</button>
<div class="collapse navbar-collapse" id="navlinks">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-4">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item mx-4">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item mx-4">
<!-- <router-link class="nav-link login" to='/login'>{{msg}}</router-link> -->
<a class="nav-link login" href="/login">Log in</a>
</li>
<li class="nav-item mx-3">
<a id="jn" class="nav-link btn btn-primary border-0 px-5 py-2 joinbutton" href="/signup">Join</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
name: 'Navbar',
data () {
return {
msg: 'Log in'
}
}
}
</script>
LoginModal.Vue
<template>
<body>
<div id="LoginModal" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"> ×</button>
<h4>Sign Up For Our Newsletter!</h4>
</div>
<div class="modal-body">
<p>body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</template>
Index.Js in my router folder.NB i dont want to route the LoginModal component. whats the best practice.
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/components/Home.vue';
import LoginModal from '#/components/Login-Signup/LoginModal.vue';
Vue.use(Router)
export default new Router({
routes: [
//route records
{ //default route
path: '/',
name: 'Home',
component: Home
},
{
path: '/login',
name: 'LoginModal',
component: LoginModal
},
{
path: '/signup',
name: 'Signup',
component: LoginModal
}
]
})

I saw your code, so you want to show your modal, right??
best solution is using child component, so you don't need define a new route in vue router, just import LoginModal.Vue to Navbar.Vue, then make it on your template and use v-if to show and hide your modal with #click event
here it is:
<template>
<div>
<nav class="navbar navbar-expand-md py-3">
<div class="container">
<a class="navbar-brand" href="/"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navlinks" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fas fa-bars" style="color: #283990; font-size:28px;"></i></span>
</button>
<div class="collapse navbar-collapse" id="navlinks">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-4">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item mx-4">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item mx-4">
<!-- <router-link class="nav-link login" to='/login'>{{msg}}</router-link> -->
<a class="nav-link login" href="/login" #click="showLogin">Log in</a>
</li>
<li class="nav-item mx-3">
<a id="jn" class="nav-link btn btn-primary border-0 px-5 py-2 joinbutton" href="/signup">Join</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- style your modal and hide it with data property -->
<login-modal v-if="login"/>
</div>
</template>
<script>
import LoginModal from '#/components/Login-Signup/LoginModal';
export default {
name: 'Navbar',
components: { LoginModal },
data () {
return {
msg: 'Log in',
login: false,
}
},
methods: {
showLogin(e) {
// disable anchor tag
e.preventDefault();
this.login = true;
}
}
}
</script>
Finally, remember it's better if you use router-link instead of a tag in your vue files!
see more references in:
https://router.vuejs.org/api/#router-link
Also if you want to make professional modals with extra features, try vue-modal too.
I hope can help...

How to right align text in Navigation Bar - HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
So I just recently started practicing HTML and CSS on my own time. I just started building a website using bootstrap and I'm having trouble with this navigation bar: navbar You can find it on this webstie: https://getbootstrap.com/docs/4.0/components/navbar/
and scroll down to "Nav" (i dont know how to include HTML code here)
What I want to do is have the items "Home" "Features" "Pricing" and "Disabled" "Search" (A search bar that I will implement) floating to the right. Eventually I will have something like:
NavBar-----------------------------------------------------------------Home Features Pricing Disabled #Search
But I can't seem to do it. I've tried to use span tags, ul tags, I've tried to remove some div elements but nothing is working. Any help?
Also I have a question. If I put:
"Navbar"
inside a div, then it is still inline with the rest of the nav elements (Home, Pricing etc...) which are in a different div. How is that possible?
Aren't divs block elements?

Learn and use FlexBox
It is a very powerful css layout library that is supported by most browsers.
Check out an example here for the Nav Bar. There are many ways you can right align. One way is to have an empty element just to the left of the nav elements that takes up remaining space which pushes the elements all the way to the right.
To achieve this for the Bootstrap example
All I did was add
<div style="flex-grow: 1;"></div>
Right below
<div class="collapse navbar-collapse" id="navbarSupportedContent">
And right above
<ul class="navbar-nav mr-auto">

If you're only looking to use Bootstrap features, you can achieve this by wrapping your links with this:
<ul class="nav navbar-nav navbar-right">
<links>
</ul>
Without using bootstrap:
.align-left { float: left }
.align-right { float: right }
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="align-left">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse align-right" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
<div style="clear: both;"></div>
</nav>

You can use the class mr-auto to fix the elements to the right.
Your code will become :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>