zerrium · zerrium · Mar 3, 2026 · Mar 3, 2026
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
@@ -229,7 +229,7 @@ const SidebarContent = ({ onClose, isFullScreen, ...rest }: SidebarProps) => {
                     {link.child.map((child) => (
                       ((search.length === 0 || url === child.link || child.name.toLowerCase().includes(search.toLowerCase()) || child?.keyword?.split(',')?.includes(search.toLowerCase())) && (
                         <NavItem key={child.name} href={/*basename + */child.link} fontWeight={url === child.link ? "bold" : "none"}
-                              background={url === child.link ? activeColor : "none"}>
+                              background={url === child.link ? activeColor : "none"} onClick={onClose}>
                         {child.name}
                       </NavItem>
                       ))
@@ -239,7 +239,8 @@ const SidebarContent = ({ onClose, isFullScreen, ...rest }: SidebarProps) => {
               ) : (
                 <NavItem key={link.name} icon={link?.icon} ps={link.icon ? "4" : "12"} href={/*basename + */(link.link || "#")}
                          fontWeight={url === link.link || (index === 0 && url.length === 0) ? "bold" : "none"}
-                         background={url === link.link || (index === 0 && url.length === 0) ? activeColor : "none"}>
+                         background={url === link.link || (index === 0 && url.length === 0) ? activeColor : "none"}
+                         onClick={onClose}>
                   {link.name}
                 </NavItem>
               )}

diff --git a/src/pages/DateTime Tools/DateTimeCalculator.tsx b/src/pages/DateTime Tools/DateTimeCalculator.tsx
@@ -1,17 +1,20 @@
 import { type ChangeEvent, useEffect, useState } from "react";
 import {
-    Button,
-    Flex,
-    FormControl,
-    Heading,
-    Input, Select,
-    Stack,
-    Switch,
-    Text, Textarea,
-    useColorModeValue,
-    useToast
+  Button,
+  Flex,
+  FormControl,
+  Heading, IconButton,
+  Input, Select,
+  Stack,
+  Switch,
+  Text, Textarea, Tooltip,
+  useColorModeValue,
+  useToast
 } from "@chakra-ui/react";
 import moment from 'moment/moment.js';
+import type { IOutletContext } from "../../interface/Interfaces.ts"
+import { LuShrink } from "react-icons/lu";
+import { useOutletContext } from "react-router-dom";
 
 const DateTimeCalculator = () => {
   const [textBoxInput1, setTextBoxInput1] = useState<string>("")
@@ -23,6 +26,8 @@ const DateTimeCalculator = () => {
   const [now, setNow] = useState(moment())
     const [unit, setUnit] = useState<string>('d')
 
+  const { isFullScreen, setIsFullScreen } = useOutletContext<IOutletContext>()
+
   setInterval(() => {
     setNow(moment())
   }, 1000)
@@ -131,9 +136,23 @@ const DateTimeCalculator = () => {
         p={6}
         mt={12}
         mb={2}>
-        <Heading lineHeight={1.1} fontSize={{ base: '2xl', md: '3xl' }}>
-          Date Time Calculator
-        </Heading>
+        <Stack direction="row" w="100%" justify="space-between">
+          <Heading lineHeight={1.1} fontSize={{ base: '2xl', md: '3xl' }}>
+            Date Time Calculator
+          </Heading>
+          {isFullScreen && (
+              <Tooltip label="Exit fullscreen mode" mr="2">
+                <IconButton
+                    variant="outline"
+                    aria-label="open menu"
+                    icon={<LuShrink fontSize="22px" />}
+                    size="sm"
+                    m={0}
+                    onClick={() => setIsFullScreen(!isFullScreen)}
+                />
+              </Tooltip>
+          )}
+        </Stack>
         <FormControl id="url">
           <Stack direction="row" w="100%" mb={3}>
             <Text mx={1}>Duration between 2 Dates</Text>

diff --git a/src/pages/DateTime Tools/DateTimeConverter.tsx b/src/pages/DateTime Tools/DateTimeConverter.tsx
@@ -3,15 +3,18 @@ import {
   Button,
   Flex,
   FormControl,
-  Heading,
+  Heading, IconButton,
   Input,
   Stack,
   Switch,
-  Text,
+  Text, Tooltip,
   useColorModeValue,
   useToast
 } from "@chakra-ui/react";
 import moment from 'moment/moment.js';
+import type { IOutletContext } from "../../interface/Interfaces.ts"
+import { LuShrink } from "react-icons/lu";
+import { useOutletContext } from "react-router-dom";
 
 const DateTimeConverter = () => {
   const [textBoxInput, setTextBoxInput] = useState<string>("")
@@ -21,6 +24,8 @@ const DateTimeConverter = () => {
   const [error, setError] = useState<boolean>(false)
   const [now, setNow] = useState(moment())
 
+  const { isFullScreen, setIsFullScreen } = useOutletContext<IOutletContext>()
+
   setInterval(() => {
     setNow(moment())
   }, 1000)
@@ -96,9 +101,23 @@ const DateTimeConverter = () => {
         p={6}
         mt={12}
         mb={2}>
-        <Heading lineHeight={1.1} fontSize={{ base: '2xl', md: '3xl' }}>
-          {decode ? "UNIX Timestamp to Date Time" : "Date Time to UNIX Timestamp"}
-        </Heading>
+        <Stack direction="row" w="100%" justify="space-between">
+          <Heading lineHeight={1.1} fontSize={{ base: '2xl', md: '3xl' }}>
+            {decode ? "UNIX Timestamp to Date Time" : "Date Time to UNIX Timestamp"}
+          </Heading>
+          {isFullScreen && (
+              <Tooltip label="Exit fullscreen mode" mr="2">
+                <IconButton
+                    variant="outline"
+                    aria-label="open menu"
+                    icon={<LuShrink fontSize="22px" />}
+                    size="sm"
+                    m={0}
+                    onClick={() => setIsFullScreen(!isFullScreen)}
+                />
+              </Tooltip>
+          )}
+        </Stack>
         <FormControl id="url">
           <Stack direction="row" w="100%" mb={3}>
             <Switch colorScheme='green'

diff --git a/src/pages/Debugging Tools/Cron.tsx b/src/pages/Debugging Tools/Cron.tsx
@@ -5,22 +5,27 @@ import {
   Button,
   Flex,
   FormControl,
-  Heading, Input,
+  Heading, IconButton, Input,
   Stack,
-  Text,
+  Text, Tooltip,
   useColorModeValue,
   useToast
 } from "@chakra-ui/react";
 import { CronExpressionParser } from "cron-parser";
 import moment from "moment/moment.js";
 import cronstrue from 'cronstrue';
+import type { IOutletContext } from "../../interface/Interfaces.ts"
+import { LuShrink } from "react-icons/lu";
+import { useOutletContext } from "react-router-dom";
 
 const Cron = () => {
   const [textBox, setTextBox] = useState<string>("* * * * *")
   const [status, setStatus] = useState<"Invalid" | "Valid">("Valid")
   const [nextDate, setNextDate] = useState<string>("")
   const [desc, setDesc] = useState<string>("")
 
+  const { isFullScreen, setIsFullScreen } = useOutletContext<IOutletContext>()
+
   const toast = useToast({
     position: "top",
     duration: 2000,
@@ -70,9 +75,23 @@ const Cron = () => {
           borderWidth={1}
           borderColor={useColorModeValue('gray.200', 'gray.700')}
           p={6}>
-          <Heading lineHeight={1.1} fontSize={{ base: '2xl', md: '3xl' }}>
-            Cron Viewer
-          </Heading>
+          <Stack direction="row" w="100%" justify="space-between">
+            <Heading lineHeight={1.1} fontSize={{ base: '2xl', md: '3xl' }}>
+              Cron Viewer
+            </Heading>
+            {isFullScreen && (
+                <Tooltip label="Exit fullscreen mode" mr="2">
+                  <IconButton
+                      variant="outline"
+                      aria-label="open menu"
+                      icon={<LuShrink fontSize="22px" />}
+                      size="sm"
+                      m={0}
+                      onClick={() => setIsFullScreen(!isFullScreen)}
+                  />
+                </Tooltip>
+            )}
+          </Stack>
           <Text fontSize="sm" color={useColorModeValue("gray.500", "gray.400")}>Note: There is no definitive standard of cron format. However, this tool supports both <a
             href="https://www.javadoc.io/doc/org.quartz-scheduler/quartz/latest/org/quartz/CronExpression.html" target="_blank"
             rel="noreferrer"><u>Quartz format (Java)</u></a> and <a