updated admin sidebar layout according to mobile screen sizes

VenketeshRushi · Oct 23, 2023 · 7310588 · 7310588
1 parent c3b39b3
commit 7310588
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "homepage": "https://github.com/VenketeshRushi/",
+  "homepage": "https://github.com/VenketeshRushi/ecom-client",
   "name": "ecom-client",
   "private": true,
   "version": "0.0.0",

diff --git a/src/pages/Footer.jsx b/src/pages/Footer.jsx
@@ -11,7 +11,7 @@ const Footer = () => {
   };
   return (
     <Box
-      h={"300px"}
+      h={"270px"}
       bg={"black"}
       color={"white"}
       mt={"40px"}
@@ -21,7 +21,11 @@ const Footer = () => {
       <Grid
         h={"220px"}
         p={"10px"}
-        templateColumns={["100%", "50% 2% 47%", "48% 2% 50%", "25% 25% 50%"]}
+        pt={5}
+        templateColumns={["100%", "100%", "48% 2% 50%", "25% 25% 50%"]}
+        gridTemplateRows={["1fr 1fr", "1fr 1fr", "1fr", "1fr"]}
+        gridAutoFlow={["row", "row", "column", "column"]}
+        alignItems={["center", "center", "start", "start"]}
       >
         <Center>
           <Flex
@@ -80,12 +84,12 @@ const Footer = () => {
         </Center>
 
         <Flex
-          mt={"20px"}
           gap={"15px"}
           flexDirection={"row-reverse"}
-          justifyContent={["right", "right", "right", "right", "right"]}
+          justifyContent={["center", "center", "right", "right", "right"]}
           color={"gray"}
           mr={["0px", "0px", "80px", "80px", "80px"]}
+          mt={["40px", "40px", "20px", "20px", "20px"]}
         >
           <IconLink
             icon={MdOutlinePersonPin}

diff --git a/src/srcADMIN/components/Dashboard/OrderChart.jsx b/src/srcADMIN/components/Dashboard/OrderChart.jsx
@@ -113,6 +113,19 @@ function OrderChart() {
     // chart.options = chartOptions;
   }, [theme]);
 
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: "top",
+      },
+      title: {
+        display: true,
+        text: "Order Line Chart",
+      },
+    },
+  };
+
   return (
     <Box
       bg={"#13141c"}
@@ -129,7 +142,7 @@ function OrderChart() {
         border: "1px solid rgba(255, 255, 255, 0.42)",
       }}
     >
-      <Line ref={chartRef} data={chartData} />
+      <Line options={options} ref={chartRef} data={chartData} />
     </Box>
   );
 }

diff --git a/src/srcADMIN/pages/AdminSidebarLayout.jsx b/src/srcADMIN/pages/AdminSidebarLayout.jsx
@@ -22,6 +22,7 @@ import {
   Divider,
   Heading,
   Button,
+  useMediaQuery,
 } from "@chakra-ui/react";
 import {
   FiHome,
@@ -67,6 +68,7 @@ const SidebarContent = ({ onClose, ...rest }) => {
             <Image src={nikeLogo} />
           </Link>
         </Box>
+
         <CloseButton display={{ base: "flex", md: "none" }} onClick={onClose} />
       </Flex>
       {LinkItems.map((link) => (
@@ -118,22 +120,25 @@ const NavItem = ({ icon, name, children, ...rest }) => {
 };
 
 const MobileNav = ({ onOpen, user, handleLogoutBtn, navigate, ...rest }) => {
+  const [isLargerThan420] = useMediaQuery("(min-width: 426px)");
   return (
     <Flex>
-      <Heading
-        as="h4"
-        size="md"
-        pl={5}
-        pt={8}
-        borderBottom={"1px solid"}
-        borderBottomColor={useColorModeValue("gray.900", "gray.700")}
-      >
-        {window.location.href
-          .split("//")[1]
-          .split("/")[1]
-          .split("admin")[1]
-          .toUpperCase()}
-      </Heading>
+      {isLargerThan420 && (
+        <Heading
+          as="h4"
+          size="md"
+          pl={5}
+          pt={8}
+          borderBottom={"1px solid"}
+          borderBottomColor={useColorModeValue("gray.900", "gray.700")}
+        >
+          {window.location.href
+            .split("//")[1]
+            .split("/")[1]
+            .split("admin")[1]
+            .toUpperCase()}
+        </Heading>
+      )}
       <Flex
         ml={{ base: 0, lg: 0 }}
         px={{ base: 4, lg: 4 }}
@@ -153,19 +158,22 @@ const MobileNav = ({ onOpen, user, handleLogoutBtn, navigate, ...rest }) => {
           aria-label="open menu"
           icon={<FiMenu />}
         />
-        <Box
-          w={"80px"}
-          display={{ base: "flex", md: "none" }}
-          fontSize="2xl"
-          fontFamily="monospace"
-          fontWeight="bold"
-        >
-          <Link to={"/"}>
-            <Image src={nikeLogo} />
-          </Link>
-        </Box>
 
-        <HStack spacing={{ base: "0", md: "6" }}>
+        {isLargerThan420 && (
+          <Box
+            w={"80px"}
+            display={{ base: "flex", md: "none" }}
+            fontSize="2xl"
+            fontFamily="monospace"
+            fontWeight="bold"
+          >
+            <Link to={"/"}>
+              <Image src={nikeLogo} />
+            </Link>
+          </Box>
+        )}
+
+        <HStack spacing={{ base: "4", md: "6" }}>
           <Menu>
             <MenuButton
               as={Button}