feat: update SimpleGrid component in AboutUs for improved responsive …

app/(Admin Dashboard)/admin/page.tsx

@@ -58,11 +58,13 @@ export default function Admin() {
                 Admin Login
               </Heading>
             </Card.Header>
-            <Input placeholder={"2xl"} hideBelow={'2xl'} />
-            <Input placeholder={"xl"} hideBelow={'xl'} />
-            <Input placeholder={"lg"} hideBelow={'lg'} />
-            <Input placeholder={"md"} hideBelow={'md'} />
-            <Input placeholder={"sm"} hideBelow={'sm'} />
+            <Input placeholder={"4k"} hideBelow={'4k'} />
+            <Input placeholder={"laptopL"} hideBelow={'laptopL'} />
+            <Input placeholder={"laptop"} hideBelow={'laptop'} />
+            <Input placeholder={"tablet"} hideBelow={'tablet'} />
+            <Input placeholder={"mobileL"} hideBelow={'mobileL'} />
+            <Input placeholder={"mobileM"} hideBelow={'mobileM'} />
+            <Input placeholder={"mobileS"} hideBelow={'mobileS'} />
             <Card.Body>
               <form action="submit">
                 <Fieldset.Root>

app/(Admin Dashboard)/components/navbar.tsx

@@ -19,6 +19,7 @@ import {
   Heading,
   Center,
   Card,
+  StackProps,
 } from "@chakra-ui/react";
 import {
   MdBrightness4 as MdMoon,
@@ -63,38 +64,39 @@ export default function Navbar() {
 
   const [open, setOpen] = useState(false)
   // Container props
-  const ContainerProps = {
-    h: { mobile: "10dvh", tablet: "30dvh", laptop: "50dvh", xLarge: "70dvh", "2XLarge": "90dvh" }, //"2XLarge": "10dvh",
+  const ContainerProps: StackProps = {
+    h: { base: "12dvh" }, //"2XLarge": "10dvh",
     zIndex: 2, //2,
 
     py: { base: 5, mdTo2xl: 8 },//isFixed ? (notMobileDevice ? 8 : 2) : notMobileDevice ? 8 : 5,
 
     boxShadow: { base: "2xl" },//isFixed ? "2xl" : "none",
     bg: {
-      base: colorMode === "light"
-        ? "black"
-        : "blackAlpha.950"
-      ,
-      aboveBase: colorMode === "light"
-        ? "black"
-        : "blackAlpha.950"
+      base: "black",
     },
-    w: "100dvw",
+    w: "100%",
     className: openSans.className,//openSans.className,
     justifyContent: "space-between",
-  } as const;
+
+  };
 
   // Nav text props
-  const navTextProps = {
+  const navTextProps: StackProps = {
+    fontSize: "16px",
+    fontWeight: 600,
+    _light: { color: "white" },
+  };
+  // Mobile nav text props
+  const mobileNavTextProps: StackProps = {
     fontSize: "16px",
     fontWeight: 600,
     _light: { color: "white" },
-  } as const;
+  };
 
   return (
     <HStack {...ContainerProps} as={"nav"} color={"#f8f7f7"}>
 
-      <ChakraLink asChild pl={{ mobile: 4, laptop: 8 }}>
+      <ChakraLink asChild pl={{ base: 4, md: 8 }}>
         <NextLink href="/">
           <ChakraImage asChild >
             <Image
@@ -107,7 +109,7 @@ export default function Navbar() {
 
         </NextLink>
       </ChakraLink>
-      <HStack justifyContent={"space-evenly"} spaceX={6} px={8} hideBelow={"laptop"}>
+      <HStack justifyContent={"space-evenly"} spaceX={6} px={8} hideBelow={"md"}>
         <ChakraLink asChild>
           <NextLink href="/about">
             <Text {...navTextProps}>About</Text>
@@ -175,9 +177,9 @@ export default function Navbar() {
       </HStack>
 
       {/* Mobile Menu */}
-      <Drawer.Root size={"full"} open={open} onOpenChange={(e) => setOpen(e.open)}  >
-        <Drawer.Trigger asChild mr={8}>
-          <Button variant="outline" size="sm">
+      <Drawer.Root size={"full"} open={open} onOpenChange={(e) => setOpen(e.open)} >
+        <Drawer.Trigger asChild mr={8} hideFrom={"md"}>
+          <Button variant="outline" size="sm" color="white">
             Menu
           </Button>
         </Drawer.Trigger>
@@ -195,24 +197,24 @@ export default function Navbar() {
                     <VStack gapY={4} alignItems={"start"}>
                       <ChakraLink asChild>
                         <NextLink href="/about">
-                          <Text {...navTextProps}>About</Text>
+                          <Text {...mobileNavTextProps}>About</Text>
                         </NextLink>
                       </ChakraLink>
                       <ChakraLink asChild>
                         <NextLink href="/contact">
-                          <Text {...navTextProps}>Contact</Text>
+                          <Text {...mobileNavTextProps}>Contact</Text>
                         </NextLink>
                       </ChakraLink>
                       <ChakraLink asChild>
                         <NextLink href="/services">
-                          <Text {...navTextProps}>Services</Text>
+                          <Text {...mobileNavTextProps}>Services</Text>
                         </NextLink>
                       </ChakraLink>
 
                       <ChakraLink asChild>
                         <NextLink href="/programs">
                           <Box position={"relative"} display={"inline-block"}>
-                            <Text {...navTextProps}>
+                            <Text {...mobileNavTextProps}>
                               {/* Float the badge to the above the text */}
                               Programs
                             </Text>
@@ -227,7 +229,7 @@ export default function Navbar() {
                       <ChakraLink asChild>
                         <NextLink href="/resources">
                           <Box position={"relative"} display={"inline-block"}>
-                            <Text {...navTextProps}>
+                            <Text {...mobileNavTextProps}>
                               {/* Float the badge to the above the text */}
                               Resources
                             </Text>