🎨Added Sidebar (#1)

Rllyyy · Sep 8, 2021 · 6a1b95b · 6a1b95b
1 parent 1251362
commit 6a1b95b
Show file tree

Hide file tree

Showing 12 changed files with 190 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -12,19 +12,20 @@
     "electron": "^14.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0",
     "react-scripts": "4.0.3",
     "wait-on": "^6.0.0",
     "web-vitals": "^1.1.2"
   },
-  "main": "public/main.js",
+  "main": "public/app.js",
   "homepage": "./",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "electron:serve": "concurrently -k \"cross-env BROWSER=none yarn start\" \"yarn electron:start\"",
-    "electron:build": "yarn build && electron-builder -c.extraMetadata.main=build/main.js",
+    "electron:build": "yarn build && electron-builder -c.extraMetadata.app=build/app.js",
     "electron:start": "wait-on tcp:3000 && electron ."
   },
   "eslintConfig": {

diff --git a/public/main.js → public/app.js b/public/main.js → public/app.js
@@ -8,6 +8,8 @@ function createWindow() {
     },
   });
 
+  win.webContents.openDevTools();
+
   win.loadURL("http://localhost:3000");
   win.maximize();
   win.show();

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>repeatio</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/Components/Main/Main.css b/src/Components/Main/Main.css
@@ -0,0 +1,4 @@
+main{
+  width: 100%;
+  height: 100vh;
+}
diff --git a/src/Components/Main/Main.js b/src/Components/Main/Main.js
@@ -0,0 +1,11 @@
+import "./Main.css";
+
+function Main() {
+  return (
+    <main>
+      <h2>Hello World</h2>
+    </main>
+  );
+}
+
+export default Main;
diff --git a/src/Components/Sidebar/Sidebar.css b/src/Components/Sidebar/Sidebar.css
@@ -0,0 +1,90 @@
+nav{
+  max-width: 70px;
+  color: white;
+  background-color: rgb(12, 12, 20);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px 12px;
+  user-select: none;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  transition: max-width .3s ease-in-out;
+}
+
+.sidebar-expanded{
+  max-width: 500px;
+  transition: max-width .3s ease-in-out;
+}
+
+/* Target the child element of the nav */
+nav > button {
+  appearance: none;
+  outline: none;
+  border: none;
+  position: relative;
+  background-color: transparent;
+  transition: background-color 0.3s linear;
+  margin-bottom: 8px;
+  padding: 0 10px; /* ((min-width) - svg width) / 2 to center  */
+  border-radius: 8px;
+  width: 100%;
+  height: 46px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+}
+
+nav > button:hover{
+  transition: background-color 0.3s linear;
+  background-color: rgb(227, 233, 245);
+}
+
+nav > button:hover svg{
+  transition: color .3s linear;
+  color: rgb(12, 12, 20);
+}
+
+button > h2 {
+  font-weight: 300;
+  padding-left: 10px;
+  opacity: 0;
+  transition: opacity 1s;
+  color: rgb(227, 233, 245);
+  white-space: nowrap;
+}
+
+nav > button:hover h2{
+  transition: color .3s linear;
+  color: rgb(12, 12, 20);
+}
+
+.sidebar-button-expanded{
+  opacity: 1;
+}
+
+.currentView{
+  background-color: rgb(33, 31, 51);
+}
+
+svg{
+  height: 26px;
+  min-width: 26px;
+  color: rgb(227, 233, 245);;
+  transition: color .3s linear;
+}
+
+.settings{
+  margin: auto 0 0px 0
+}
+
+.sponsor-icon{
+  color: rgb(226, 122, 122);
+}
+
+
+.sponsor:hover > .sponsor-icon{
+  color: rgb(182, 3, 3);
+}
diff --git a/src/Components/Sidebar/Sidebar.js b/src/Components/Sidebar/Sidebar.js
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import "./Sidebar.css";
+
+//Import Icons
+import { FaHome } from "react-icons/fa";
+import { GiHamburgerMenu } from "react-icons/gi";
+import { RiSettings4Fill } from "react-icons/ri";
+import { BiNews } from "react-icons/bi";
+import { AiOutlineHeart } from "react-icons/ai";
+import { BsCameraVideo } from "react-icons/bs";
+import { FaHandshake } from "react-icons/fa";
+
+const Sidebar = () => {
+  //useState
+  const [expandSidebar, setExpandSidebar] = useState(false); //TODO make this dependent on user settings
+  //JSX
+  return (
+    <nav className={`${expandSidebar && "sidebar-expanded"}`}>
+      <button className='hamburger' onClick={() => setExpandSidebar(!expandSidebar)}>
+        <GiHamburgerMenu className='hamburger-icon' />
+        <h2 className={`${expandSidebar && "sidebar-button-expanded"}`}>repeatio</h2>
+      </button>
+      <button className='home currentView'>
+        <FaHome className='home-icon' />
+        <h2 className={`${expandSidebar && "sidebar-button-expanded"}`}>Home</h2>
+      </button>
+      <button className='tutorials'>
+        <BsCameraVideo className='tutorials-icon' />
+        <h2 className={`${expandSidebar && "sidebar-button-expanded"}`}>Tutorials</h2>
+      </button>
+      <button className='sponsor highlighted'>
+        <AiOutlineHeart className='sponsor-icon' />
+        <h2 className={`${expandSidebar && "sidebar-button-expanded"}`}>Support this Project</h2>
+      </button>
+      <button className='thanks'>
+        <FaHandshake className='thanks-icon ' />
+        <h2 className={`${expandSidebar && "sidebar-button-expanded"}`}>Thank You</h2>
+      </button>
+      <button className='news'>
+        <BiNews className='news-icon' />
+        <h2 className={`${expandSidebar && "sidebar-button-expanded"}`}>News</h2>
+      </button>
+      <button className='settings'>
+        <RiSettings4Fill className='settings-icon' />
+        <h2 className={`${expandSidebar && "sidebar-button-expanded"}`}>Settings</h2>
+      </button>
+    </nav>
+  );
+};
+
+export default Sidebar;
diff --git a/src/index.css b/src/index.css
@@ -11,10 +11,16 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-  background-color: rgb(43, 42, 51);
+  background-color: rgb(227, 233, 245);
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+#root{
+  display: flex;
+  flex-direction: row;
+
+}
diff --git a/src/index.js b/src/index.js
@@ -1,14 +1,23 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+//Import React
+import React from "react";
+import ReactDOM from "react-dom";
+
+//Import Css
+import "./index.css";
+
+//Import Components
+import Main from "./Components/Main/Main.js";
+import Sidebar from "./Components/Sidebar/Sidebar.js";
+
+//
+import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Sidebar />
+    <Main />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/yarn.lock b/yarn.lock
@@ -9412,6 +9412,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-icons@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
+  integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
+
 react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"