chore: add disabled settings menu item (#1)

* chore: add disabled settings menu item

* ci: lint files

README.md

@@ -13,4 +13,7 @@ A web clone of [DevToys](https://github.com/veler/DevToys)
   - [x] Generators
   - [ ] Text
   - [ ] Graphic
-- [ ] Support dark mode
+- [ ] Settings
+  - [x] Settings menu item
+  - [ ] Support dark mode
+  - [ ] Support i18n

src/components/layout/Drawer.tsx

@@ -1,4 +1,4 @@
-import { Home } from "@mui/icons-material";
+import { Home, Settings } from "@mui/icons-material";
 import { Box, Divider, Drawer, List, Stack } from "@mui/material";
 import { css } from "@mui/material/styles";
 import { memo } from "react";
@@ -30,20 +30,26 @@ const divider = css`
   border-color: rgba(0, 0, 0, 0.08);
 `;
 
+const fullHeight = { height: "100%" };
+
 const StyledComponent = ({ toolGroups }: Props) => (
   <Drawer variant="permanent" css={drawer}>
     <Box paddingLeft={2} paddingRight={2} marginTop="1px">
       <SearchBar />
     </Box>
-    <List component="nav">
+    <List component="nav" css={fullHeight}>
-      <Stack spacing={1}>
+      <Stack spacing={1} css={fullHeight}>
-        <DrawerItem icon={<Home />} title="All tools" href={pagesPath.$url()} />
+        <Box>
+          <DrawerItem icon={<Home />} title="All tools" href={pagesPath.$url()} />
+        </Box>
         <Divider css={divider} />
         <Box>
           {toolGroups.map(({ icon, title, tools }) => (
             <DrawerCollapseItem key={title} {...{ icon, title, tools }} />
           ))}
         </Box>
+        <Box flex={1} />
+        <DrawerItem icon={<Settings />} title="Settings" href="settings" disabled />
       </Stack>
     </List>
   </Drawer>