chore: active nav item state, fix footer on mobile (#359)

iconoir-icons · Sep 25, 2023 · de8ba37 · de8ba37
1 parent 7837640
commit de8ba37
Show file tree

Hide file tree

Showing 7 changed files with 214 additions and 329 deletions.
diff --git a/iconoir.com/components/Footer.tsx b/iconoir.com/components/Footer.tsx
@@ -103,7 +103,7 @@ const Container = styled.div`
   display: block;
   margin-top: 110px;
   padding-top: 30px;
-  margin: 100px -50px -50px -50px; /* not ideal. To fix removing padding from body.*/
+  margin-top: 100px;
   padding: 84px 12%;
   background-color: var(--g7);
   align-items: center;

diff --git a/iconoir.com/components/Layout.tsx b/iconoir.com/components/Layout.tsx
@@ -1,12 +1,21 @@
 import React from 'react';
+import styled from 'styled-components';
+import { media } from '../lib/responsive';
 import { GA } from './GA';
 
 export interface LayoutProps {}
 export function Layout({ children }: React.PropsWithChildren<LayoutProps>) {
   return (
-    <div>
+    <Container>
       <GA />
       {children}
-    </div>
+    </Container>
   );
 }
+
+const Container = styled.div`
+  padding: 50px 30px;
+  ${media.lg} {
+    padding: 30px 50px 50px 50px;
+  }
+`;
diff --git a/iconoir.com/components/NavigationItem.tsx b/iconoir.com/components/NavigationItem.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import React from 'react';
 import styled from 'styled-components';
 import { media } from '../lib/responsive';
@@ -10,18 +11,27 @@ export interface NavigationItemProps {
   style?: any;
 }
 export function NavigationItem({ href, children, style }: NavigationItemProps) {
+  const router = useRouter();
   return (
     <Link href={href} passHref legacyBehavior>
-      <NavigationItemContainer as={'a'} style={style}>
+      <NavigationItemContainer
+        as={'a'}
+        style={style}
+        $isActive={
+          href.slice(1)
+            ? router.asPath.slice(1).startsWith(href.slice(1))
+            : router.asPath === href
+        }
+      >
         {children}
       </NavigationItemContainer>
     </Link>
   );
 }
 
-export const NavigationItemContainer = styled(Text15)`
+export const NavigationItemContainer = styled(Text15)<{ $isActive?: boolean }>`
   &&& {
-    font-weight: 700;
+    font-weight: ${(props) => (props.$isActive ? '700' : '500')};
     font-size: 18px;
     line-height: 28px;
     text-decoration: none;
@@ -40,7 +50,7 @@ export const NavigationItemContainer = styled(Text15)`
     ${media.lg} {
       font-size: 15px;
       line-height: 20px;
-      font-weight: 500;
+      font-weight: ${(props) => (props.$isActive ? '600' : '500')};
       padding: 0;
       color: var(--g0);
       width: auto;

diff --git a/iconoir.com/package.json b/iconoir.com/package.json
@@ -20,19 +20,19 @@
     "@react-types/slider": "^3.6.1",
     "@types/animejs": "^3.1.8",
     "@types/lodash": "^4.14.199",
-    "@types/node": "^20.6.5",
+    "@types/node": "^20.7.0",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "@types/react-window": "^1.8.5",
     "animejs": "^3.2.1",
     "case": "^1.6.3",
     "csvtojson": "^2.0.10",
     "eslint": "^8.50.0",
-    "eslint-config-next": "^13.5.2",
+    "eslint-config-next": "^13.5.3",
     "iconoir-react": "workspace:*",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
-    "next": "^13.5.2",
+    "next": "^13.5.3",
     "next-mdx-remote": "^4.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/iconoir.com/pages/index.tsx b/iconoir.com/pages/index.tsx
@@ -31,68 +31,71 @@ const Home: NextPage<HomeProps> = ({
   numDownloads,
 }) => {
   return (
-    <Layout>
-      <SEO />
-      <Header currentVersion={currentVersion} />
-      <HeaderBackground>
-        <HeroHead>
-          <HeroText>Say hello</HeroText>
-          <HeroTextSecondary>to your new icon library.</HeroTextSecondary>
-        </HeroHead>
-      </HeaderBackground>
-      <HeroDescription>
-        A high-quality selection of free icons. No premium options or sign-ups.
-        Your new alternative to Noun Project, Flaticon, and all Figma resources.
-        Available in SVG, Font, React, React Native, Flutter, Figma and Framer.
-      </HeroDescription>
-      <StatsContainer>
-        <Stat
-          value={new Intl.NumberFormat('en-US').format(allIcons.length)}
-          description={
-            'icons available in this very moment, and they’re growing fast!'
-          }
-        />
-        <Stat
-          value={'100%'}
-          description={
-            'free icons. Iconoir is open source and we’re ready for your help.'
-          }
-        />
-        <Stat
-          value={new Intl.NumberFormat('en-US', { notation: 'compact' }).format(
-            numDownloads,
-          )}
-          description={
-            'downloads/month on React only. Iconoir also supports React Native, Flutter and CSS.'
-          }
-        />
-        <Stat
-          value={new Intl.NumberFormat('en-US', { notation: 'compact' }).format(
-            numStars,
-          )}
-          description={
-            'people who starred the project on GitHub. Show your support and be one of them.'
-          }
-        />
-      </StatsContainer>
-      <AvailableFor />
-      <SupportContainer>
-        <LargeButton
-          as={'a'}
-          href={SUPPORT_LINK}
-          target={'_blank'}
-          rel={'noreferrer'}
-        >
-          <span>Donate</span>
-        </LargeButton>
-        <Text18>
-          If you find Iconoir valuable for you, consider making a donation to
-          help us pursuing even bigger goals.
-        </Text18>
-      </SupportContainer>
-      <Explore allIcons={allIcons} />
+    <>
+      <Layout>
+        <SEO />
+        <Header currentVersion={currentVersion} />
+        <HeaderBackground>
+          <HeroHead>
+            <HeroText>Say hello</HeroText>
+            <HeroTextSecondary>to your new icon library.</HeroTextSecondary>
+          </HeroHead>
+        </HeaderBackground>
+        <HeroDescription>
+          A high-quality selection of free icons. No premium options or
+          sign-ups. Your new alternative to Noun Project, Flaticon, and all
+          Figma resources. Available in SVG, Font, React, React Native, Flutter,
+          Figma and Framer.
+        </HeroDescription>
+        <StatsContainer>
+          <Stat
+            value={new Intl.NumberFormat('en-US').format(allIcons.length)}
+            description={
+              'icons available in this very moment, and they’re growing fast!'
+            }
+          />
+          <Stat
+            value={'100%'}
+            description={
+              'free icons. Iconoir is open source and we’re ready for your help.'
+            }
+          />
+          <Stat
+            value={new Intl.NumberFormat('en-US', {
+              notation: 'compact',
+            }).format(numDownloads)}
+            description={
+              'downloads/month on React only. Iconoir also supports React Native, Flutter and CSS.'
+            }
+          />
+          <Stat
+            value={new Intl.NumberFormat('en-US', {
+              notation: 'compact',
+            }).format(numStars)}
+            description={
+              'people who starred the project on GitHub. Show your support and be one of them.'
+            }
+          />
+        </StatsContainer>
+        <AvailableFor />
+        <SupportContainer>
+          <LargeButton
+            as={'a'}
+            href={SUPPORT_LINK}
+            target={'_blank'}
+            rel={'noreferrer'}
+          >
+            <span>Donate</span>
+          </LargeButton>
+          <Text18>
+            If you find Iconoir valuable for you, consider making a donation to
+            help us pursuing even bigger goals.
+          </Text18>
+        </SupportContainer>
+        <Explore allIcons={allIcons} />
+      </Layout>
       <Footer />
-    </Layout>
+    </>
   );
 };
 

diff --git a/iconoir.com/styles/theme.css b/iconoir.com/styles/theme.css
@@ -1,39 +1,36 @@
 :root {
-
   /* Colors */
   --black-40: rgba(0, 0, 0, 0.4);
   --black-60: rgba(0, 0, 0, 0.6);
   --black-80: rgba(0, 0, 0, 0.8);
   --black: #000000;
   --darker-gray: #484848;
   --dark-gray: #626262;
-  --pink: #FFEBE4;
-  --blue: #E4F9FF;
-  --green: #E4FFE4;
-  --gray: #E7E7E7;
-  --gray-100: #CDCDD3;
-  --gray-200: #F9F9FA;
-  --g0: #1C2226;
-  --g1: #4F5D69;
-  --g4: #BCC9D2;
-  --g5: #E0E6EB;
-  --g6: #ECF0F4;
-  --g7: #F8FAFD;
-  --light-gray: #F2F2F2;
-  --lighter-gray: #F9F9F9;
-  --super-light-gray: #FBFBFB;
+  --pink: #ffebe4;
+  --blue: #e4f9ff;
+  --green: #e4ffe4;
+  --gray: #e7e7e7;
+  --gray-100: #cdcdd3;
+  --gray-200: #f9f9fa;
+  --g0: #1c2226;
+  --g1: #4f5d69;
+  --g4: #bcc9d2;
+  --g5: #e0e6eb;
+  --g6: #ecf0f4;
+  --g7: #f8fafd;
+  --light-gray: #f2f2f2;
+  --lighter-gray: #f9f9f9;
+  --super-light-gray: #fbfbfb;
   --white-80: rgba(255, 255, 255, 0.8);
-  --white: #FFFFFF;
-  --accent: #1E5AF6;
+  --white: #ffffff;
+  --accent: #1e5af6;
 
   --code-family: 'IBM Plex Mono', monospace;
   --font-family: 'DM Sans', sans-serif;
-
 }
 
 body {
   margin: 0;
-  padding: 50px 30px;
   background: var(--white);
   overflow-x: hidden;
 }
@@ -83,7 +80,7 @@ a {
   z-index: 2000;
 }
 
-.carbon-img img{
+.carbon-img img {
   border-radius: 10px;
 }
 
@@ -92,16 +89,12 @@ a {
   opacity: 1; /* Firefox */
 }
 
-:-ms-input-placeholder { /* Internet Explorer 10-11 */
- color: var(--g1);
-}
-
-::-ms-input-placeholder { /* Microsoft Edge */
- color: var(--g1);
+:-ms-input-placeholder {
+  /* Internet Explorer 10-11 */
+  color: var(--g1);
 }
 
-@media (min-width: 1100px) {
-  body {
-    padding: 30px 50px 50px 50px;
-  }
+::-ms-input-placeholder {
+  /* Microsoft Edge */
+  color: var(--g1);
 }