fix: missing icon, scroll on change

LeleDallas · Aug 8, 2023 · 5cc75f0 · 5cc75f0
1 parent 959458a
commit 5cc75f0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import Navbar from './navigator/Navbar'
 import About from './screens/About'
 import Aside from './navigator/Aside'
@@ -12,6 +12,10 @@ function App() {
 
   const [active, setActive] = useState<ActiveNav>("About")
 
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [active])
+
   return (
     <main>
       <Aside />

diff --git a/src/navigator/Aside.tsx b/src/navigator/Aside.tsx
@@ -1,11 +1,12 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import IconFont from "../components/iconfont";
 import { birthday, email, fullName, location, phone, role, socialListIcons } from "../utils";
 
 
 const Aside = () => {
 
     const [over, setOver] = useState(-1)
+    const [width, setWidth] = useState(0);
 
     const elementToggleFunc = function (elem: Element) {
         elem.classList.toggle("active");
@@ -17,6 +18,12 @@ const Aside = () => {
             elementToggleFunc(sidebar);
     };
 
+
+    useEffect(() => {
+        window.addEventListener("resize", () => setWidth(window.innerWidth))
+        return () => window.removeEventListener("resize", () => setWidth(window.innerWidth))
+    }, []);
+
     return (
         <aside className="sidebar" data-sidebar>
 
@@ -30,8 +37,9 @@ const Aside = () => {
                     <p className="title">{role}</p>
                 </div>
 
-                <button onClick={sidebarToggle} className="info_more-btn" data-sidebar-btn>
+                <button onClick={sidebarToggle} className="info_more-btn" >
                     <span>Show Contacts</span>
+                    {width < 580 && <IconFont name="see" color={"#006df0"} />}
                 </button>
 
             </div>