Merge pull request #10 from kjannette/harry2

Harry2

src/Components/Navigation/Navbar.js

@@ -26,6 +26,7 @@ const CustomToggle = React.forwardRef(({ onClick }, ref) => (
 const NavbarElement = (props) => {
   //const [showMenu, setShowMenu] = useState(false);
   const [menuOpen, setMenuOpen] = useState(true);
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 440);
   const token = window.sessionStorage.getItem("token");
   const navigate = useNavigate();
   const navItems = token
@@ -56,7 +57,6 @@ const NavbarElement = (props) => {
   }
 
   function packUpAndLeave(link) {
-    console.log("packUpAndLeave!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!", link);
     navToggle();
     handleClick(link);
   }
@@ -120,6 +120,7 @@ const NavbarElement = (props) => {
             menuOpen={menuOpen}
             navToggle={navToggle}
             packUpAndLeave={packUpAndLeave}
+            token={token}
           />
         </div>
       </Navbar>

src/Components/Navigation/Navpanel.js

@@ -4,8 +4,8 @@ import "../../styles/contact.scss";
 import { Link } from "react-router-dom";
 
 export default function Navpanel(props) {
-  const { menuOpen, setMenuOpen, navToggle, packUpAndLeave } = props;
+  const { menuOpen, setMenuOpen, navToggle, packUpAndLeave, token } = props;
-  console.log("+++++++++menuOpen", menuOpen);
+
   const mobileMainHeadingClass = menuOpen
     ? "mobileMainHeadingShow"
     : "mobile-main-heading-hide";
@@ -14,8 +14,6 @@ export default function Navpanel(props) {
     ? "mobile-heading-wrapper1"
     : "mobile-heading-wrapper";
 
-  console.log("mobileMainHeadingClass", mobileMainHeadingClass);
-  console.log("mobileHeadingWrapperClass", mobileHeadingWrapperClass);
   return (
     <div className={mobileMainHeadingClass}>
       <div className={mobileHeadingWrapperClass}>
@@ -25,37 +23,71 @@ export default function Navpanel(props) {
           </div>
         </div>
         <div className="mobileHeadingLinkWrap">
-          <div className="mobile-info-box">
+          {!token ? (
-            <div className="contact-detail-one">
+            <div className="mobile-info-box">
-              <a
+              <div className="contact-detail-one">
-                className="contact-link"
+                <a
-                onClick={() => packUpAndLeave("login")}
+                  className="contact-link"
-              >
+                  onClick={() => packUpAndLeave("login")}
-                Login
+                >
-              </a>
+                  Login
+                </a>
+              </div>
+              <div className="contact-detail-two">
+                <a
+                  className="contact-link-two"
+                  onClick={() => packUpAndLeave("features")}
+                >
+                  Features
+                </a>
+              </div>
+              <div className="contact-detail-three">
+                <a
+                  className="nav-link-three"
+                  onClick={() => packUpAndLeave("signup")}
+                >
+                  Signup
+                </a>
+              </div>
+              <div className="contact-detail-one">
+                <a className="contact-link" onClick={() => packUpAndLeave("")}>
+                  Blog
+                </a>
+              </div>
             </div>
-            <div className="contact-detail-two">
+          ) : (
-              <a
+            <div className="mobile-info-box">
-                className="contact-link-two"
+              <div className="contact-detail-one">
-                onClick={() => packUpAndLeave("features")}
+                <a
-              >
+                  className="contact-link"
-                Features
+                  onClick={() => packUpAndLeave("dashboard")}
-              </a>
+                >
+                  Dashboard
+                </a>
+              </div>
+              <div className="contact-detail-two">
+                <a
+                  className="contact-link-two"
+                  onClick={() => packUpAndLeave("cases")}
+                >
+                  Cases
+                </a>
+              </div>
+              <div className="contact-detail-three">
+                <a
+                  className="nav-link-three"
+                  onClick={() => packUpAndLeave("documents")}
+                >
+                  Documents
+                </a>
+              </div>
+              <div className="contact-detail-one">
+                <a className="contact-link" onClick={() => packUpAndLeave("")}>
+                  Blog
+                </a>
+              </div>
             </div>
-            <div className="contact-detail-three">
+          )}
-              <a
-                className="nav-link-three"
-                onClick={() => packUpAndLeave("signup")}
-              >
-                Signup
-              </a>
-            </div>
-            <div className="contact-detail-one">
-              <a className="contact-link" onClick={() => packUpAndLeave("")}>
-                Blog
-              </a>
-            </div>
-          </div>
         </div>
       </div>
     </div>

src/styles/homepage.scss

@@ -784,7 +784,7 @@ li.nav-item {
 
   .heading-2-mobile {
     display: flex;
-    font-size: 1.3rem;
+    font-size: 1.365rem;
   }
 
   button.button-1 {

src/styles/login.scss

@@ -83,4 +83,10 @@
   .login-form-wrapper {
     width: 400px;
   }
+  .login-button-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: auto;
+  }
 }

src/styles/signup.scss

@@ -42,9 +42,11 @@
   flex-direction: column;
   align-items: flex-end;
 }
+
 .signup-btn {
   width: 150px;
 }
+
 .signup-passw-inputs {
   width: 100%;
 }
@@ -82,6 +84,7 @@ span {
 
   .signup-button-box {
     width: 320px;
+    align-items: center;
   }
 
   .signup-passw-inputs {