Added support for mobile application (#499)

Be-Secure · Dec 19, 2023 · 35b2cf2 · 35b2cf2
1 parent 3cebaa5
commit 35b2cf2
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 45 deletions.
diff --git a/src/examples/Navbars/DefaultNavbar/index.tsx b/src/examples/Navbars/DefaultNavbar/index.tsx
@@ -20,13 +20,16 @@ import MKBox from "../../../components/MKBox";
 
 // React example components
 import DefaultNavbarDropdown from "./DefaultNavbarDropdown";
-
+import breakpoints from "../../../assets/theme/base/breakpoints";
+import MKButton from "../../../components/MKButton";
+import DefaultNavbarMobile from "./DefaultNavbarMobile";
 
 function DefaultNavbar({
   brand,
   routes,
   transparent,
   light,
+  action,
   sticky,
   relative,
   center
@@ -38,6 +41,35 @@ function DefaultNavbar({
   const [nestedDropdownEl, setNestedDropdownEl]: any = useState("");
   const [nestedDropdownName, setNestedDropdownName]: any = useState("");
   const [arrowRef, setArrowRef]: any = useState(null);
+  const [mobileNavbar, setMobileNavbar] = useState(false);
+  const [mobileView, setMobileView] = useState(false);
+
+  const openMobileNavbar = () => setMobileNavbar(!mobileNavbar);
+
+  React.useEffect(() => {
+    // A function that sets the display state for the DefaultNavbarMobile.
+    function displayMobileNavbar() {
+      if (window.innerWidth < breakpoints.values.lg) {
+        setMobileView(true);
+        setMobileNavbar(false);
+      } else {
+        setMobileView(false);
+        setMobileNavbar(false);
+      }
+    }
+
+    /**
+     The event listener that's calling the displayMobileNavbar function when
+     resizing the window.
+    */
+    window.addEventListener("resize", displayMobileNavbar);
+
+    // Call the displayMobileNavbar function to set the state with the initial value.
+    displayMobileNavbar();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", displayMobileNavbar);
+  }, []);
 
   const renderNavbarItems = routes.map(
     ({ name, icon, href, route, collapse }: any) => (
@@ -57,7 +89,6 @@ function DefaultNavbar({
         }}
         onMouseLeave={() => collapse && setDropdown(null)}
         light={light}
-
       />
     )
   );
@@ -439,7 +470,7 @@ function DefaultNavbar({
         py={1}
         px={{ xs: 4, sm: transparent ? 2 : 3, lg: transparent ? 0 : 2 }}
         width="100%"
-        borderRadius="xl"
+        // borderRadius="xl"
         shadow={transparent ? "none" : "md"}
         color={light ? "white" : "dark"}
         position={relative ? "relative" : "absolute"}
@@ -463,7 +494,7 @@ function DefaultNavbar({
           <MKBox
             component={Link}
             to="/"
-            lineHeight={2}
+            lineHeight={2} //test
             py={transparent ? 1.5 : 0.75}
             pl={relative || transparent ? 0 : { xs: 0, lg: 1 }}
           >
@@ -483,6 +514,61 @@ function DefaultNavbar({
           >
             {renderNavbarItems}
           </MKBox>
+          <MKBox ml={{ xs: "auto", lg: 0 }}>
+            {action &&
+              (action.type === "internal" ? (
+                <MKButton
+                  component={Link}
+                  to={action.route}
+                  variant={
+                    action.color === "white" || action.color === "default"
+                      ? "contained"
+                      : "gradient"
+                  }
+                  color={action.color ? action.color : "info"}
+                  size="small"
+                >
+                  {action.label}
+                </MKButton>
+              ) : (
+                <MKButton
+                  component="a"
+                  href={action.route}
+                  target="_blank"
+                  rel="noreferrer"
+                  variant={
+                    action.color === "white" || action.color === "default"
+                      ? "contained"
+                      : "gradient"
+                  }
+                  color={action.color ? action.color : "info"}
+                  size="small"
+                >
+                  {action.label}
+                </MKButton>
+              ))}
+          </MKBox>
+          <MKBox
+            display={{ xs: "inline-block", lg: "none" }}
+            lineHeight={0}
+            py={1.5}
+            pl={1.5}
+            color={transparent ? "white" : "inherit"}
+            sx={{ cursor: "pointer" }}
+            onClick={openMobileNavbar}
+          >
+            <Icon>{mobileNavbar ? "close" : "menu"}</Icon>
+          </MKBox>
+        </MKBox>
+        <MKBox
+          bgColor={transparent ? "white" : "transparent"}
+          shadow={transparent ? "lg" : "none"}
+          borderRadius="xl"
+          px={transparent ? 2 : 0}
+        >
+          {mobileView && (
+            <DefaultNavbarMobile routes={routes} open={mobileNavbar} />
+          )}
         </MKBox>
       </MKBox>
       {dropdownMenu}

diff --git a/src/pages/Presentation/sections/Counters.tsx b/src/pages/Presentation/sections/Counters.tsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 // @mui material components
 import Grid from "@mui/material/Grid";
-import Divider from "@mui/material/Divider";
 
 // React components
 import MKBox from "../../../components/MKBox";
@@ -12,47 +11,43 @@ import DefaultCounterCard from "../../../examples/Cards/CounterCards/DefaultCoun
 function Counters() {
   return (
     <MKBox component="section" py={3}>
-        <Grid container item style={{maxWidth: '100%'}}>
-          <Grid item xs={1} md={2.4}>
-            <DefaultCounterCard
-              count={1}
-              title="Security Risk"
-              description="Understand the security risk of an OSS project before consuming the code."
-            />
-          </Grid>
-          <Grid item xs={1} md={2.4} display="flex">
-            <Divider orientation="vertical" sx={{ display: { xs: "none", md: "block" }, mx: 0 }} />
-            <DefaultCounterCard
-              count={2}
-              title="Roadmap"
-              description="Stay aligned to a well-defined security roadmap."
-            />
-            <Divider orientation="vertical" sx={{ display: { xs: "none", md: "block" }, ml: 0 }} />
-          </Grid>
-          <Grid item xs={1} md={2.4} display="flex">
-            <DefaultCounterCard
-              count={3}
-              title="Visibility"
-              description="Gain visibility into threat vectors and proactively manage security."
-            />
-            <Divider orientation="vertical" sx={{ display: { xs: "none", md: "block" }, ml: 0 }} />
-          </Grid>
-          <Grid item xs={1} md={2.4} display="flex">
-            <DefaultCounterCard
-              count={4}
-              title="Patching"
-              description="Improve timely patching of OSS, driven by a defined security roadmap."
-            />
-            <Divider orientation="vertical" sx={{ display: { xs: "none", md: "block" }, ml: 0 }} />
-          </Grid>
-          <Grid item xs={1} md={2.4}>
-            <DefaultCounterCard
-              count={5}
-              title="Risk Mitigation"
-              description="Empower developers to define risk mitigation measures for OSS components based on their security levels."
-            />
-          </Grid>
+      <Grid container item xs={12} lg={12}>
+        <Grid item xs={12} md={2.3}>
+          <DefaultCounterCard
+            count={1}
+            title="Security Risk"
+            description="Understand the security risk of an OSS project before consuming the code."
+          />
         </Grid>
+        <Grid item xs={12} md={2.3}>
+          <DefaultCounterCard
+            count={2}
+            title="Roadmap"
+            description="Stay aligned to a well-defined security roadmap."
+          />
+        </Grid>
+        <Grid item xs={12} md={2.3}>
+          <DefaultCounterCard
+            count={3}
+            title="Visibility"
+            description="Gain visibility into threat vectors and proactively manage security."
+          />
+        </Grid>
+        <Grid item xs={12} md={2.3}>
+          <DefaultCounterCard
+            count={4}
+            title="Patching"
+            description="Improve timely patching of OSS, driven by a defined security roadmap."
+          />
+        </Grid>
+        <Grid item xs={12} md={2.8}>
+          <DefaultCounterCard
+            count={5}
+            title="Risk Mitigation"
+            description="Empower developers to define risk mitigation measures for OSS components based on their security levels."
+          />
+        </Grid>
+      </Grid>
     </MKBox>
   );
 }