feat: add servers to serverbar

src/renderer/App.tsx

@@ -5,6 +5,7 @@ import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
 import '@/styles/app/App.css';
 import '@/styles/app/TitleBar.css';
 import '@/styles/server/ServerBar.css';
+import '@/styles/server/Server.css';
 
 // Components
 import AppContent from '@/components/app/AppContent';

src/renderer/components/server/Server.tsx

@@ -5,8 +5,9 @@ type ServerProps = {
 };
 
 export default function Server({ server }: ServerProps) {
-  return <div>
-    <img src={server.getIconUrl()} alt="" />
+  return (
+    <div className="Server">
+      <img className="Server--icon" src={server.getIconUrl()} alt="" />
     </div>
   );
 }

src/renderer/components/server/ServerBar.tsx

@@ -1,11 +1,14 @@
+// Hooks
 import useGuilds from '@/hooks/useGuilds';
+
+// Components
 import Server from './Server';
 
 export default function ServerBar() {
   const guilds = useGuilds();
 
   return (
-    <div className="ServerBar">
+    <div className="ServerBar hidden-scrollbar">
       {guilds.map((guild) => {
         return <Server server={guild} />;
       })}

src/renderer/styles/app/App.css

@@ -35,3 +35,14 @@ a {
   margin-top: var(--titlebar-height);
   overflow: hidden;
 }
+
+.hidden-scrollbar {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+
+.hidden-scrollbar::-webkit-scrollbar {
+  display: none;
+  width: 0; /* Remove scrollbar space */
+  background: transparent;
+}

src/renderer/styles/server/Server.css

@@ -0,0 +1,18 @@
+.Server {
+  width: 46px;
+  height: 46px;
+  padding: 5px;
+  flex-shrink: 0;
+  background: var(--background-12);
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Server--icon {
+  width: 100%;
+  border-radius: 50%;
+  flex-shrink: 0;
+}

src/renderer/styles/server/ServerBar.css

@@ -1,5 +1,12 @@
 .ServerBar {
+  display: flex;
+  flex-direction: column;
   width: 72px;
-  height: 100%;
+  height: calc(100% - 10px);
+  overflow-y: auto;
+  overflow-x: hidden;
   background: var(--background-5);
+  align-items: center;
+  gap: 5px;
+  padding-bottom: 10px;
 }