feat: make responsive

.idea/workspace.xml

@@ -4,10 +4,13 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: generate numbers">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: merging branches">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/ToolLayout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolLayout.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Hero.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Hero.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Navbar/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Navbar/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/number/generate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/generate/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -195,14 +198,6 @@
       <workItem from="1719339559458" duration="303000" />
       <workItem from="1719340295244" duration="772000" />
     </task>
-    <task id="LOCAL-00011" summary="chore: output selector">
-      <option name="closed" value="true" />
-      <created>1718999826771</created>
-      <option name="number" value="00011" />
-      <option name="presentableId" value="LOCAL-00011" />
-      <option name="project" value="LOCAL" />
-      <updated>1718999826771</updated>
-    </task>
     <task id="LOCAL-00012" summary="feat: text split">
       <option name="closed" value="true" />
       <created>1719003559965</created>
@@ -587,7 +582,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719349760930</updated>
     </task>
-    <option name="localTasksCounter" value="60" />
+    <task id="LOCAL-00060" summary="fix: merging branches">
+      <option name="closed" value="true" />
+      <created>1719350066784</created>
+      <option name="number" value="00060" />
+      <option name="presentableId" value="LOCAL-00060" />
+      <option name="project" value="LOCAL" />
+      <updated>1719350066784</updated>
+    </task>
+    <option name="localTasksCounter" value="61" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -608,7 +611,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="fix: join text service" />
     <MESSAGE value="test: join service" />
     <MESSAGE value="feat: result copy and download" />
     <MESSAGE value="feat: contributors graph" />
@@ -633,7 +635,8 @@
     <MESSAGE value="feat: create transparent png" />
     <MESSAGE value="fix: ToolFileInput.tsx" />
     <MESSAGE value="fix: generate numbers" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: generate numbers" />
+    <MESSAGE value="fix: merging branches" />
+    <option name="LAST_COMMIT_MESSAGE" value="fix: merging branches" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

src/components/Hero.tsx

@@ -33,14 +33,24 @@ export default function Hero() {
     setFilteredTools(filterTools(tools, newInputValue));
   };
   return (
-    <Box width={'60%'}>
+    <Box width={{ xs: '90%', md: '80%', lg: '60%' }}>
-      <Stack mb={1} direction={'row'} spacing={1}>
+      <Stack mb={1} direction={'row'} spacing={1} justifyContent={'center'}>
-        <Typography fontSize={30}>Transform Your Workflow with </Typography>
+        <Typography sx={{ textAlign: 'center' }} fontSize={{ xs: 25, md: 30 }}>
-        <Typography fontSize={30} color={'primary'}>
+          Transform Your Workflow with{' '}
+          <Typography
+            fontSize={{ xs: 25, md: 30 }}
+            display={'inline'}
+            color={'primary'}
+          >
             Omni Tools
           </Typography>
+        </Typography>
       </Stack>
-      <Typography fontSize={20} mb={2}>
+      <Typography
+        sx={{ textAlign: 'center' }}
+        fontSize={{ xs: 15, md: 20 }}
+        mb={2}
+      >
         Boost your productivity with Omni Tools, the ultimate toolkit for
         getting things done quickly! Access thousands of user-friendly utilities
         for editing images, text, lists, and data, all directly from your
@@ -76,7 +86,14 @@ export default function Hero() {
       />
       <Grid container spacing={2} mt={2}>
         {exampleTools.map((tool) => (
-          <Grid onClick={() => navigate(tool.url)} item xs={4} key={tool.label}>
+          <Grid
+            onClick={() => navigate(tool.url)}
+            item
+            xs={12}
+            md={6}
+            lg={4}
+            key={tool.label}
+          >
             <Box
               sx={{
                 display: 'flex',

src/components/Navbar/index.tsx

@@ -1,15 +1,57 @@
-import React from 'react';
+import React, { useState } from 'react';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
 import { Link, useNavigate } from 'react-router-dom';
 import githubIcon from '@assets/github-mark.png'; // Adjust the path to your GitHub icon
-import { Stack } from '@mui/material';
+import {
+  Stack,
+  Drawer,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemButton
+} from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
 
 const Navbar: React.FC = () => {
   const navigate = useNavigate();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  const toggleDrawer = (open: boolean) => () => {
+    setDrawerOpen(open);
+  };
+
+  const drawerList = (
+    <List>
+      <ListItemButton onClick={() => navigate('/features')}>
+        <ListItemText primary="Features" />
+      </ListItemButton>
+      <ListItemButton onClick={() => navigate('/about-us')}>
+        <ListItemText primary="About Us" />
+      </ListItemButton>
+      <ListItemButton
+        component="a"
+        href="https://github.com/iib0011/omni-tools"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          src={githubIcon}
+          alt="GitHub"
+          style={{ height: '24px', marginRight: '8px' }}
+        />
+        <Typography variant="button">Star us</Typography>
+      </ListItemButton>
+    </List>
+  );
+
   return (
     <AppBar
       position="static"
@@ -24,6 +66,20 @@ const Navbar: React.FC = () => {
         >
           OmniTools
         </Typography>
+        {isMobile ? (
+          <>
+            <IconButton color="inherit" onClick={toggleDrawer(true)}>
+              <MenuIcon />
+            </IconButton>
+            <Drawer
+              anchor="right"
+              open={drawerOpen}
+              onClose={toggleDrawer(false)}
+            >
+              {drawerList}
+            </Drawer>
+          </>
+        ) : (
           <Stack direction={'row'}>
             <Button color="inherit">
               <Link
@@ -55,6 +111,7 @@ const Navbar: React.FC = () => {
               <Typography variant="button">Star us</Typography>
             </IconButton>
           </Stack>
+        )}
       </Toolbar>
     </AppBar>
   );

src/pages/home/index.tsx

@@ -11,7 +11,7 @@ export default function Home() {
 
   return (
     <Box
-      padding={5}
+      padding={{ xs: 1, md: 3, lg: 5 }}
       display={'flex'}
       flexDirection={'column'}
       alignItems={'center'}
@@ -21,7 +21,7 @@ export default function Home() {
       <Hero />
       <Grid width={'80%'} container mt={2} spacing={2}>
         {getToolsByCategory().map((category) => (
-          <Grid key={category.type} item xs={6}>
+          <Grid key={category.type} item xs={12} md={6}>
             <Card>
               <CardContent>
                 <Link
@@ -31,20 +31,22 @@ export default function Home() {
                   {category.title}
                 </Link>
                 <Typography sx={{ mt: 2 }}>{category.description}</Typography>
-                <Stack
+                <Grid mt={1} container spacing={2}>
-                  mt={2}
+                  <Grid item xs={12} md={6}>
-                  direction={'row'}
-                  justifyContent={'space-between'}
-                >
                     <Button
+                      fullWidth
                       onClick={() => navigate('/categories/' + category.type)}
                       variant={'contained'}
                     >{`See all ${category.title}`}</Button>
+                  </Grid>
+                  <Grid item xs={12} md={6}>
                     <Button
+                      fullWidth
                       onClick={() => navigate(category.example.path)}
                       variant={'outlined'}
                     >{`Try ${category.example.title}`}</Button>
-                </Stack>
+                  </Grid>
+                </Grid>
               </CardContent>
             </Card>
           </Grid>

src/pages/number/generate/meta.ts

@@ -3,7 +3,7 @@ import { lazy } from 'react';
 // import image from '@assets/text.png';
 
 export const tool = defineTool('number', {
-  name: 'Generate',
+  name: 'Generate numbers',
   path: 'generate',
   shortDescription: 'Quickly calculate a list of integers in your browser',
   // image,

src/pages/tools-by-category/index.tsx

@@ -23,7 +23,7 @@ export default function Home() {
   return (
     <Box>
       <Box
-        padding={5}
+        padding={{ xs: 1, md: 3, lg: 5 }}
         display={'flex'}
         flexDirection={'column'}
         alignItems={'center'}
@@ -33,7 +33,7 @@ export default function Home() {
         <Hero />
       </Box>
       <Divider sx={{ borderColor: theme.palette.primary.main }} />
-      <Box width={'100%'} mt={3} ml={7} padding={3}>
+      <Box width={'100%'} mt={3} ml={{ xs: 1, md: 2, lg: 3 }} padding={3}>
         <Typography
           fontSize={22}
           color={theme.palette.primary.main}
@@ -42,7 +42,7 @@ export default function Home() {
           {getToolsByCategory()
             .find(({ type }) => type === categoryName)
             ?.tools?.map((tool) => (
-              <Grid item xs={12} md={4} key={tool.path}>
+              <Grid item xs={12} md={6} lg={4} key={tool.path}>
                 <Stack
                   sx={{
                     cursor: 'pointer',