We Keep Coding

Trying to implement a mobile menu display and hide on screen resize using a react component an external style file and tailwind

Trying to implement a mobile menu display and hide on screen resize using a react component an external style file and tailwind to close a mobile nave when a button is clicked
In the process of trying to implement a react and tailwind version of the nav menu in the below github link which was done using tailwind and CSS
https://github.com/bradtraversy/tailwind-course-projects/blob/main/website-projects/shortly/js/script.js
The webpage looks something like the below URL
https://tailwindfromscratch.com/website-projects/shortly/index.html
Basically by trying to implement a react version of the function "navToggle"
Please advise me on how I can toggle the class state by using the Boolean state value. If true, to add the class name to the className property in the component file or changes to make in the class file or both
Thanks
Here's my code below
Main component
import React, {useState} from 'react';
import mainLogo from '../../../public/assets/images/logo.png';
import {NavLink} from "#remix-run/react";
const Header = () => {
const [menuIsOpen, setMenuIsOpen] = useState("false");
// Toggle Mobile Menu
const navToggle= () => {
setMenuIsOpen(!menuIsOpen);
};
return (
<>
{/*Nav Container*/}
<nav className="relative container mx-auto p-6">
{/*Flex Container For All Items*/}
<div className="flex items-center justify-between">
{/*Flex Container For Logo/Menu*/}
<div className="flex items-center space-x-20">
{/*Logo*/}
<NavLink className='d-lg-none' to='/'>
<img src={mainLogo} alt='Logo' />
</NavLink>
{/*Left Menu*/}
<div className="hidden space-x-8 font-bold lg:flex">
<NavLink to='/' className="text-grayishViolet hover:text-veryDarkViolet">
Home
</NavLink>
<NavLink to='/about' className="text-grayishViolet hover:text-veryDarkViolet">
About
</NavLink>
<NavLink to='/services' className="text-grayishViolet hover:text-veryDarkViolet">
Products & Businesses
</NavLink>
<NavLink to='/contacts' className="text-grayishViolet hover:text-veryDarkViolet">
Contact us
</NavLink>
</div>
</div>
{/*Right Buttons Menu*/}
<div
className="hidden items-center space-x-6 font-bold text-grayishViolet lg:flex"
>
<div className='header-mail d-xl-block d-none'>
Email: xxx#xxxxxxxxxxxxx.xxx
</div>
</div>
{/*Hamburger Button*/}
<button
onClick={navToggle}
name="menu-btn"
id="menu-btn"
className="block hamburger lg:hidden focus:outline-none"
type="button"
>
<span className="hamburger-top"></span>
<span className="hamburger-middle"></span>
<span className="hamburger-bottom"></span>
</button>
</div>
{/*Mobile Menu*/}
<div
id="menu"
className="absolute hidden p-6 rounded-lg bg-darkViolet left-6 right-6 top-20 z-100"
>
<div
className="flex flex-col items-center justify-center w-full space-y-6 font-bold text-white rounded-sm"
>
<NavLink to='/' className="w-full text-center">Home</NavLink>
<NavLink to='/about' className="w-full text-center">About</NavLink>
<NavLink to='/services' className="w-full text-center">Services</NavLink>
<NavLink to='/contacts' className="w-full text-center">Contact us</NavLink>
</div>
</div>
</nav>
</>
);
};
export default Header;
Style file
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.hamburger {
cursor: pointer;
width: 24px;
height: 24px;
transition: all 0.25s;
position: relative;
}
.hamburger-top,
.hamburger-middle,
.hamburger-bottom {
content: '';
position: absolute;
width: 24px;
height: 3px;
top: 0;
left: 0;
background: #9c9aa6;
transform: rotate(0);
transition: all 0.5s;
}
.hamburger-middle {
transform: translateY(7px);
}
.hamburger-bottom {
transform: translateY(14px);
}
.open {
transform: rotate(90deg);
transform: translateY(0px);
}
.open .hamburger-top {
transform: rotate(45deg) translateY(6px) translateX(6px);
}
.open .hamburger-middle {
display: none;
}
.open .hamburger-bottom {
transform: rotate(-45deg) translateY(6px) translateX(-6px);
}

remove the hidden class from the menu div and use the menuIsOpen as a condition to display the menu
{/*Mobile Menu*/}
{ menuIsOpen && (
<div
id="menu"
className="absolute p-6 rounded-lg bg-darkViolet left-6 right-6 top-20 z-100"
>
<div
className="flex flex-col items-center justify-center w-full space-y-6 font-bold text-white rounded-sm"
>
<NavLink to='/' className="w-full text-center">Home</NavLink>
<NavLink to='/about' className="w-full text-center">About</NavLink>
<NavLink to='/services' className="w-full text-center">Services</NavLink>
<NavLink to='/contacts' className="w-full text-center">Contact us</NavLink>
</div>
</div>
)
}

flex box css nav bar need the text to be centered

Just a quick question for CSS tailwind
I want the letters in the boxes to be centered within the box, can someone show me what to change to make this ?
At the moment the text in the box are left aligned but the problem is that
className={` md:px-[30px] ease-in duration-100 bg-gray-900 transition-colors ${
fixed
? "fixed w-full h-20 shadow-md z-[100] bg-gray-900 shadow-gray-900 border-b-2 border-[black]"
: " w-full h-20 z-[100] "
} `}
>
<div className="flex text-white justify-between items-center w-full h-full pl-[10px] px-2 2xl:px-16 ">
<div className="relative w-[65px] h-[65px] ">
<Image
fill
src="/projects/logo.jpeg"
className="absolute object-fill rounded-full "
/>
</div>
<div>
<ul
className={` ${
fixed ? "hidden md:flex text-white" : " hidden md:flex"
} md:hidden lg:flex`}
>
<Link href="/#intro" prefetch={false}>
<li className="ml-10 text-small uppercase hover-border-b">
Home
</li>
</Link>
If possible can you also tell me how to unhide the box layout (the lines that form the box) please

There are two ways to do this. The first example you can use text-align: center and padding-top properties. If you calc() 1/2 the height of your element minus 1em, that will center the text top and bottom.
text-align: center;
padding-top: calc(50px - 1em);
However, this will not ensure the text is centered vertically if the size of your element changes in the future. A simpler and more robust method is to set your element to display: flex with justify-content and align-items set to center.
#yourDiv {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid blue;
}
<div id="yourDiv">Your text</div>
As for the rounded border, that appears to be a CSS class - you may want to search through your code for any border properties that are set on the element or pseudo-elements.

Javascript to auto animate carousel used together with controls

I have a carousel which has next and previous buttons as well as clickable indicator "blobs" to show which image is currently visible. It's built using only CSS and radio inputs with labels. (see https://tailwind-elements.com/docs/standard/components/carousel/ for my starting point).
document.querySelectorAll('.carousel').forEach((carousel) => {
animate_carousel(carousel);
carousel.querySelectorAll("input[type='radio']").forEach((input) => {
input.addEventListener('change', function() {
animate_carousel(carousel);
});
});
});
function animate_carousel(carousel) {
setTimeout(function() {
let radio = carousel.querySelector('input[type="radio"]:checked');
let next = carousel.querySelector('label.control-' + parseInt(radio.dataset.index, 10) + '.next');
carousel.querySelector('input#' + next.getAttribute('for')).click();
animate_carousel(carousel);
}, 5000, carousel);
}
.carousel-open:checked+.carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
-webkit-transition: opacity 0.6s ease;
transition: opacity 0.6s ease;
}
[id^="carousel-"][id$="-0"]:checked~.control-0,
[id^="carousel-"][id$="-1"]:checked~.control-1,
[id^="carousel-"][id$="-2"]:checked~.control-2 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 4px;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.carousel-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
[id^="carousel-"][id$="-0"]:checked~.control-0~.carousel-indicators li:nth-child(1) .carousel-bullet,
[id^="carousel-"][id$="-1"]:checked~.control-1~.carousel-indicators li:nth-child(2) .carousel-bullet,
[id^="carousel-"][id$="-2"]:checked~.control-2~.carousel-indicators li:nth-child(3) .carousel-bullet {
color: #2b6cb0;
/*Set to match the Tailwind colour you want the active one to be */
}
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="carousel relative rounded-lg relative overflow-hidden shadow-xl border-4 bg-white border-white my-4">
<div class="carousel-inner relative overflow-hidden rounded-b-md rounded-t-sm w-full">
<input class="carousel-open" data-index="0" type="radio" id="carousel-1-0" name="carousel-1" aria-hidden="true" hidden="">
<div class="carousel-item absolute opacity-0 bg-center bg-no-repeat h-0 bg-cover" style="padding-bottom: 33.33%; background-image: url(https://mdbootstrap.com/img/new/slides/054.jpg);"></div>
<label for="carousel-1-1" class="control-0 w-8 h-8 ml-2 sm:ml-3 md:ml-4 lg:ml-5 md:ml-10 absolute cursor-pointer hidden font-bold rounded-full leading-tight text-center z-10 inset-y-0 left-0 my-auto flex justify-center content-center">
<
</label>
<label for="carousel-1-1" class="next control-0 w-8 h-8 mr-2 sm:mr-3 md:mr-4 lg:mr-5 absolute cursor-pointer hidden rounded-full leading-tight text-center z-10 inset-y-0 right-0 my-auto">
>
</label>
<input class="carousel-open" data-index="1" type="radio" id="carousel-1-1" name="carousel-1" aria-hidden="true" hidden="" checked="checked">
<div class="carousel-item absolute opacity-0 bg-center bg-no-repeat h-0 bg-cover" style="padding-bottom: 33.33%; background-image: url(https://mdbootstrap.com/img/new/slides/043.jpg);"></div>
<label for="carousel-1-0" class="control-1 w-8 h-8 ml-2 sm:ml-3 md:ml-4 lg:ml-5 md:ml-10 absolute cursor-pointer hidden font-bold rounded-full leading-tight text-center z-10 inset-y-0 left-0 my-auto flex justify-center content-center">
<
</label>
<label for="carousel-1-0" class="next control-1 w-8 h-8 mr-2 sm:mr-3 md:mr-4 lg:mr-5 absolute cursor-pointer hidden rounded-full leading-tight text-center z-10 inset-y-0 right-0 my-auto">
>
</label>
<ol class="carousel-indicators">
<li class="inline-block">
<label for="carousel-1-0" class="carousel-bullet cursor-pointer text-xs block text-white hover:text-blue-700 opacity-75">
•
</label>
</li>
<li class="inline-block">
<label for="carousel-1-1" class="carousel-bullet cursor-pointer text-xs block text-white hover:text-blue-700 opacity-75">
•
</label>
</li>
</ol>
</div>
</div>
I'm trying to make this automatically scroll through the images every 5 seconds. This works unless I click the buttons to manually navigate through the images. Then it returns the following error.
Uncaught DOMException: Failed to execute 'removeNamedItem' on
'NamedNodeMap': No item with name 'checked' was found.
I'm not sure why I'm getting this error though as there does appear to be a checked input.

Smooth sidebar toggle animation with vuejs and tailwind

I'm making a slide sidebar with vuejs and tailwind. It works but feels kind of sluggish. Is there a way to make it smoother ?
working codepen example
.slide-enter-active {
animation: slideIn 1s ease;
}
.slide-leave-active {
animation: slideIn 1s ease reverse;
}
#keyframes slideIn {
0% {max-width: 0%;}
50% {max-width: 50%;}
100% {max-width: 100%}
}
<script src="https://unpkg.com/vue#3"></script>
<button #click="isOpen = !isOpen" class="bg-blue-200 p-5">
<span v-if="isOpen">Open</span>
<span v-else>Close</span>
</button>
<div class="flex flex-row max-w-7xl mx-auto min-h-screen">
<transition name="slide">
<div class="flex flex-col w-64 shadow-xl sm:rounded-lg bg-blue-200" v-if="isOpen">
<div class="min-h-screen">sidebar</div>
</div>
</transition>
<div class="flex w-full min-h-screen bg-red-400">
content
</div>
</div>

You should use transition instead of animation and target the width property :
.slide-enter-active, .slide-leave-active {
transition: width 1s;
}
.slide-enter, .slide-leave-to{
width:0;
}
LIVE DEMO

the header shakes/tremble when I scroll - jQuery Scrolling problem

I'm completely blocked, I don't understand why the header shakes/tremble when I scroll with this jquery script
$(window).scroll(function() {
if ($(this).scrollTop() >= 100) {
$(".logo").css({ "height": "0px" });
$(".logo img").hide();
};
if ($(this).scrollTop() <= 100) {
$(".logo").css({
"height": "95px",
"-webkit-transition": "all 0.3s ease",
"-moz-transition": "all 0.3s ease",
"-ms-transition": "all 0.3s ease",
"-o-transition": "all 0.3s ease",
"transition": "all 0.3s ease"
});
$(".logo img").fadeIn();
}
});
this is the html file content
<header class="d-flex justify-content-end sticky-top">
<div class="container">
<div class="row logo">
<div class="col-12 text-center mt-2">
<img src="/images/logo.png" alt="Logo">
</div>
</div>
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light">
</nav>
</div>
</div>
</div>
</header>
Can anyone help find why?

Already fixed!!!
As you can see I was using the sticky-top bootstrap class for header tag, this class apply position:sticky; property.
This cause the jquery detects that when the scrollTop was greater than 100 the div of the logo image changed its height therefore the scrollTop was again less than 100 and the div reappeared and remained in that game!
I just change to position:fixed; and the scrolling starts to work correctly.

Instead of adding the CSS transition using JS, create a class and use jquery functions addClass and removeClass
$(window).scroll(function() {
if ($(this).scrollTop() >= 100) {
$(".logo").removeClass('effect');
$(".logo img").fadeOut();
};
if ($(this).scrollTop() <= 100) {
$(".logo").addClass('effect');
$(".logo img").fadeIn();
}
});
* {
margin: 0;
padding: 0;
}
.container {
height: 1000px;
}
.logo {
top: 2px;
left: 5px;
position: sticky;
height: 95px;
width: 95px;
overflow: hidden;
}
.logo img {
height: 100%;
}
.effect {
height: 95px;
transition: linear 0.3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
<div class="logo">
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" />
</div>
</div>