Day 9 Navbar | Some chnages

Author: mohdibrahimofficial

11-navbar/setup/src/Navbar.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react'
-import { FaBars, FaTwitter } from 'react-icons/fa'
+import { FaBars } from 'react-icons/fa'
 import { links, social } from './data'
 import logo from './logo.svg'
 
@@ -33,8 +33,8 @@ const Navbar = () => {
  links.map((link)=>{
  const {id,url,text} = link;
  return (
- <li>
- <a key={id} href={url}>{text}</a>
+ <li key={id}>
+ <a href={url}>{text}</a>
  </li>
  )
  })
@@ -48,8 +48,8 @@ const Navbar = () => {
  social.map((social)=>{
  const {id,url,icon} = social;
  return (
- <li>
- <a key={id} href={url}>{icon}</a>
+ <li key={id}>
+ <a href={url}>{icon}</a>
  </li>
  )
  })

11-navbar/setup/src/index.css

@@ -1,9 +1,3 @@
-/*
-=============== 
-Variables
-===============
-*/
-
 :root {
  /* dark shades of primary color*/
  --clr-primary-1: hsl(205, 86%, 17%);
@@ -119,114 +113,158 @@ p {
  line-height: 1;
  }
 }
-/* global classes */
 
-/* section */
-.section {
- width: 90vw;
- margin: 0 auto;
- max-width: var(--max-width);
+/* main */
+
+nav
+{
+ background: var(--clr-white);
+ box-shadow: var(--light-shadow);
 }
 
-@media screen and (min-width: 992px) {
- .section {
- width: 95vw;
- }
+.social-icons
+{
+ display: none;
 }
 
-/*
-=============== 
-Navbar
-===============
-*/
-nav {
- background: var(--clr-white);
- box-shadow: var(--light-shadow);
+.links-container
+{
+ height: 0;
+ overflow: hidden;
+ transition: var(--transition);
+}
+
+.links-container ul
+{
+ letter-spacing: 2px;
+ text-transform: capitalize;
+ font-size: 1rem;
+}
+
+.links-container a
+{
+ color: var(--clr-grey-3);
+ text-transform: capitalize;
+ letter-spacing: var(--spacing);
+ display: block;
+ padding: .5rem 1rem;
+ transition: var(--transition);
+}
+
+.links-container a:hover
+{
+ margin: 0 0 0 1rem;
 }
-.nav-header {
+
+.links li:hover
+{
+ background: var(--clr-primary-7);
+ transition: var(--transition);
+}
+
+.nav-header
+{
  display: flex;
- align-items: center;
  justify-content: space-between;
+ align-items: center;
  padding: 1rem;
 }
-.nav-toggle {
- font-size: 1.5rem;
+
+.logo
+{
+ height: 40px;
+}
+
+
+.nav-toggle
+{
  color: var(--clr-primary-5);
- background: transparent;
  border-color: transparent;
- transition: var(--transition);
+ outline: none;
+ font-size: 1.5rem;
+ background: transparent;
  cursor: pointer;
-}
-.nav-toggle:hover {
- color: var(--clr-primary-1);
- transform: rotate(90deg);
-}
-.logo {
- height: 40px;
-}
-.links a {
- color: var(--clr-grey-3);
- font-size: 1rem;
- text-transform: capitalize;
- letter-spacing: var(--spacing);
- display: block;
- padding: 0.5rem 1rem;
  transition: var(--transition);
 }
-.links a:hover {
- background: var(--clr-primary-8);
- color: var(--clr-primary-5);
- padding-left: 1.5rem;
-}
-.social-icons {
- display: none;
+
+.nav-toggle:hover
+{
+ transform: rotate(90deg);
+ color: var(--clr-primary-1);
 }
-.links-container {
- height: 0;
- overflow: hidden;
- transition: var(--transition);
+
+.links-container a:hover
+{
+ color: white;
 }
-.show-container {
- height: 10rem;
+
+@media only screen and (min-width: 800px)
+{
+ .nav-center
+{
+ display: flex;
+ justify-content: space-around;
+ align-items: center; 
 }
-@media screen and (min-width: 800px) {
- .nav-center {
- max-width: 1170px;
- margin: 0 auto;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 1rem;
- }
- .nav-header {
- padding: 0;
- }
- .nav-toggle {
+ .nav-toggle
+ {
  display: none;
  }
- .links-container {
- height: auto !important;
+ .links-container,.social-icons
+ {
+ display: block;
+ height: auto!important;
  }
- .links {
+ .links
+ {
  display: flex;
+ justify-content: space-between;
+ align-items: center;
  }
- .links a {
- padding: 0;
- margin: 0 0.5rem;
+ .links a
+ {
+ margin:0 .5rem;
+ text-transform: capitalize;
+ color: var(--clr-grey-3);
+ transition: var(--transition);
+ letter-spacing: var(--spacing);
  }
- .links a:hover {
- padding: 0;
+
+ .links li:hover
+ {
  background: transparent;
+ 
  }
- .social-icons {
- display: flex;
- }
- .social-icons a {
- margin: 0 0.5rem;
+
+ .links a:hover
+ {
  color: var(--clr-primary-5);
- transition: var(--transition);
  }
- .social-icons a:hover {
- color: var(--clr-primary-7);
+
+ .links-container a:hover
+ {
+ margin: 0 .5rem;
+ }
+
+ .social-icons
+ {
+ display: flex;
+ justify-content: center;
+ align-items: center;
  }
+ .social-icons ul li a
+ {
+ margin: 0 .5rem;
+ color: var(--clr-primary-5);
+ transition: var(--transition);
+ }
+ .social-icons ul li a:hover
+ {
+ color: var(--clr-primary-7);
+
+ }
 }
+
+
+
+