feat(menu): cyberver link (#1177)

Author: happylolonly

src/components/appMenu/AppMenu.module.scss

@@ -1,3 +1,5 @@
+@import '../../style/mixins.scss';
+
 .bookmarks {
   display: flex;
   flex-direction: column;
@@ -38,3 +40,10 @@
     color: #32d9ae;
   }
 }
+
+.external {
+  width: 20px;
+  height: 20px;
+
+  @include withShareIcon;
+}

src/components/appMenu/AppMenu.tsx

@@ -13,13 +13,16 @@ interface Props {
 }
 
 function Items({ item, selected, onClick }: Props) {
+  const isExternal = item.to.startsWith('http');
+
   return (
     <NavLink
       to={item.to}
       className={() => {
         return cx(styles.bookmarks__item, { [styles.active]: selected });
       }}
       onClick={onClick}
+      {...(isExternal && { target: '_blank', rel: 'noreferrer noopener' })}
     >
       <Pane display="flex" paddingY={5} alignItems="center" key={item.name}>
         <div
@@ -46,6 +49,8 @@ function Items({ item, selected, onClick }: Props) {
             display="flex"
           >
             {item.name}
+
+            {isExternal && <span className={styles.external}></span>}
           </Pane>
         </div>
       </Pane>

src/containers/application/AppMenu.tsx

@@ -80,6 +80,13 @@ const itemsMenu = () => {
     //   ],
     // },
     { name: 'Senate', icon: senate, to: '/senate', subItems: [] },
+
+    {
+      name: 'Cyberver 🟣',
+      icon: require('./images/cyberver.png'),
+      to: 'https://spacepussy.ai/cyberver',
+      subItems: [],
+    },
     { name: 'About', icon: congress, to: routes.social.path, subItems: [] },
     // {
     //   name: 'Help',