1

src/App.js

@@ -2,6 +2,7 @@ import "./App.css";
 import {Helmet} from "react-helmet";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
+import Discord from "./components/DiscordInt"
 import Home from "./pages/Home";
 import Shop from "./pages/Shop";
 import Socials from "./pages/Socials";
@@ -33,6 +34,7 @@ function App() {
           <Route path="/contact" exact element={<Contact />} />
   
         </Routes>
+        <Discord />
         <Footer />
       </Router>
     </div>

src/components/DiscordInt.js

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import ReorderIcon from '@mui/icons-material/Reorder';
+import '../styles/DiscordInt.css'
+
+function DiscordInt() {
+
+  const [openLinks, setOpenLinks] = useState(false);
+
+  const toggleDiscordInt = () => {
+    setOpenLinks(!openLinks);
+  };
+  return (
+      <div className='discordint'>
+        <div className='discord-opened' id={openLinks ? "open" : "close"}>
+            <div className='hiddenLinks'>
+            <div className='discordiframe'><iframe src="https://discord.com/widget?id=573633846587817992&theme=dark" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>     
+            </div>
+            </div>
+        <div className='discord-minimized'>
+            <div className='discordiframe'><iframe src="https://discord.com/widget?id=573633846587817992&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
+            <button onClick={toggleDiscordInt}>
+                <ReorderIcon />
+          </button>
+        </div>
+        </div>
+  )
+}
+
+export default DiscordInt

src/pages/Home.js

@@ -13,9 +13,6 @@ function Home() {
           <button> About Page </button>
         </Link>
         </div>
-        <div className="discordint">
-        <iframe src="https://discord.com/widget?id=573633846587817992&theme=dark"></iframe>
-        </div>
     </div>
   );
 }

src/styles/DiscordInt.css

@@ -0,0 +1,100 @@
+.discordint iframe {
+        position: fixed;
+        display: flex;
+        bottom: 20px;
+        right: 20px;
+        height: 350px;
+        width: 400px;
+        background-color: black;
+        border: 1px solid black;
+        padding: 5px;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+        border-radius: 10%;
+        z-index: 1001;
+}
+
+.discordint .discord-minimized button {
+    display: none;
+    background-color: transparent;
+    border: none;
+    color: white;
+    cursor: pointer;
+}
+
+.discordint .discord-minimized svg {
+    font-size: 40px;
+}
+
+.discordint #open {
+    padding-left: 0px;
+}
+
+.discordint #open .hiddenLinks {
+    display: inherit;
+    margin-left: 30px;
+}
+
+.discordint #close .hiddenLinks {
+    display: none;
+}
+
+.discordint #open a {
+    width: 70px;
+    margin: 5px;
+}
+
+
+@media only screen and (max-width: 765px) {
+    .discordint .discord-minimized a {
+        width: 65px;
+    }
+
+    .discordint .discord-opened {
+        padding-left: 50px;
+    }
+
+
+    .discordint iframe {
+        display: none;
+    }
+
+    .discordint .discord-minimized button {
+        display: inherit;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .discordint .discord-minimized a {
+        display: none;
+    }
+
+    .discord .discord-opened a {
+        padding-left: 50px;
+    }
+    
+    .discordint iframe {
+        display: none;
+    }
+    
+    .discordint .discord-minimized button {
+        display: inherit;
+    }
+}
+  
+@media only screen and (max-width: 1030px) {
+    .discordint iframe {
+        display: none;
+    }
+    .discordint .discord-minimized button {
+        display: inherit;
+    }
+}
+
+@media only screen and (max-width: 920px),(max-height: 630px) {
+    .discordint iframe {
+        display: none;
+    }
+    .discordint .discord-minimized button {
+        display: inherit;
+    }
+}

src/styles/Home.css

@@ -59,21 +59,6 @@
   transition: 0.3s ease-in;
 }
 
-.discordint iframe {
-  position: fixed;
-  display: flex;
-  bottom: 20px;
-  right: 20px;
-  height: 350px;
-  width: 400px;
-  background-color: black;
-  border: 1px solid black;
-  padding: 5px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-  border-radius: 10%;
-  z-index: 1001;
-}
-
 @media only screen and (max-width: 765px) {
   .home {
     justify-content: center;
@@ -118,10 +103,6 @@
     background-color: #1500ff;
     color: rgb(255, 255, 255);
   }
-
-  .discordint iframe {
-    display: none;
-  }
 }
 
 @media only screen and (max-width: 500px) {
@@ -134,9 +115,7 @@
 }
 
 @media only screen and (max-width: 1030px) {
-  .discordint iframe {
-    display: none;
-  }
+  
 }
 
 @media only screen and (max-width: 920px),(max-height: 630px) {
@@ -183,10 +162,6 @@
     background-color: #1500ff;
     color: rgb(255, 255, 255);
   }
-
-  .discordint iframe {
-    display: none;
-  }
   
 }