fix: fix a bug with social media kit

src/components/NavBar/Navbar.SocialMediaKit.tsx

@@ -9,6 +9,7 @@ import { LPEFooterGroup } from '@/types/ui.types'
 const socialLinks = FooterLinksItems.about.find(
   (item) => item.key === 'social',
 ) as LPEFooterGroup
+
 export const SocialMediaKit = () => {
   return (
     <Container>
@@ -29,16 +30,18 @@ export const SocialMediaKit = () => {
               Icon = null
           }
           return (
-            <LinkContainer>
-              <Link
-                href={link.href}
-                key={`sm-link-${index}`}
-                title={`Join us on ${link.label}`}
-                target={'_blank'}
-              >
-                {Icon && <Icon />}
-              </Link>
-            </LinkContainer>
+            Icon && (
+              <LinkContainer>
+                <Link
+                  href={link.href}
+                  key={`sm-link-${index}`}
+                  title={`Join us on ${link.label}`}
+                  target={'_blank'}
+                >
+                  <Icon />
+                </Link>
+              </LinkContainer>
+            )
           )
         })}
     </Container>
@@ -56,13 +59,16 @@ const Container = styled.div`
 `
 
 const LinkContainer = styled.div`
-  width: fit-content;
-  display: flex;
-  &:not(:last-child) {
-    &:after {
-      content: '';
-      margin-left: 16px;
-      border-right: 1px solid rgb(var(--lsd-border-primary));
+  @media (max-width: ${({ theme }) => theme.breakpoints.sm.width}px) {
+    width: fit-content;
+    display: flex;
+
+    &:not(:last-child) {
+      &:after {
+        content: '';
+        margin-left: 16px;
+        border-right: 1px solid rgb(var(--lsd-border-primary));
+      }
     }
   }
 `

src/configs/data.configs.ts

@@ -1,7 +1,4 @@
 import { LPEFooterGroup } from '@/types/ui.types'
-import { DiscordIcon } from '@/components/Icons/DiscordIcon'
-import { YoutubeIcon } from '@/components/Icons/YTIcon'
-import { XIcon } from '@/components/Icons/XIcon'
 
 export const ArticleBlocksOrders = {
   title: 0,
@@ -61,12 +58,12 @@ export const FooterLinksItems: {
       title: null,
       key: 'social',
       links: [
-        { label: 'X', href: 'https://twitter.com/Logos_state', key: 'x' },
         {
           label: 'Discord',
           href: 'https://discord.gg/logos-state',
           key: 'discord',
         },
+        { label: 'X', href: 'https://twitter.com/Logos_state', key: 'x' },
         {
           label: 'Github',
           href: 'https://github.com/acid-info',