From 8021a8d467526e93f374559f786b88f99b5717d0 Mon Sep 17 00:00:00 2001
From: gagansankhla <sankhlaga@gmail.com>
Date: Mon, 21 Aug 2023 01:38:00 +0530
Subject: [PATCH] Responsive footer links for mobile view

---
 .../src/components/molecules/Footer.jsx       | 39 +++++++++++++++----
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/uli-website/src/components/molecules/Footer.jsx b/uli-website/src/components/molecules/Footer.jsx
index 9808ee68..70a4e205 100644
--- a/uli-website/src/components/molecules/Footer.jsx
+++ b/uli-website/src/components/molecules/Footer.jsx
@@ -1,9 +1,23 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Box, Nav, Text } from "grommet";
 import { NavLink } from "../atoms/UliCore";
 import { navigate } from "gatsby";
 
 export default function Footer() {
+
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const isSmallScreen = windowWidth <= 768;
+
+
   return (
     <Box align="center">
       <Box
@@ -11,14 +25,23 @@ export default function Footer() {
         width={"large"}
         direction={"row-responsive"}
         gap="small"
+        style={
+          isSmallScreen
+            ? {
+              flexDirection: "column",
+              justifyContent: "flex-start",
+              alignItems: "center",
+            }
+            : {}
+        }
       >
-        <NavLink to="https://twitter.com/tattlemade">Twitter</NavLink>
-        <NavLink to="/privacy-policy">Privacy Policy</NavLink>
-        <NavLink to="/blog">Blog</NavLink>
-        <NavLink to="https://github.com/tattle-made/OGBV/tree/main/uli-website">
-          GitHub
-        </NavLink>
-      </Box>
+      <NavLink to="https://twitter.com/tattlemade">Twitter</NavLink>
+      <NavLink to="/privacy-policy">Privacy Policy</NavLink>
+      <NavLink to="/blog">Blog</NavLink>
+      <NavLink to="https://github.com/tattle-made/OGBV/tree/main/uli-website">
+        GitHub
+      </NavLink>
     </Box>
+    </Box >
   );
 }