diff --git a/package.json b/package.json
index d442075..1a4ec51 100644
--- a/package.json
+++ b/package.json
@@ -12,11 +12,12 @@
"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",
@@ -24,7 +25,7 @@
"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 b/public/app.js
similarity index 96%
rename from public/main.js
rename to public/app.js
index 49a08b6..0e2cddd 100644
--- a/public/main.js
+++ b/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
index d147a95..8d68f6a 100644
--- 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`.
-->
- React App
+ repeatio
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 8b13789..0000000
--- a/src/App.css
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 893113c..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import "./App.css";
-
-function App() {
- return (
-
-
Hello World
-
- );
-}
-
-export default App;
diff --git a/src/Components/Main/Main.css b/src/Components/Main/Main.css
new file mode 100644
index 0000000..948e269
--- /dev/null
+++ 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
new file mode 100644
index 0000000..4ab3ef7
--- /dev/null
+++ b/src/Components/Main/Main.js
@@ -0,0 +1,11 @@
+import "./Main.css";
+
+function Main() {
+ return (
+
+ Hello World
+
+ );
+}
+
+export default Main;
diff --git a/src/Components/Sidebar/Sidebar.css b/src/Components/Sidebar/Sidebar.css
new file mode 100644
index 0000000..4128bf3
--- /dev/null
+++ 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);
+}
\ No newline at end of file
diff --git a/src/Components/Sidebar/Sidebar.js b/src/Components/Sidebar/Sidebar.js
new file mode 100644
index 0000000..a831bfa
--- /dev/null
+++ 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 (
+
+ );
+};
+
+export default Sidebar;
diff --git a/src/index.css b/src/index.css
index d80736a..be8fecd 100644
--- 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
index ef2edf8..5b91dba 100644
--- 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(
-
+
+
,
- 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
index 166c757..29611bc 100644
--- 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"