feat: pure css navigation

WeTrustPlatform · Nov 25, 2019 · d53d845 · d53d845
1 parent 3c073e1
commit d53d845
Show file tree

Hide file tree

Showing 3 changed files with 199 additions and 111 deletions.
diff --git a/src/NavigationBar.tsx b/src/NavigationBar.tsx
@@ -13,9 +13,8 @@ import { TouchableOpacity, View } from 'react-native';
 
 import { BlockchainAccountStatus } from './BlockchainAccountStatus';
 import { Link, LinkProps } from './Link';
-import { WeTrustProductsBanner } from './WeTrustProductsBanner';
 
-const DesktopNavigationBarDivider = () => (
+const DesktopNavigationBarDivider = (): JSX.Element => (
   <Divider
     orientation="vertical"
     style={{
@@ -24,7 +23,7 @@ const DesktopNavigationBarDivider = () => (
   />
 );
 
-const DesktopNavigationBarLink = (props: LinkProps) => {
+const DesktopNavigationBarLink = (props: LinkProps): JSX.Element => {
   const { children, to, isExternal } = props;
 
   return (
@@ -45,7 +44,6 @@ const DesktopNavigationBar = (props: NavigationBarProps): JSX.Element => {
 
   return (
     <>
-      <WeTrustProductsBanner />
       <Box
         flexDirection="row"
         height={80}
@@ -143,7 +141,6 @@ const MobileNavigationBar = (props: NavigationBarProps): JSX.Element => {
               onClick={() => setIsMenuOpen(false)}
             />
           </Box>
-          <WeTrustProductsBanner />
         </Modal>
       </Container>
       <Divider />

diff --git a/src/WeTrustProductsBanner.css b/src/WeTrustProductsBanner.css
@@ -0,0 +1,127 @@
+/*hide the inputs/checkmarks*/
+#check01 {
+  display: none;
+}
+
+/*hide the submenu*/
+ul.submenu {
+  max-height: 0;
+  overflow: hidden;
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+}
+
+/*position the label*/
+label {
+  position: relative;
+  display: block;
+  cursor: pointer;
+}
+
+/*show the submenu when checked*/
+#check01:checked ~ ul.submenu {
+  max-height: 700px;
+}
+
+.arrow-up {
+  display: none;
+}
+
+#check01:checked ~ .wetrust-products-banner-title .arrow-up {
+  display: block;
+}
+
+#check01:checked ~ .wetrust-products-banner-title .arrow-down {
+  display: none;
+}
+
+.arrow-up {
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+
+  border-bottom: 6px solid #ffffff;
+}
+
+.arrow-down {
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+
+  border-top: 6px solid #ffffff;
+}
+
+.wetrust-products-banner-title {
+  padding: 16px;
+  font-family: ProximaNova;
+  font-size: 18px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: 6px;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.product--wrapper {
+  flex-basis: 50%;
+  max-width: 50%;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+.product--link {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 40px;
+  padding-left: 16px;
+  padding-right: 16px;
+  border-radius: 4px;
+  border: solid 1px #b1b1b1;
+  box-sizing: border-box;
+}
+
+.product--link img {
+  width: 100%;
+  max-height: 16px;
+}
+
+.wrapper {
+  background-color: #222222;
+}
+
+@media only screen and (min-width: 700px) {
+  ul.submenu {
+    justify-content: center;
+    display: flex;
+    overflow: auto;
+    max-height: initial;
+  }
+
+  .wetrust-products-banner-title {
+    display: none;
+  }
+
+  .product--wrapper {
+    padding: 0;
+    flex-basis: auto;
+  }
+
+  .product--link {
+    border: none;
+  }
+
+  .product--link img {
+    max-height: 32px;
+  }
+}
diff --git a/src/WeTrustProductsBanner.tsx b/src/WeTrustProductsBanner.tsx
@@ -1,112 +1,76 @@
-import { Box, useTheme, useLayout } from 'paramount-ui';
 import React from 'react';
-
-import { LinkProps, Link } from './Link';
-
-const ProductLink = (props: LinkProps): JSX.Element => {
-  const { children } = props;
-  const theme = useTheme();
-
-  return (
-    <Link
-      {...props}
-      style={{
-        fontFamily: theme.fontFamilies.text,
-        textDecoration: 'none',
-        display: 'flex',
-        alignItems: 'center',
-      }}
-    >
-      {children}
-    </Link>
-  );
-};
+import './WeTrustProductsBanner.css';
 
 export const WeTrustProductsBanner = (): JSX.Element => {
-  const { getResponsiveValue } = useLayout();
-
-  const paddingBottom = getResponsiveValue({
-    xsmall: '16px',
-    xlarge: '0px',
-  });
-
-  const boxStyle = getResponsiveValue({
-    xsmall: {
-      paddingTop: 48,
-      backgroundColor: '#222222',
-      height: '100%',
-      flexWrap: 'wrap',
-      flexDirection: 'row',
-      justifyContent: 'center',
-    },
-    medium: {
-      flexDirection: 'row',
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: '#222222',
-      flexWrap: 'wrap',
-      height: 55,
-    },
-  });
-
   return (
-    <Box {...boxStyle}>
-      <Box paddingRight={40} paddingBottom={paddingBottom}>
-        <ProductLink to="https://www.wetrust.io">
-          <img
-            alt="WeTrust"
-            src="https://d1pzjb43ehhiia.cloudfront.net/logo-images/wetrust-global-logo.svg"
-          />
-        </ProductLink>
-      </Box>
-      <Box paddingRight={40} paddingBottom={paddingBottom}>
-        <ProductLink to="https://spring.wetrust.io">
-          <img
-            alt="Spring"
-            src="https://d1pzjb43ehhiia.cloudfront.net/logo-images/spring-global-logo.svg"
-          />
-        </ProductLink>
-      </Box>
-      <Box paddingRight={40} paddingBottom={paddingBottom}>
-        <ProductLink to="https://staking.wetrust.io">
-          <img
-            alt="Staking"
-            src="https://d1pzjb43ehhiia.cloudfront.net/logo-images/staking-global-logo.svg"
-          />
-        </ProductLink>
-      </Box>
-      <Box paddingRight={40} paddingBottom={paddingBottom}>
-        <ProductLink to="https://tlc.wetrust.io">
-          <img
-            alt="TLC"
-            src="https://d1pzjb43ehhiia.cloudfront.net/logo-images/trusted-lending-circles-global-logo.svg"
-          />
-        </ProductLink>
-      </Box>
-      <Box paddingRight={40} paddingBottom={paddingBottom}>
-        <ProductLink to="https://cryptounlocked.wetrust.io/">
-          <img
-            alt="CryptoUnlocked"
-            src="https://d1pzjb43ehhiia.cloudfront.net/logo-images/crypto-unlocked-global-logo.svg"
-          />
-        </ProductLink>
-      </Box>
-      <Box paddingRight={40} paddingBottom={paddingBottom}>
-        <ProductLink to="https://trustedoracle.wetrust.io">
-          <img
-            alt="TrustedOracle"
-            src="https://d1pzjb43ehhiia.cloudfront.net/logo-images/trusted-oracle-global-logo.svg"
-          />
-        </ProductLink>
-      </Box>
-      <Box paddingRight={40} paddingBottom={paddingBottom}>
-        <ProductLink to="https://grants.wetrust.io">
-          <img
-            alt="Grants"
-            src="https://d1pzjb43ehhiia.cloudfront.net/logo-images/wetrust-grants-global-logo.svg"
-          />
-        </ProductLink>
-      </Box>
-    </Box>
+    <div className="wrapper">
+      <input id="check01" type="checkbox" name="menu" />
+      <label className="wetrust-products-banner-title" htmlFor="check01">
+        <span>WETRUST PRODUCTS</span>
+        <i className="arrow-up" />
+        <i className="arrow-down" />
+      </label>
+      <ul className="submenu">
+        <li className="product--wrapper">
+          <a className="product--link" href="https://www.wetrust.io">
+            <img
+              alt="WeTrust"
+              src="https://d1pzjb43ehhiia.cloudfront.net/logo-images/wetrust-global-logo.svg"
+            />
+          </a>
+        </li>
+        <li className="product--wrapper">
+          <a className="product--link" href="https://spring.wetrust.io">
+            <img
+              alt="Spring"
+              src="https://d1pzjb43ehhiia.cloudfront.net/logo-images/spring-global-logo.svg"
+            />
+          </a>
+        </li>
+        <li className="product--wrapper">
+          <a className="product--link" href="https://staking.wetrust.io">
+            <img
+              alt="Staking"
+              src="https://d1pzjb43ehhiia.cloudfront.net/logo-images/staking-global-logo.svg"
+            />
+          </a>
+        </li>
+        <li className="product--wrapper">
+          <a className="product--link" href="https://tlc.wetrust.io">
+            <img
+              alt="TLC"
+              src="https://d1pzjb43ehhiia.cloudfront.net/logo-images/trusted-lending-circles-global-logo.svg"
+            />
+          </a>
+        </li>
+        <li className="product--wrapper">
+          <a
+            className="product--link"
+            href="https://cryptounlocked.wetrust.io/"
+          >
+            <img
+              alt="CryptoUnlocked"
+              src="https://d1pzjb43ehhiia.cloudfront.net/logo-images/crypto-unlocked-global-logo.svg"
+            />
+          </a>
+        </li>
+        <li className="product--wrapper">
+          <a className="product--link" href="https://trustedoracle.wetrust.io">
+            <img
+              alt="TrustedOracle"
+              src="https://d1pzjb43ehhiia.cloudfront.net/logo-images/trusted-oracle-global-logo.svg"
+            />
+          </a>
+        </li>
+        <li className="product--wrapper">
+          <a className="product--link" href="https://grants.wetrust.io">
+            <img
+              alt="Grants"
+              src="https://d1pzjb43ehhiia.cloudfront.net/logo-images/wetrust-grants-global-logo.svg"
+            />
+          </a>
+        </li>
+      </ul>
+    </div>
   );
 };