main page started

package.json

@@ -12,6 +12,7 @@
     "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-filterable-table": "^0.3.439",
     "react-router-dom": "^6.3.0"
   },
   "devDependencies": {

src/App.tsx

@@ -8,6 +8,7 @@ import "./assets/styles/style.scss";
 
 // Pages
 import Login from "./pages/Login";
+import Main from "./pages/Main";
 
 const App = () => {
   const [user, setUser] = useState({
@@ -29,6 +30,7 @@ const App = () => {
     <UserContext.Provider value={userValue}>
       <div className="App">
         <Routes>
+          <Route path="/" element={<Main />} />
           <Route path="/login" element={<Login />} />
         </Routes>
       </div>

src/assets/icons/burger.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="#869AB8" stroke-width="2.25" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>

src/assets/icons/grid-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="grid"><rect width="24" height="24" opacity="0"/><path d="M9 3H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM5 9V5h4v4z"/><path d="M19 3h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-4 6V5h4v4z"/><path d="M9 13H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2zm-4 6v-4h4v4z"/><path d="M19 13h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2zm-4 6v-4h4v4z"/></g></g></svg>

src/assets/icons/logo_orient.svg

@@ -0,0 +1,9 @@
+<svg width="47" height="24" viewBox="0 0 47 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="47" height="24" fill="white"/>
+<path d="M13.4229 12.5379L14.8061 23.9928H14.1174C12.6332 23.9928 11.3827 22.8715 11.2024 21.3799L10.2835 13.7759H9.1968V10.4708H9.88431L9.88394 10.4678L9.88659 10.4708H10.3245C11.0309 10.4708 11.6054 9.88914 11.6054 9.17398V4.72051C11.6054 4.00522 11.0309 3.42365 10.3245 3.42365H9.11734C8.94731 2.30419 8.4253 1.27604 7.60516 0.468812C7.47884 0.344802 7.34766 0.227592 7.21204 0.118454H10.3245C12.8307 0.118454 14.8694 2.18282 14.8694 4.72053V9.174C14.8694 10.5003 14.3123 11.697 13.4229 12.5379Z" fill="#00822C"/>
+<path d="M16.1693 0.139488H15.8031V23.9928H19.195V3.2032C19.195 1.51112 17.8404 0.139488 16.1693 0.139488Z" fill="#00822C"/>
+<path d="M5.10361 19.7123C5.10361 20.7759 4.66069 20.9226 4.1819 20.9226C3.70312 20.9226 3.26007 20.7759 3.26007 19.7123V4.43076C3.26007 3.36729 3.70312 3.22065 4.1819 3.22065C4.66069 3.22065 5.10361 3.36731 5.10361 4.43076V19.7123ZM7.28147 1.33161C6.55249 0.547738 5.50961 0.150425 4.1819 0.150425C2.85418 0.150425 1.81119 0.547738 1.08236 1.33161C0.364251 2.10373 0.000167847 3.20084 0.000167847 4.5923V19.5508C0.000167847 20.9423 0.364233 22.0394 1.08236 22.8115C1.81119 23.5954 2.85418 23.9928 4.1819 23.9928C5.50961 23.9928 6.55249 23.5954 7.28147 22.8115C7.99956 22.0394 8.36364 20.9423 8.36364 19.5508V4.5923C8.36364 3.20084 7.99958 2.10374 7.28147 1.33161Z" fill="#00822C"/>
+<path d="M46.154 0.150517V3.58545H43.6588V23.9997C43.2094 23.9997 42.7806 23.911 42.3881 23.7508C41.528 23.3986 40.8428 22.6997 40.502 21.8254C40.502 21.825 40.5017 21.8247 40.5017 21.8247C40.4595 21.7162 40.4229 21.6055 40.3916 21.4922C40.3325 21.278 40.2933 21.0552 40.2763 20.8262C40.2699 20.7399 40.2665 20.6529 40.2665 20.5648V3.58549H36.1613C36.299 2.66223 36.6375 1.90691 37.1723 1.33174C37.9013 0.547905 38.9442 0.150554 40.2718 0.150554H46.154L46.154 0.150517Z" fill="#00822C"/>
+<path d="M36.1656 4.47772V13.8369L32.4801 -0.000217438H27.9792V19.7748H31.2084V6.37333L35.0097 20.6186C35.5409 22.6097 37.325 23.9928 39.3618 23.9928V4.4777H36.1656L36.1656 4.47772Z" fill="#00822C"/>
+<path d="M23.4546 20.8155V13.7549H25.842V10.4709H23.4546V3.33114H27.0983V0.165054H20.0627V20.5578C20.0627 22.3909 21.4807 23.8885 23.2665 23.9874C23.3287 23.9909 23.3914 23.9928 23.4546 23.9928H31.2083V20.8155H23.4546L23.4546 20.8155Z" fill="#EE4037"/>
+</svg>

src/assets/styles/_aside.scss

@@ -0,0 +1,60 @@
+.aside {
+  @include transition-std;
+  overflow: hidden;
+  max-width: 0;
+  min-width: 0rem;
+  width: 100%;
+
+  &.active {
+    max-width: 100%;
+    min-width: 20rem;
+    @include transition-std;
+  }
+
+  &__list {
+    background: #e0dfdf;
+    width: 100%;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+
+    &__element {
+      @include transition-std;
+      background: transparent;
+
+      font-size: 1.6rem;
+      cursor: pointer;
+
+      a {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 1rem;
+        width: 100%;
+        padding: 0.8rem 0.4rem 0.8rem 1.2rem;
+      }
+
+      &:hover {
+        @include transition-std;
+        background: #cccccc;
+      }
+
+      &__img {
+        width: 2rem;
+        height: 2rem;
+
+        img {
+          width: 2rem;
+          height: 2rem;
+          object-fit: contain;
+        }
+      }
+
+      &--title {
+        cursor: default !important;
+        background: transparent !important;
+        font-size: 1.4rem;
+      }
+    }
+  }
+}

src/assets/styles/_login.scss

@@ -71,6 +71,7 @@
         font-size: 1.6rem;
       }
       input {
+        font-size: 1.6rem;
         padding: 0.6rem 1.2rem;
         border: 1px solid #d9e2ef;
         border-radius: 0.2rem;

src/assets/styles/_main.scss

@@ -0,0 +1,6 @@
+.main {
+  &__mid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+  }
+}

src/assets/styles/_nav.scss

@@ -0,0 +1,85 @@
+.nav {
+  &__left {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 5%;
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    &__user {
+      border: 0.1rem solid #c8c8c8;
+      border-radius: 1rem;
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
+
+      h2 {
+        width: 100%;
+        font-weight: normal;
+        font-size: 1.6rem;
+
+        span {
+          font-weight: bold;
+        }
+      }
+
+      h3 {
+        width: 100%;
+        font-size: 1.4rem;
+        font-weight: normal;
+        span {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+
+  &.inner {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+    padding: 2rem 0;
+  }
+
+  &__img {
+    width: 7rem;
+    height: 3.4rem;
+
+    img {
+      width: 7rem;
+      height: 3.4rem;
+      object-fit: contain;
+    }
+  }
+
+  &__btn {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 4.8rem;
+    height: 3.2rem;
+    padding: 0.4rem 0;
+    border: 0.1rem solid rgba(0, 0, 0, 0.4);
+    border-radius: 0.5rem;
+    @include transition-std;
+
+    img {
+      width: 4.8rem;
+      height: 3.2rem;
+      object-fit: contain;
+    }
+
+    &:active {
+      @include transition-std;
+      border: 0.3rem solid rgba(0, 0, 0, 0.8);
+    }
+  }
+}

src/assets/styles/style.scss

@@ -1,2 +1,5 @@
 @import "./general";
 @import "./login";
+@import "./nav";
+@import "./main";
+@import "./aside";

src/components/Aside.tsx

@@ -0,0 +1,34 @@
+// Modules
+import React from "react";
+import { Link } from "react-router-dom";
+
+// Icons
+import Grid from "../assets/icons/grid-outline.svg";
+
+// Types
+interface Props {
+  aside: boolean;
+  setAside: React.Dispatch<boolean>;
+}
+
+const Aside = ({ aside, setAside }: Props) => {
+  return (
+    <aside className={aside ? "aside active" : "aside"}>
+      <ul className="aside__list">
+        <li className="aside__list__element aside__list__element--title">
+          <h2>Elements</h2>
+        </li>
+        <li className="aside__list__element">
+          <Link to={"/posts"}>
+            <div className="aside__list__element__img">
+              <img src={Grid} alt="" />
+            </div>
+            <span>Posts</span>
+          </Link>
+        </li>
+      </ul>
+    </aside>
+  );
+};
+
+export default Aside;

src/components/Nav.tsx

@@ -0,0 +1,51 @@
+// Modules
+import { useContext } from "react";
+import { UserContext } from "../context/UserContext";
+
+// Icons
+import Orient from "../assets/icons/logo_orient.svg";
+import Burger from "../assets/icons/burger.svg";
+
+// Types
+import { userContextType } from "../types/user";
+interface Props {
+  aside: boolean;
+  setAside: React.Dispatch<boolean>;
+}
+
+const Nav = ({ aside, setAside }: Props) => {
+  const { user, setUser }: userContextType = useContext(UserContext);
+  return (
+    <nav className="nav">
+      <div className="container">
+        <div className="nav inner">
+          <div className="nav__left">
+            <div className="nav__img">
+              <img src={Orient} alt="orient" />
+            </div>
+            <button
+              type="button"
+              className="nav__btn"
+              onClick={() => setAside(!aside)}
+            >
+              <img src={Burger} alt="" />
+            </button>
+          </div>
+          <div className="nav__right">
+            <div className="nav__right__user">
+              <h2>
+                <span>User:</span> {" " + user.username && user.username}
+              </h2>
+              <h3>
+                <span>Access:</span>{" "}
+                {" " + user.accessLevel && user.accessLevel}
+              </h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Nav;

src/pages/Login.tsx

@@ -12,6 +12,7 @@ const Login = () => {
   const [valid, setValid] = useState({
     username: "",
     password: "",
+    remember: false,
     check: false,
     valid: false,
   });
@@ -73,7 +74,14 @@ const Login = () => {
               </div>
               <div className="login__form__block--check">
                 <label>
-                  <input type="checkbox" name="remember" id="remember" />
+                  <input
+                    type="checkbox"
+                    name="remember"
+                    id="remember"
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      setValid({ ...valid, remember: e.target.checked });
+                    }}
+                  />
                   <span>Remember me</span>
                 </label>
               </div>
@@ -96,6 +104,13 @@ const Login = () => {
                       accessLevel: "admin",
                     });
                   }
+                  if (valid.remember) {
+                    const value = {
+                      username: valid.username,
+                      accessLevel: "admin",
+                    };
+                    localStorage.setItem("userData", JSON.stringify(value));
+                  }
                 }}
               >
                 Login

src/pages/Main.tsx

@@ -0,0 +1,37 @@
+// Modules
+import { useState, useContext, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { UserContext } from "../context/UserContext";
+
+// Components
+import Nav from "../components/Nav";
+import Aside from "../components/Aside";
+
+// Types
+import { userContextType } from "../types/user";
+
+const Main = ({ child }: any) => {
+  const navigate = useNavigate();
+  const { user, setUser }: userContextType = useContext(UserContext);
+  const [aside, setAside] = useState(true);
+
+  useEffect(() => {
+    if (!user.username) {
+      navigate("/login");
+    }
+  }, [user]);
+
+  return (
+    <main className="main">
+      <div className="main__top">
+        <Nav aside={aside} setAside={setAside} />
+      </div>
+      <div className="main__mid">
+        <Aside aside={aside} setAside={setAside} />
+        <div className="main-inner">{child}</div>
+      </div>
+    </main>
+  );
+};
+
+export default Main;

src/types/user.ts

@@ -0,0 +1,9 @@
+export interface userType {
+  username: string;
+  accessLevel: string;
+}
+
+export interface userContextType {
+  user: userType;
+  setUser: React.Dispatch<userType>;
+}

tsconfig.json

@@ -16,6 +16,7 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
+
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }