Merge pull request #1 from FazidSamoon/feature/sidenav

Added sideNav

package.json

@@ -8,6 +8,7 @@
     "react": "^18.1.0",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.1.0",
+    "react-icons": "^4.3.1",
     "react-scripts": "5.0.1",
     "react-select": "^5.3.1",
     "react-typist": "^2.0.5"
@@ -17,13 +18,8 @@
     "build": "react-scripts build && cp -r src/assets/images/ build/images",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
-    "lint:check": "eslint . --ext=js,jsx;  exit 0",
-    "lint:fix": "eslint . --ext=js,jsx --fix;  exit 0",
     "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf yarn.lock && npm install && npm start"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": [
     ">0.2%",
     "not dead",
@@ -32,15 +28,6 @@
   ],
   "devDependencies": {
     "autoprefixer": "^10.4.5",
-    "eslint": "^8.2.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "@babel/eslint-parser": "^7.17.0",
-    "babel-eslint": "^10.1.0",
     "postcss": "^8.4.13",
     "tailwindcss": "^3.0.24"
   }

src/App.js

@@ -1,133 +1,15 @@
-import React, { Component } from 'react';
-
-import { optionsFirst, optionsSecond, optionsThird } from 'data';
-
-
-import ExplorerContent from 'components/explorerContent';
+import React, { Component } from "react";
+import { SideNav, Footer } from "components/layout";
+import ExplorerContent from "components/explorerContent";
 
 class App extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  handleToggle = (evt) => {
-    const { id } = evt.target;
-
-    this.setState(
-      prevState => ({ [id]: !prevState[id] }),
-      () => {
-        localStorage.setItem(id, this.state[id]);
-      }
-    );
-  };
-
-  onFirstChange = (selectedOption) => {
-    if (this.state.secondOption) {
-      this.setState({
-        firstOption: selectedOption,
-        showSecond: true,
-        secondOption: null,
-        showThird: false,
-        nb: '',
-        usage: ''
-      });
-    } else if (optionsSecond[selectedOption.value].length === 1) {
-      this.setState({ firstOption: selectedOption, showSecond: true });
-      this.onSecondChange(optionsSecond[selectedOption.value][0]);
-    } else {
-      this.setState({ firstOption: selectedOption, showSecond: true });
-    }
-  };
-
-  onSecondChange = (selectedOption) => {
-    if (selectedOption.usage) {
-      this.setState({ nb: '', usage: '' }, () => {
-        this.setState({
-          secondOption: selectedOption,
-          showThird: false,
-          nb: selectedOption.nb,
-          usage: selectedOption.usage,
-          thirdOption: null
-        });
-      });
-    } else if (optionsThird[selectedOption.value].length === 1) {
-      this.setState({
-        secondOption: selectedOption,
-        showThird: true,
-        thirdOption: null,
-        nb: '',
-        usage: ''
-      });
-      this.onThirdChange(optionsThird[selectedOption.value][0]);
-    } else {
-      this.setState({
-        secondOption: selectedOption,
-        showThird: true,
-        thirdOption: null,
-        nb: '',
-        usage: ''
-      });
-    }
-  };
-
-  onThirdChange = (selectedOption) => {
-    this.setState({ nb: '', usage: '' }, () => {
-      this.setState({
-        thirdOption: selectedOption,
-        nb: selectedOption.nb,
-        usage: selectedOption.usage
-      });
-    });
-  };
-
-  onCopy = () => {
-    this.setState({ copied: true }, () => {
-      if (this.timeout) {
-        clearInterval(this.timeout);
-      }
-      this.timeout = setTimeout(() => {
-        this.setState({ copied: false });
-      }, 1000);
-    });
-  };
-
-  copyUsage = () => {
-    const el = document.createElement('textarea');
-    el.value = this.state.usage;
-    el.setAttribute('readonly', '');
-    el.style.position = 'absolute';
-    el.style.left = '-9999px';
-    document.body.appendChild(el);
-    const selected = document.getSelection().rangeCount > 0
-      ? document.getSelection().getRangeAt(0)
-      : false;
-    el.select();
-    document.execCommand('copy');
-    document.body.removeChild(el);
-    this.onCopy();
-
-    if (selected) {
-      document.getSelection().removeAllRanges();
-      document.getSelection().addRange(selected);
-    }
-  };
-
   render() {
-    // const {
-    //   firstOption,
-    //   secondOption,
-    //   thirdOption,
-    //   showSecond,
-    //   showThird,
-    //   fastType,
-    //   nb,
-    //   usage,
-    //   copied
-    // } = this.state;
-    // const avgTypingDelay = fastType ? 0 : 50;
-
     return (
-      <ExplorerContent/>
+      <div className="App">
+        <SideNav />
+        <ExplorerContent />
+        <Footer />
+      </div>
     );
   }
 }

src/components/explorerContent.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import Select from "react-select";
 import clipboard from "assets/images/clipboard.svg";
-import { Footer, Nav } from "components/layout";
+
 import Typist from "react-typist";
 import { isMobile } from "react-device-detect";
 
@@ -108,8 +108,8 @@ function ExplorerContent() {
 
   return (
     <div>
-      <div className="container home__container">
-        <Nav />
+      <div className="container home__container ml-[6rem] ">
+
         <div className="content">
           <div className="row">
             <div className="col-5">
@@ -207,7 +207,7 @@ function ExplorerContent() {
             </div>
           </div>
         </div>
-        <Footer />
+
       </div>
     </div>
   );

src/components/index.js

@@ -0,0 +1 @@
+export * from './themeControl';

src/components/layout/index.js

@@ -1,2 +1,2 @@
 export { default as Footer } from "./footer";
-export { default as Nav } from "./nav";
+export { default as SideNav } from "./sideNav";

src/components/layout/sideNav.js

@@ -0,0 +1,67 @@
+import React from "react";
+import {
+  FaYarn,
+  FaVuejs,
+  FaReact,
+  FaNpm,
+  FaWindows,
+  FaLinux,
+  FaTerminal
+} from "react-icons/fa";
+import { AiFillGithub } from "react-icons/ai";
+
+import { SiNestjs, SiNextdotjs, SiHeroku } from "react-icons/si";
+import { RiFlutterFill } from "react-icons/ri";
+
+function SideNav() {
+  const navItems = [
+    { name: FaLinux, desc: "Linux", link: "https://www.linux.org/" },
+    {
+      name: FaWindows,
+      desc: "Windows",
+      link: "https://www.microsoft.com/en-us/windows/",
+    },
+    { name: FaNpm, desc: "NPM", link: "https://www.npmjs.com/" },
+    { name: FaYarn, desc: "Yarn", link: "https://yarnpkg.com/en/" },
+    { name: FaVuejs, desc: "Vue.js", link: "https://vuejs.org/" },
+    { name: FaReact, desc: "React", link: "https://reactjs.org/" },
+    { name: AiFillGithub, desc: "Github", link: "https://github.com" },
+    { name: RiFlutterFill, desc: "Flutter", link: "https://flutter.dev/" },
+    { name: SiNestjs, desc: "Nest.js", link: "https://nestjs.com/" },
+    { name: SiNextdotjs, desc: "Next.js", link: "https://nextjs.org/" },
+    { name: SiHeroku, desc: "Heroku", link: "https://www.heroku.com/" },
+  ];
+
+  return (
+    <div className="">
+      <div
+        className="group absolute z-40 flex flex-col h-screen w-[6rem] hover:w-[14rem] bg-blue-primary shadow-right px-2  ease-in-out duration-300 "
+
+      >
+        <div className="flex flex-col mt-3.5">
+          <FaTerminal className="w-12 h-12 text-white ml-[0.9rem] mb-12 mt-5"/>
+          {navItems.map((Item, index) => {
+            return (
+              <div key={index} className="flex flex-col">
+                <a href={Item.link}>
+                  <div className="flex flex-row justify-start items-center">
+                    <div className="my-3 ml-[0.8rem]">
+                    <Item.name className="text-white cursor-pointer w-12 h-12 hover:text-blue-light transition-all duration-300" />
+                    </div>
+                    <span
+                      className={`cursor-pointer opacity-0 hover:text-blue-light pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto items-center pl-5 text-2xl text-white transition ease-in duration-300 `}
+                    >
+                      {Item.desc}
+                    </span>
+                  </div>
+                </a>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SideNav;

src/components/layout/nav.js → src/components/themeControl.js

@@ -1,5 +1,5 @@
 import React from "react";
-import Toggle from "../toggle";
+import Toggle from "./toggle";
 import { useState } from "react";
 
 const Nav = () => {

src/styles/main.css

@@ -46,7 +46,9 @@ body {
   line-height: 1.5;
   color: #212529;
   text-align: left;
-  background-color: #fff; }
+  background-color: #fff; 
+  overflow-x: hidden;
+}
 
 [tabindex="-1"]:focus {
   outline: 0 !important; }
@@ -671,3 +673,8 @@ body {
       top: 50%;
       transform: translateY(-50%);
       left: -1.2rem; }
+
+
+      *{
+        text-decoration: none !important;
+      }

tailwind.config.js

@@ -1,10 +1,13 @@
 module.exports = {
-  content: [
-    './src/**/*.{html,js, jsx, tsx}',
-],
+  content: ["./src/**/*.{html,js, jsx, tsx}"],
   important: true,
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        blue: { primary: "#00183A", light: "#B9E6FF" },
+      },
+    },
   },
+
   plugins: [],
 };