removed social links from navbar to footer, cleaned up navbar on mobile

src/components/Footer/FooterContent.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { Link } from "@components/index";
+import Icon, { IconType } from "@components/Icon";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
 
@@ -28,6 +29,7 @@ const Content = styled.div`
   h4 {
     color: ${colors.lightBlue};
     padding: 1.5rem 0;
+    text-align: center;
   }
 
   a {
@@ -67,6 +69,27 @@ const Map = styled.div`
   }
 `;
 
+const SomeContainer = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  a {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    margin-right: 0.5rem;
+
+    color: inherit;
+    text-decoration: none;
+
+  }
+  svg{
+    width: 24px;
+    height: 24px;
+    fill: ${colors.white};
+}
+`;
+
 const FooterContent: React.FC = () => (
   <Content>
     <div>
@@ -90,6 +113,13 @@ const FooterContent: React.FC = () => (
             <Link to="https://sik.kuvat.fi">Kuvagalleria</Link>
             <Link to="https://static.sahkoinsinoorikilta.fi/logot-ja-grafiikka/">Logot ja grafiikka</Link>
           </div>
+          <div>
+            <SomeContainer>
+              <Icon name={IconType.Facebook} link="https://www.facebook.com/AaltoYliopistonSIK/" />
+              <Icon name={IconType.Instagram} link="https://www.instagram.com/sahkoinsinoorikilta/" />
+              <Icon name={IconType.LinkedIn} link="https://www.linkedin.com/groups/8103057/" />
+            </SomeContainer>
+          </div>
         </Columns>
       </MarginSpace>
     </div>

src/components/Navigation.tsx

@@ -33,7 +33,6 @@ export const renderNavigationItems = (mobile = false): JSX.Element => (
     <NavbarDropdownLink to="/in_english" text="In English" exploded={mobile} />
   </>
 );
-
 const Nav = styled.div`
   flex: 1 0 auto;
   display: flex;
@@ -57,6 +56,11 @@ const Nav = styled.div`
   @media screen and (max-width: ${breakpoints.mobile}) {
     justify-content: center;
     margin-left: 0;
+    /* line 59 */
+    border-top: 2px solid ${colors.lightBlue}; /* Add line above */
+    padding-top: 0.5rem; /* Add some spacing */
+    padding-bottom: 0.5rem; /* Add some spacing */
+    cursor: pointer; /* Make entire nav clickable */
   }
 
   svg {
@@ -78,22 +82,12 @@ const DesktopContainer = styled.div`
   }
 `;
 
-const SomeContainer = styled.div`
-  display: flex;
-  flex-flow: row nowrap;
-
-  a {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: center;
-    margin: 1rem;
-  }
-`;
-
 const MobileMenu = styled.div`
   display: flex;
   margin: 0 1rem;
+  align-items: center;
   cursor: pointer;
+  padding: 0 50%; /* Large clickable area horizontally cheeze */
 
   span {
     display: flex;
@@ -103,9 +97,6 @@ const MobileMenu = styled.div`
     display: none;
   }
 
-  @media screen and (max-width: ${breakpoints.mobile}) {
-    margin-left: 3rem;
-  }
 `;
 
 interface NavigationProps {
@@ -119,13 +110,8 @@ const Navigation: React.FC<NavigationProps> = ({ onMobileMenuOpen }) => {
       <DesktopContainer>
         {desktopItems}
       </DesktopContainer>
-      <SomeContainer>
-        <Icon name={IconType.Facebook} link="https://www.facebook.com/AaltoYliopistonSIK/" />
-        <Icon name={IconType.Instagram} link="https://www.instagram.com/sahkoinsinoorikilta/" />
-        <Icon name={IconType.LinkedIn} link="https://www.linkedin.com/groups/8103057/" />
-      </SomeContainer>
-      <MobileMenu>
-        <Icon name={IconType.HamburgerMenu} onClick={onMobileMenuOpen} />
+      <MobileMenu onClick={onMobileMenuOpen}>
+        <Icon name={IconType.HamburgerMenu} />
       </MobileMenu>
     </Nav>
   );