Develop Reference

I have an error about vue2.js and its router

I have a navbar,Home and login elements. It is simple login page. I want to add api to go home and login page. For this i have router.js file. I am sharing all of file here.
This is my Main.js
import Vue from 'vue'
import App from './App.vue'
import useRoute from './router'
Vue.config.productionTip = false
new Vue({
useRoute,
render: h => h(App),
}).$mount('#app')
And Router.js
import Vue from 'vue'
import { useRoute } from 'vue-router'
import Home from './components/Home.vue'
import LoginPage from './components/Login.vue'
Vue.use(useRoute)
export default new useRoute({
routes: [
{ path: '/', component: Home },
{ path: '/login', component: LoginPage }
]
})
App.vue
<template>
<div id="app">
<NavBar />
<div class="auth-wrapper">
<div class="auth-inner">
<router-view />
</div>
</div>
</div>
</template>
<script>
import NavBar from './components/Nav.vue'
export default {
name: 'App',
components: {
NavBar,
}
}
</script>
<style>
#import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800');
* {
box-sizing: border-box;
}
body {
background: #1C8EF9 !important;
min-height: 100vh;
display: flex;
font-weight: 400;
font-family: 'Fira Sans', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
label,
.span {
font-weight: 500;
font-family: 'Fira Sans', sans-serif;
}
body,
html,
#app,
#root,
.auth-wrapper {
width: 100%;
height: 100%;
}
#app {
text-align: center;
}
.navbar-light {
background-color: #ffffff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
}
.auth-wrapper {
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
}
.auth-inner {
width: 450px;
margin: auto;
background: #ffffff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
padding: 40px 55px 45px 55px;
border-radius: 15px;
transition: all .3s;
}
.auth-wrapper .form-control:focus {
border-color: #167bff;
box-shadow: none;
}
.auth-wrapper h3 {
text-align: center;
margin: 0;
line-height: 1;
padding-bottom: 20px;
}
.custom-control-label {
font-weight: 400;
}
.forgot-password,
.forgot-password a {
text-align: right;
font-size: 13px;
padding-top: 10px;
color: #7f7d7d;
margin: 0;
}
.forgot-password a {
color: #167bff;
}
</style>
And for easy finding i am sharing console error
And also i want to share this information that if i write "/login" or "/" it just going to home page,and nothing changing
vue.runtime.esm.js?c320:4605 [Vue warn]: inject() can only be used inside setup() or functional components.
warn # vue.runtime.esm.js?c320:4605
vue.runtime.esm.js?c320:4605 [Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App> at src/App.vue
<Root>

Card position is not on the right side of the web

Please help, I'm just learning how to make Cards using react js. below is the script. when I run it, the position of the card that should be on the right side is still on the left.
how to get div.card to be on the right side?
What's wrong with my code?
1. Services.jsx
import React from 'react'
import './Services.css'
import HeartEmoji from "../../img/heartemoji.png";
import Glasses from "../../img/glasses.png";
import Humble from "../../img/humble.png";
import Resume from './resume.pdf';
import Card from '../Card/Card';
import { themeContext } from '../../Context';
import { useContext } from 'react';
import { motion } from 'framer-motion';
const Services = () => {
const transition = {duration : 2, type: 'spring'}
const theme = useContext(themeContext);
const darkMode = theme.state.darkMode;
return (
<div className="services" id='Services'>
{/* left side */}
<div className="awesome">
<span style={{color: darkMode? 'white': ''}}>My Awesome</span>
<span>services</span>
<spane>
Lorem ispum is simpley dumy text of printing of printing Lorem
<br />
ispum is simpley dummy text of printing
</spane>
<a href={Resume} download>
<button className="button s-button">Download CV</button>
</a>
<div className="blur s-blur1" style={{ background: "#ABF1FF94" }}></div>
</div>
{/* right side */}
<div className="cards">
{/* first card */}
<motion.div
whileInView={{left: '14rem'}}
initial={{left: '25rem'}}
transition={transition}
style={{left: '14rem'}}
>
<Card
emoji = {HeartEmoji}
heading = {'Design'}
detail = {"Figma, Sketch, Photoshop, Adobe, Adobe xd"}
/>
</motion.div>
{/* second card */}
<motion.div
whileInView={{left: '14rem'}}
initial={{left: '25rem'}}
transition={transition}
style={{ top: "54rem", left: "10rem" }}
>
<Card
emoji={Glasses}
heading={"Developer"}
detail={"Html, Css, JavaScript, React"}
/>
</motion.div>
{/* 3rd card */}
<motion.div
whileInView={{left: '14rem'}}
initial={{left: '25rem'}}
transition={transition}
style={{ top: "60rem", left: "14rem" }}
>
<Card
emoji={Humble}
heading={"UI/UX"}
detail={
"Lorem ispum dummy text are usually use in section where baalabalalala thank you"
}
/>
</motion.div>
<div className="blur s-blur2" style={{ background: "var(--purple)"}}></div>
</div>
</div>
)
}
export default Services
2. Card.jsx
import React from 'react'
import './Card.css'
const Card = ({emoji, heading, detail}) => {
return (
<div className="card">
<img src={emoji} alt="" />
<span>{heading}</span>
<span>{detail}</span>
<button className="c-button">LEARN MORE</button>
</div>
)
}
export default Card
3. Services.css
.services {
padding: 0 3rem 0 3rem;
display: flex;
height: 90vh;
margin-bottom: 8rem;
margin-top: 9rem;
margin-bottom: 13rem;
}
.awesome{
display: flex;
flex-direction: column;
position: relative;
}
.awesome > :nth-child(1) {
color: var(--black);
font-size: 2.5rem;
font-weight: bold;
}
.awesome > :nth-child(2) {
color: var(--orange);
font-size: 2.5rem;
font-weight: bold;
}
.awesome > :nth-child(3) {
color: var(--gray);
font-size: 14px;
margin-top: 1rem;
}
.s-button{
width: 10rem;
height: 2.5rem;
margin-top: 1rem;
}
.cards>{
position: relative;
}
.cards>*{
position: absolute;
}
/* blur */
.s-blur2 {
left: 14rem;
top: 8rem;
}
.s-blur1 {
top: 13rem;
left: -18rem;
}
#media screen and (max-width: 480px) {
.services{
margin-top: 0;
flex-direction: column;
gap: 5rem;
height: 66rem;
padding: 0;
}
.cards{
display: flex;
flex-direction: column;
gap: 17rem;
}
.cards>*{
position: static;
}
}
4. Card.css
.card {
width: 10rem;
height: 13rem;
position: absolute;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
width: 10rem;
text-align: center;
background: rgba(255, 255, 255, 0.26);
border: 7px solid var(--orangeCard);
box-shadow: var(--boxShadow);
border-radius: 20px;
padding: 0px 26px 2rem 26px;
}
.card span:nth-of-type(2) {
color: var(--gray);
font-size: 16px;
}
.card > img {
transform: scale(0.6);
margin-bottom: -2rem;
}
.c-button {
background: #ffffff;
box-shadow: 0px 19px 60px rgba(0, 0, 0, 0.08);
border-radius: 7px;
border: none;
padding: 10px;
font-size: 16px;
color: #5290FD;
}
#media screen and (max-width: 480px) {
.card{
width: auto;
}
}

i help you to solve the problem, first of all, you can use display flex on your parent and justify content between or evenly, in case of this the parent class is "services", so the code css for className="services" is :
.services {
padding: 0 3rem 0 3rem;
display: flex;
justify-content: evenly;
align-items: center;
height: 90vh;
margin-bottom: 8rem;
margin-top: 9rem;
margin-bottom: 13rem;
}
i hope this can help you :)

How can I make my content appear next to my sidebar in react?

When I call my Navbar component in App.js it appears on top of everything on the main page and I don't know how to get it so that the Navbar appears to the left of the screen with the main content component right next to it
This is what it looks like
I'll really appreciate it if anyone can help me with this
import './App.css';
import Navbar from './components/Navbar';
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Dashboard from './pages/Dashboard';
import Employee from './pages/Employee';
import Salary from './pages/Salary';
import Calendar from './pages/Calendar';
function App() {
return (
<>
<BrowserRouter>
<Navbar/>
<Routes>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="salary" element={<Salary />} />
<Route path="employee" element={<Employee />} />
<Route path="calendar" element={<Calendar />} />
</Routes>
</BrowserRouter>
</>
);
}
export default App;
Here is the Navbar component
import React, { useState} from 'react'
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import { IconContext } from 'react-icons';
import { SidebarData } from './SidebarData';
import './Navbar.css';
import { Link } from 'react-router-dom'
function Navbar() {
const [sidebar, setSidebar] = useState(false);
const showSidebar = () => setSidebar(!sidebar);
return (
<>
<IconContext.Provider value={{color: '#fff'}}>
<div className="navbar">
<Link to="#" className="menu-bars">
<FaIcons.FaBars onClick={showSidebar} />
</Link>
</div>
<nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
<ul className='nav-menu-items' onClick={showSidebar} >
<li className='navbar-toogle'>
<Link to ="#" className='menu-bars'>
<AiIcons.AiOutlineClose/>
</Link>
</li>
{SidebarData.map((item, index) => {
return (
<li key={index} className={item.cName}>
<Link to ={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
)
})}
</ul>
</nav>
</IconContext.Provider>
</>
)
}
export default Navbar
The Navbar css
.navbar {
background-color: #060b26;
height: 80px;
display: flex;
justify-content: start;
align-items: center;
}
.menu-bars {
margin-left: 2rem;
font-size: 2rem;
background: none;
}
.nav-menu {
background-color: #060b26;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 850ms;
}
.nav-menu.active {
left: 0;
transition: 350ms;
}
.nav-text {
display: flex;
justify-content: start;
align-items: center;
padding: 8px 0px 8px 16px;
list-style: none;
height: 60px;
}
.nav-text a {
text-decoration: none;
color: #f5f5f5;
font-size: 18px;
width: 95%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
.nav-text a:hover {
background-color: #1a83ff;
}
.nav-menu-items {
width: 100%;
}
.navbar-toggle {
background-color: #060b26;
width: 100%;
height: 80px;
display: flex;
justify-content: start;
align-items: center;
}
span {
margin-left: 16px;
}

Hamburger Transitions not working in react and onClick event too

The aim of my game - to get a hamburger icon to show transition to a cross on click, then when clicked again to revert back to its burger state. But I don't know why it's not working please help!!
I want that my hamburger should show my given transition when I click on it.
App.JSX File
import Navbar from "./Components/Navbar/navbar";
import Intro from "./Components/Intro/intro";
import About from "./Components/About/about";
import Skills from "./Components/Skills/skill";
import Portfolio from "./Components/portfolio/portfolio";
import Contact from "./Components/Contact/contact";
import "./app.scss";
import { useState } from "react";
function App() {
const [menuopen, setMenuOpen] = useState(true);
return (
<div className="app">
{/* //Component Calling */}
<div className="navbar">
{" "}
<Navbar menuopen={menuopen} setMenuOpen={setMenuOpen} />
</div>
<div className="sections">
<Intro />
<About />
<Skills />
<Portfolio />
<Contact />
</div>
</div>
);
}
export default App;
navbar.jsx
import "./navbar.scss";
import PersonIcon from "#material-ui/icons/Person";
import MailIcon from "#material-ui/icons/Mail";
export default function navbar({ menuopen, setMenuOpen }) {
return (
<div className={"navbar" + (menuopen && "active")}>
<div className="wrapper">
<div className="left">
<a href="#intro" className="logo">
nishant.
</a>
<div className="itemContainer">
<PersonIcon className="icon" />
<span>+91 6386 694 7041</span>
</div>
<div className="itemContainer">
<MailIcon className="icon" />
<span>yadavnishant995#gmail.com</span>
</div>
</div>
<div className="right">
<div className="hamburger " onClick={() => setMenuOpen(!menuopen)}>
<span className="line 1"></span>
<span className="line 2"></span>
<span className="line 3"></span>
</div>
</div>
</div>
</div>
);
}
navbar.scss
#import "../../global.scss";
.navbar {
width: 100%;
height: 70px;
background-color: white;
color: $mainColor;
position: fixed;
top: 0;
z-index: 3;
transition: all 1s ease;
.wrapper {
padding: 10px 30px;
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.logo {
font-size: 40px;
font-weight: 700;
text-decoration: none;
color: inherit;
margin-right: 40px;
}
.itemContainer {
display: flex;
align-items: center;
margin-left: 30px;
.icon {
font-size: 18px;
margin-right: 5px;
}
span {
font-size: 15px;
font-weight: 500;
}
}
}
.right {
.hamburger {
width: 32px;
height: 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
span {
width: 100%;
height: 3px;
background-color: $mainColor;
transform-origin: left;
transition: all 2s ease;
}
}
}
}
&.active {
background-color: $mainColor;
color: white;
.hamburger {
span {
&:first-child {
background-color: white;
transform: rotate(45deg);
}
&:nth-child(2) {
opacity: 0;
}
&:last-child {
background-color: white;
transform: rotate(-45deg);
}
}
}
}
}

As as said, it would be easier to understand your code with a live example, but I suspect it doesn't work because of this:
<div className={"navbar" + (menuopen && "active")}>
When menuopen is false, the className is: "navbarfalse".
When it's true, it becomes: "navbaractive"
You obviously need a space after navbar. I recommend you to write instead:
<div className={`navbar ${menuopen ? "active" : ""}`}>

I'm trying to include CSS code in js file. But not working

So I'm new to this I don't really know what I'm doing wrong I'm trying to use some CSS code in JS file but not working
it shows a white screen
it suppose to style the Navbar but the code inside the back quotes doesn't work
maybe the reason is silly but I'm new to this so I've no idea why should I add
I hope you could help me
this is the code:
CSS:
import styled from 'styled-components';
import {Link as LinkR} from 'react-router-dom'
export const Nav = styled.nav`
background: #000;
height: 80px;
/*margin-top: -80px;*/
display: flex;
justify-content: center;
align-items: center;
postiion: sticky;
top: 0;
z-index: 10;
#media screen and (max-width: 960px){
transition: 0.8s all ease;
}
`
export const NavbarContainer = styled.div`
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
padding: 0 24px;
max-width: 1100px;
`
export const NavLogo = styled(LinkR)`
color: red;
justify-content: flex-start;
cursor: pointer;
font-size: 1.5rem;
display: flex;
align-items: center;
margin-left: 24px;
font-weight: bold;
text-decoration: none;
`
///////////////////////////////////////////////////////
HTML:
import React from 'react'
import { Nav , NavbarContainer , NavLogo} from './navparElements'
function index() {
return (
<>
<Nav>
<NavbarContainer>
<NavLogo to='/'>GUIDECK</NavLogo>
</NavbarContainer>
</Nav>
</>
)
}
export default index
///////////////////////////////////////////////////////
and:
import './App.css';
import Navbar from './componant/Navbar';
import {BrowserRouter as Router} from 'react-router-dom'
function App() {
return (
<Router>
<Navbar />
</Router>
);
}
export default App;

There are some typos in your code, you must be following this Youtube tutorial right? CMIIW. Before learn react you should have a basic understanding of how JSX works in react and how to styling a component in react. In this case, you're using CSS-in-JS library called styled-components, you can learn more about styled-components in this link. Here some of your code that I already fix it:
// navbarElements.js
import styled from 'styled-components';
import {Link as LinkR} from 'react-router-dom'
export const Nav = styled.nav`
background: #000;
height: 80px;
/*margin-top: -80px;*/
display: flex;
justify-content: center;
align-items: center;
postiion: sticky;
top: 0;
z-index: 10;
#media screen and (max-width: 960px){
transition: 0.8s all ease;
}
`
export const NavbarContainer = styled.div`
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
padding: 0 24px;
max-width: 1100px;
`
export const NavLogo = styled(LinkR)`
color: red;
justify-content: flex-start;
cursor: pointer;
font-size: 1.5rem;
display: flex;
align-items: center;
margin-left: 24px;
font-weight: bold;
text-decoration: none;
`
// Navbar.js
import React from 'react'
import { Nav , NavbarContainer , NavLogo} from './navbarElements'
function index() {
return (
<>
<Nav>
<NavbarContainer>
<NavLogo to='/'>GUIDECK</NavLogo>
</NavbarContainer>
</Nav>
</>
)
}
export default index
// App.js
import './App.css';
import Navbar from './component/Navbar';
import {BrowserRouter as Router} from 'react-router-dom'
function App() {
return (
<Router>
<Navbar />
</Router>
);
}
export default App;

I fixed this issue by installing the vscode-styled-components extension.
https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components.
Here is the original solution:
https://stackoverflow.com/a/57743179/13996311