fix(navbar): theme btn visible in closed nav

Author: mspronesti

src/components/BtnTottleTheme.js

@@ -14,7 +14,7 @@ const BtnToggleTheme = ({ className }) => {
 
   return (
     <Button className={className + " btn-toggle"} onClick={toggleTheme}>
-      <ToggleThemeIcon style={{ marginTop: "10px", fontSize: "25px" }}/>
+      <ToggleThemeIcon style={{ fontSize: "25px" }}/>
     </Button>
   );
 };

src/components/Footer.js

@@ -17,12 +17,12 @@ function Footer() {
         <Col md="4">
         </Col>
 
-        <Col md="4">
+        <Col md="4" className="footer-copyright">
           <h3>Copyright © {year} Massimiliano Pronesti</h3>
         </Col>
 
-        <Col md="4">
-          <ul className="footer-icons">
+        <Col md="4" className="footer-social-icons">
+          <ul>
             <li className="social-icons">
               <a className="footer-social-icons"
                 href="https://github.com/mspronesti"

src/components/Navbar.js

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import Navbar from "react-bootstrap/Navbar";
 import Nav from "react-bootstrap/Nav";
-import Container from "react-bootstrap/Container";
 import { Link } from "react-router-dom";
 import BtnToggleTheme from "./BtnTottleTheme";
 
@@ -33,11 +32,6 @@ function NavBar() {
       expand="md"
       className={navColour ? "sticky" : "navbar"}
     >
-      <Container>
-        <Navbar.Brand href="/" className="d-flex">
-          {/* <img src={logo} className="img-fluid logo" alt="brand" /> */}
-        </Navbar.Brand>
-
         <Navbar.Toggle
           aria-controls="responsive-navbar-nav"
           onClick={() => {
@@ -48,6 +42,7 @@ function NavBar() {
           <span/>
           <span/>
         </Navbar.Toggle>
+      
 
         <Navbar.Collapse id="responsive-navbar-nav">
           <Nav className="mx-auto" defaultActiveKey="#home">
@@ -79,14 +74,9 @@ function NavBar() {
                 Projects
               </Nav.Link>
             </Nav.Item>
-
-            <Nav.Item>
-              <BtnToggleTheme className="col-md-12"/>
-            </Nav.Item>
-
           </Nav>
         </Navbar.Collapse>
-      </Container>
+        { !expand &&  <BtnToggleTheme/> }
     </Navbar>
   );
 }

src/style.css

@@ -14,7 +14,7 @@ html {
   --bg-color: #ffffff;
   --text-color: #24292e;
 
-  --nav-active: transparent;
+  --nav-active: #f3f3f3;
   --footer-background: transparent;
   --footer-social-icons: black;
 }
@@ -408,6 +408,7 @@ button:focus {
   padding-left: 15px;
 }
 
+
 .icon-colour {
   color: var(--green-1) !important;
 }
@@ -422,6 +423,7 @@ button:focus {
   padding-bottom: 8px !important ;
 }
 .footer-copywright {
+  flex: 1;
   text-align: center !important;
 }
 
@@ -432,8 +434,14 @@ button:focus {
 
 .footer-social-icons {
   color: var(--footer-social-icons) !important;
+  display: flex !important;
+  justify-content: center;
+  margin-top: 0.5rem;
+  padding: 0;
+  font-size: 1.1rem;
 }
 
+
 @media (max-width: 767px) {
   .footer-copywright {
     text-align: center !important;
@@ -516,6 +524,7 @@ button:focus {
   color: var(--text-color) !important;
   background-color: transparent !important;
   border-color: transparent !important;
+  position: relative !important;
 }
 .btn-toggle:hover {
   color: var(--text-color) !important;