feat: move discord icon

src/components/molecules/NavBar.tsx

@@ -8,6 +8,7 @@ import { AccountCircle, Logout, Clear } from "@mui/icons-material";
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../context/auth';
 import { SaveRecording } from '../molecules/SaveRecording';
+import DiscordIcon from '../atoms/DiscordIcon';
 
 interface NavBarProps {
   recordingName: string;
@@ -61,6 +62,21 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
             {!isRecording ? (
               <>
+                <IconButton
+                component="a"
+                href="https://discord.gg/NFhWDCdb"
+                target="_blank"
+                rel="noopener noreferrer"
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  borderRadius: '5px',
+                  padding: '8px',
+                  marginRight: '10px',
+                }}
+                >
+                <DiscordIcon sx={{ marginRight: '5px' }} />
+                </IconButton>
               <iframe src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
                 <IconButton onClick={handleMenuOpen} sx={{
                   display: 'flex',