Add little guy

src/Components/Misc/SupportMe.tsx

@@ -1,14 +1,19 @@
+import { Button, Drawer } from '@mui/material';
+import { useState } from 'react';
 import styled from 'styled-components';
-import { Paragraph } from './TextComponents';
-import { BuyMeCoffee, KoFi } from '../../Icons/generated/Support';
 import { theme } from '../../Data/theme';
+import { BuyMeCoffee, KoFi } from '../../Icons/generated/Support';
+import { Paragraph } from './TextComponents';
+import LittleGuy from '../../Icons/generated/LittleGuy';
+
 // import { ButtonBase } from '@mui/material';
 
 const SupportContainer = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 1rem;
   margin: 16px 0;
 `;
 
@@ -34,6 +39,8 @@ const SupportButton = styled.button`
 `;
 
 export const SupportMe = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
   const handleOpenBuyMeCoffee = () => {
     window.open('https://www.buymeacoffee.com/vikeo');
   };
@@ -42,24 +49,74 @@ export const SupportMe = () => {
     window.open('https://ko-fi.com/vikeo');
   };
 
+  const toggleDrawer =
+    (open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
+      if (
+        event.type === 'keydown' &&
+        ((event as React.KeyboardEvent).key === 'Tab' ||
+          (event as React.KeyboardEvent).key === 'Shift')
+      ) {
+        return;
+      }
+
+      setIsDrawerOpen(open);
+    };
+
   return (
-    <SupportContainer>
-      <SupportButton onClick={handleOpenBuyMeCoffee}>
-        <BuyMeCoffee
-          height={'24px'}
-          width={'24px'}
-          style={{ marginRight: '0.5rem' }}
-        />
-        <Paragraph>Buy me a tea</Paragraph>
-      </SupportButton>
-      <SupportButton onClick={handleOpenKoFi}>
-        <KoFi
-          height={'24px'}
-          width={'24px'}
-          style={{ marginRight: '0.5rem' }}
-        />
-        <Paragraph>Buy me a ko-fi</Paragraph>
-      </SupportButton>
-    </SupportContainer>
+    <>
+      <Button
+        onClick={toggleDrawer(true)}
+        size="small"
+        variant="contained"
+        style={{
+          position: 'absolute',
+          top: '1rem',
+          right: '1rem',
+          fontSize: '0.5rem',
+        }}
+      >
+        Nourish <br /> this guy {'->'}
+      </Button>
+
+      <LittleGuy
+        height={'4rem'}
+        width={'2.5rem'}
+        style={{
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: '2.5rem',
+          right: '0',
+          color: theme.palette.text.primary,
+        }}
+      />
+
+      <Drawer
+        anchor={'right'}
+        open={isDrawerOpen}
+        onClose={toggleDrawer(false)}
+        variant="temporary"
+      >
+        <SupportContainer>
+          <SupportButton onClick={handleOpenBuyMeCoffee}>
+            <BuyMeCoffee
+              height={'1.5rem'}
+              width={'1.5rem'}
+              style={{ marginRight: '0.5rem' }}
+            />
+            <Paragraph style={{ fontSize: '0.7rem' }}>Buy him a tea</Paragraph>
+          </SupportButton>
+          <SupportButton onClick={handleOpenKoFi}>
+            <KoFi
+              height={'1.5rem'}
+              width={'1.5rem'}
+              style={{ marginRight: '0.5rem' }}
+            />
+            <Paragraph style={{ fontSize: '0.7rem' }}>
+              Buy him a ko-fi
+            </Paragraph>
+          </SupportButton>
+        </SupportContainer>
+      </Drawer>
+    </>
   );
 };