Why when I make a navbar using next.js with react that the navbar isn't the full length? Like why isn't the navbar width 100%?
Here is the SCSS Styles:
$color-navbar-text: #000000;
$color-navbar-border: #303030;
$color-navbar-background: #707070;
/* Styles */
.navbar {
color: $color-navbar-text;
height: 60px;
display: flex;
padding: 0px 7.5%;
background: $color-navbar-background;
align-items: center;
justify-content: space-between;
.nList {
display: flex;
list-style: none;
align-items: center;
.nlItem {
.nliLink {
margin: 0px 25px;
text-decoration: none;
}
}
}
}
Here is the JSX component:
import Link from "next/link";
import moduleStyles from "../styles/Navbar.module.scss";
const Navbar = () => {
return (
<nav
className = { moduleStyles.navbar }
>
<h3>
Hello
</h3>
<ul
className = { moduleStyles.nList }
>
<li
className = { moduleStyles.nlItem }
>
<Link
href = "/"
>
<a
className = { moduleStyles.nliLink }
>
Home
</a>
</Link>
</li>
<li
className = { moduleStyles.nlItem }
>
<Link
href = "/"
>
<a
className = { moduleStyles.nliLink }
>
Home
</a>
</Link>
</li>
<li
className = { moduleStyles.nlItem }
>
<Link
href = "/"
>
<a
className = { moduleStyles.nliLink }
>
Home
</a>
</Link>
</li>
</ul>
<button>
Login
</button>
</nav>
);
}
export default Navbar;
I don't know how the navbar isn't full size because when I worked on another project it is full size. I think it might have to do with the flexbox or something.
Image
Related
I'm trying to make a reddit clone MERN and need a dropdown like the dorpdown in the reddit search bar
the styling is not an issue the issue is to make the dropdown appear when the input bar is focused
also i am using tailwindcss
can anyone please tell me how to do this?
I suppose you want to show the select not just when you focus the input but also when you are interacting with the select: you may avoid JS at all and use the :focus-within pseudoclass
.dropdown select {
display: none;
}
.dropdown:focus-within select {
display: block;
}
<div class="dropdown">
<input />
<select>
<option>option</option>
</select>
</div>
but if you need this to be working only on input focus
.dropdown select {
display: none;
}
.dropdown input:focus + select {
display: block;
}
<div class="dropdown">
<input />
<select>
<option>option</option>
</select>
</div>
const show = () => {
document.querySelector('.content').classList.add("active")
}
const hide = () => {
document.querySelector('.content').classList.remove("active")
}
.dropdown{
display: flex;
flex-direction: column;
position: relative;
width: 200px;
}
input{
width: 100%;
}
.content{
background: red;
padding: 4px;
position: absolute;
top: 100%;
width: 100%;
display: none;
}
.active{
display: flex;
}
<div class = "dropdown">
<input onFocus = "show()" onBlur = "hide()" />
<div class = "content">
Dropdown
</div>
</div>
React and Tailwind
const Dropdown = () => {
const [isFocus, setIsFocus] = React.useState(false);
return (
<div className = "w-40 border m-4">
<input
className = "w-full"
onFocus={() => setIsFocus(true)}
onBlur={() => setIsFocus(false)}
/>
{ isFocus && <div className = "bg-red-300">Dropdown</div>}
</div>
);
};
I'm trying to make a navigation bar that displays a particular element when hovered and clicked. I'd also like the other elements to remain hidden. I tried doing a few codes but it won't work even if I hovered it already.
.yearly {
display: none;
}
.evento {
display: none;
}
.year a:hover+.yearly {
display: inline-block;
background-color: #aacde2;
}
.event a:hover+.evento {
display: inline-block;
background-color: #aacde2;
font-size: 50px;
}
<div class="listo">
<ul>
<li class="year">Yearly Donations</li>
<li class="event">Events</li>
</ul>
</div>
<div class="content">
<div class="yearly">
<img src="../images/pic1.jpg" alt="Photo" width="300px">
</div>
<div class="evento">
<p>trial</p>
</div>
</div>
You can achieve this using Jquery.
$(".year a").on({
mouseover: function(e){
$(".yearly").show();
},
mouseout: function(e) {
$(".yearly").hide();
}
});
$(".event a").on({
mouseover: function(e){
$(".evento").show();
},
mouseout: function(e) {
$(".evento").hide();
}
});
.yearly {
display: none;
}
.evento {
display: none;
}
.year a:hover + .yearly {
display: inline-block;
background-color: #aacde2;
}
.event a:hover + .evento {
display: inline-block;
background-color: #aacde2;
font-size: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="listo">
<ul>
<li class="year">Yearly Donations</li>
<li class="event">Events</li>
</ul></div>
<div class="content">
<div class="yearly">
<img src="../images/pic1.jpg" alt="Photo" width="300px">
</div>
<div class="evento">
<p>trial</p>
</div>
</div>
You could call a Javascript function on hover. I'm sure there are better ways, but this works for example:
function displayYearly() {
document.getElementById("yearly").style.display = "inline-block";
}
function hideYearly() {
document.getElementById("yearly").style.display = "none";;
}
function displayEvento() {
document.getElementById("evento").style.display = "inline-block";
}
function hideEvento() {
document.getElementById("evento").style.display = "none";
}
#yearly {
display: none;
}
#evento {
display: none;
}
<div class="listo">
<ul>
<li class="year" onmouseover="displayYearly()" onmouseout="hideYearly()">
Yearly Donations
</li>
<li class="event" onmouseover="displayEvento()" onmouseout="hideEvento()">
Events
</li>
</ul>
</div>
<div class="content">
<div id="yearly">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon#2.png" alt="Photo" width="100px">
</div>
<div id="evento">
<p>trial</p>
</div>
</div>
I'm making a navigation bar and my goal is that when you're a mobile device and you click the menu button or "nav-toggle", the whole navigation bar which is hidden at the max-width of 35em should be showing up on button click.
const ulNav = document.querySelector(".ul-navbar");
const navButt = document.querySelector(".nav-toggle");
//on click visibility is checked, if its "false", the data-visible attribute in css would be set to true and if its "true" it would be set to false.
navButt.addEventListener("click", () => {
const vis = ulNav.getAttribute('data-visible');
console.log(vis)
if (vis === "false") {
ulNav.setAttribute("data-visible", true);
} else if (vis === "true") {
ulNav.setAttribute("data-visible", false);
}
});
/* p-head */
.primary-header {
align-items: center;
justify-content: space-between;
}
/* for mobile devices */
#media (max-width: 35em) {
.ul-navbar {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
right: 0;
left: 30%;
flex-direction: column;
padding: min(30vh, 10rem) 2rem;
transform: translateX(100%);
}
/* what the javscript should be changing */
.ul-navbar [data-visible="true"] {
visibility: visible;
transform: translateX(0%);
}
.nav-toggle {
display: block;
position: absolute;
z-index: 9999;
background: url(amburger.png);
background-repeat: no-repeat;
width: 1rem;
height: 1rem;
background: red;
top: 2rem;
right: 2rem;
}
}
<body>
<header class ="primary-header flex" >
<div class="logo">
<a href="index.html">
<img class = "img" src="./imges/beatlejuce.png" alt="logo">
</a>
</div>
<button class="nav-toggle" aria-controls="ul-nav" aria-expanded="false">Menu</button>
<nav>
<ul id="ul-nav" data-visible="false" class ="ul-navbar flex">
<li>home</li>
<li>code</li>
<li>photography</li>
<li>random</li>
<li>login</li>
</ul>
</nav>
</header>
What should be happening is on button click the javascript changes the css inside of the max-width media query making the data-visible="true" to "false" and back if button is to be clicked again. For some reason, nothing is changing, maybe I had some type of error in my use of data-visible, but if its not that, I dont really know how to fix this.
Because you are trying to find your element like a class. Change your const ulNav to this:
const ulNav = document.querySelector("#ul-navbar");
There is an incorrect selector here:
.ul-navbar [data-visible=true] {
visibility: visible;
transform: translateX(0%);
}
Should be:
.ul-navbar[data-visible=true] {
visibility: visible;
transform: translateX(0%);
}
I'm trying to display a overlay when a certain Input field is clicked. I'm doing this in react. How can I do this?
This is my code
import React, { Component } from 'react';
import cam from '../../Resources/img/cam.png';
import SinglePost from '../../Components/Post/single_post';
class Middle extends Component {
constructor(props) {
super(props);
this.state = {
posts: []
}
}
render() {
function popup_ques(e) {
e.preventDefault();
alert("now the overlay should appear");
}
return (
<div className="middle_div">
<input className='post_data_input' placeholder="Ask your question here" ref="postTxt" onClick={popup_ques}/>
</div>
);
}
}
export default Middle;
What is the approach I should take?
I have created a sample react component.
I hope this will help you in somewhat way to achieve what you want.
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
style : {
width : 350
}
};
this.openNav = this.openNav.bind(this);
this.closeNav = this.closeNav.bind(this);
}
componentDidMount() {
document.addEventListener("click", this.closeNav);
}
componentWillUnmount() {
document.removeEventListener("click", this.closeNav);
}
openNav() {
const style = { width : 350 };
this.setState({ style });
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
document.addEventListener("click", this.closeNav);
}
closeNav() {
document.removeEventListener("click", this.closeNav);
const style = { width : 0 };
this.setState({ style });
document.body.style.backgroundColor = "#F3F3F3";
}
render() {
return (
<div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style={{fontSize:30,cursor:"pointer"}} onClick={this.openNav}>☰ open</span>
<div
ref = "snav"
className = "overlay"
style = {this.state.style}
>
<div className = "sidenav-container">
<div className = "text-center">
<h2>Form</h2>
<p>This is a sample input form</p>
</div>
<a
href = "javascript:void(0)"
className = "closebtn"
onClick = {this.closeNav}
>
×
</a>
<div className = "list-group">
{/*your form component goes here */}
{this.props.children}
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<Test/>,
document.getElementById('test')
);
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.overlay h2, .overlay p {
color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="test"></div>
Input:
<input onFocus={() => this.setState({show_overlay: true})} />
somewhere arround in same render() function add overlay div:
<div
style={{display: this.state.show_overlay === true ? 'block' : 'none'}}
>
overlay
</div>
of course add styling to div as needed to have proper overlay effect, what's needed by your UI
To turn overlay off, you will need to add another event listener on some action, like e.g. click
<button onClick={() => this.setState({show_overlay: false})}>
Close overlay
</button>
Hello I've searching a way to display a overlay with a form when I give the focus to a certain input field. I want to do this using react. How can I do this?
my code
import React, { Component } from 'react';
class Middle extends Component {
constructor(props) {
super(props);
this.state = {
posts: []
}
}
render() {
function popup_ques(e) {
e.preventDefault();
alert("now the overlay should appear");
}
return (
<div className="middle_div">
<input className='post_data_input' placeholder="Ask your question here" ref="postTxt"
onClick={popup_ques}/>
</div>
);
}
}
export default Middle;
I have written a function to display an alert when the input field is clicked.. instead of the alert I want to display a transparent overlay with a form.
I want to do something like this
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay
Thanks inadvance.
So here i have written code to change the className of the side bar. Every time you call toggleSideBar it will change className from hideSideBar to showSideBar and vice versa. css for hideSideBar and showSideBar should be written as in the link of code school. Hope it will work.
import React, { Component } from 'react';
class Middle extends Component {
constructor(props) {
super(props);
this.state = {
sidebar: 'hideSideBar',
posts: [],
}
}
toggleSideBar() {
if(this.state.toggleBar === 'showSideBar') {
this.setState({ toggleBar: 'hideSideBar' });
} else {
this.setState({ toggleBar: 'showSideBar' });
}
}
render() {
return (
<div className="middle_div">
<input
className='post_data_input'
placeholder="Ask your question here"
ref="postTxt"
onClick={this.toggleSideBar.bind(this)}
/>
<div className={this.state.sidebar} />
// This will be the sidebar
</div>
</div>
);
}
}
export default Middle;
I have created a react component based on link you have given in question.
I hope this will help you in somewhat way to achieve what you want.
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
style : {
width : 350
}
};
this.openNav = this.openNav.bind(this);
this.closeNav = this.closeNav.bind(this);
}
componentDidMount() {
document.addEventListener("click", this.closeNav);
}
componentWillUnmount() {
document.removeEventListener("click", this.closeNav);
}
openNav() {
const style = { width : 350 };
this.setState({ style });
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
document.addEventListener("click", this.closeNav);
}
closeNav() {
document.removeEventListener("click", this.closeNav);
const style = { width : 0 };
this.setState({ style });
document.body.style.backgroundColor = "#F3F3F3";
}
render() {
return (
<div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style={{fontSize:30,cursor:"pointer"}} onClick={this.openNav}>☰ open</span>
<div
ref = "snav"
className = "overlay"
style = {this.state.style}
>
<div className = "sidenav-container">
<div className = "text-center">
<h2>Form</h2>
<p>This is a sample input form</p>
</div>
<a
href = "javascript:void(0)"
className = "closebtn"
onClick = {this.closeNav}
>
×
</a>
<div className = "list-group">
{/*your form component goes here */}
{this.props.children}
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<Test/>,
document.getElementById('test')
);
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.overlay h2, .overlay p {
color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="test"></div>