mirror of
https://github.com/TurTaskProject/TurTaskWeb.git
synced 2025-12-19 22:14:07 +01:00
Constructing sidebar nav.
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB
parent
ca24f89c6d
commit
3c775aff44
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + React</title>
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
|
||||||
|
<title>GG_WPX</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
4179
frontend/package-lock.json
generated
Normal file
4179
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "frontend",
|
"name": "mywebapp",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
@ -10,30 +10,22 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emotion/react": "^11.11.1",
|
"autoprefixer": "^10.4.16",
|
||||||
"@emotion/styled": "^11.11.0",
|
"framer-motion": "^10.16.4",
|
||||||
"@material-ui/core": "^4.12.4",
|
"postcss": "^8.4.31",
|
||||||
"@material-ui/icons": "^4.11.3",
|
|
||||||
"@mui/icons-material": "^5.14.15",
|
|
||||||
"@mui/material": "^5.14.15",
|
|
||||||
"axios": "^1.5.1",
|
|
||||||
"bootstrap": "^5.3.2",
|
|
||||||
"dotenv": "^16.3.1",
|
|
||||||
"gapi-script": "^1.2.0",
|
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-bootstrap": "^2.9.1",
|
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-google-login": "^5.2.2",
|
"react-icons": "^4.11.0"
|
||||||
"react-router-dom": "^6.17.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/react": "^18.2.15",
|
"@types/react": "^18.2.15",
|
||||||
"@types/react-dom": "^18.2.7",
|
"@types/react-dom": "^18.2.7",
|
||||||
"@vitejs/plugin-react": "^4.0.3",
|
"@vitejs/plugin-react-swc": "^3.3.2",
|
||||||
"eslint": "^8.45.0",
|
"eslint": "^8.45.0",
|
||||||
"eslint-plugin-react": "^7.32.2",
|
"eslint-plugin-react": "^7.32.2",
|
||||||
"eslint-plugin-react-hooks": "^4.6.0",
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
"eslint-plugin-react-refresh": "^0.4.3",
|
"eslint-plugin-react-refresh": "^0.4.3",
|
||||||
"vite": "^4.4.5"
|
"tailwindcss": "^3.3.4",
|
||||||
|
"vite": "^4.5.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,52 +1,10 @@
|
|||||||
// import './App.css';
|
import React from "react";
|
||||||
// import { Routes, Route, Link } from "react-router-dom";
|
import IconSideNav from "./components/IconSideNav";
|
||||||
// import Login from "./components/login";
|
|
||||||
// import TestAuth from './components/testAuth';
|
|
||||||
|
|
||||||
// function App() {
|
|
||||||
// return (
|
|
||||||
// <div className="App">
|
|
||||||
// <nav>
|
|
||||||
// <Link className={"nav-link"} to={"/"}>Home</Link>
|
|
||||||
// <Link className={"nav-link"} to={"/login"}>Login</Link>
|
|
||||||
// <Link className={"nav-link"} to={"/testAuth"}>testAuth</Link>
|
|
||||||
// </nav>
|
|
||||||
// <Routes>
|
|
||||||
// <Route exact path={"/login"} element={Login} />
|
|
||||||
// <Route exact path={"/testAuth"} element={TestAuth} />
|
|
||||||
// <Route path={"/"} render={() => <h1>This is Home page!</h1>} />
|
|
||||||
// </Routes>
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
// export default App;
|
|
||||||
|
|
||||||
import './App.css';
|
|
||||||
import {BrowserRouter, Route, Routes, Link} from "react-router-dom";
|
|
||||||
import Login from "./components/login";
|
|
||||||
import TestAuth from './components/testAuth';
|
|
||||||
import Signup from './components/signup';
|
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return (
|
return (
|
||||||
<BrowserRouter>
|
|
||||||
<div className="App">
|
<IconSideNav />
|
||||||
<nav>
|
);
|
||||||
<Link className={"nav-link"} to={"/"}>Home</Link>
|
};
|
||||||
<Link className={"nav-link"} to={"/login"}>Login</Link>
|
|
||||||
<Link className={"nav-link"} to={"/signup"}>Signup</Link>
|
|
||||||
<Link className={"nav-link"} to={"/testAuth"}>testAuth</Link>
|
|
||||||
</nav>
|
|
||||||
<Routes>
|
|
||||||
<Route path={"/"} render={() => <h1>This is Home page!</h1>} />
|
|
||||||
<Route path="/login" element={<Login/>}/>
|
|
||||||
<Route path="/signup" element={<Signup/>}/>
|
|
||||||
<Route path="/testAuth" element={<TestAuth/>}/>
|
|
||||||
</Routes>
|
|
||||||
</div>
|
|
||||||
</BrowserRouter>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
BIN
frontend/src/assets/calendar.png
Normal file
BIN
frontend/src/assets/calendar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
frontend/src/assets/home.png
Normal file
BIN
frontend/src/assets/home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
frontend/src/assets/pie-chart.png
Normal file
BIN
frontend/src/assets/pie-chart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
frontend/src/assets/planning.png
Normal file
BIN
frontend/src/assets/planning.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
frontend/src/assets/plus.png
Normal file
BIN
frontend/src/assets/plus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
100
frontend/src/components/IconSideNav.jsx
Normal file
100
frontend/src/components/IconSideNav.jsx
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
import { AnimatePresence, motion } from "framer-motion";
|
||||||
|
import { useState } from "react";
|
||||||
|
import {
|
||||||
|
SiFramer,
|
||||||
|
SiTailwindcss,
|
||||||
|
SiReact,
|
||||||
|
SiJavascript,
|
||||||
|
SiCss3,
|
||||||
|
} from "react-icons/si";
|
||||||
|
|
||||||
|
import homeLogo from "../assests/home.png";
|
||||||
|
import calendarLogo from "../assests/calendar.png";
|
||||||
|
import planLogo from "../assests/planning.png";
|
||||||
|
import pieLogo from "../assests/pie-chart.png";
|
||||||
|
import plusLogo from "../assests/plus.png";
|
||||||
|
|
||||||
|
const IconSideNav = () => {
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-900 text-slate-100 flex">
|
||||||
|
<SideNav />
|
||||||
|
<div className="w-full"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const SideNav = () => {
|
||||||
|
const [selected, setSelected] = useState(0);
|
||||||
|
|
||||||
|
const menuItems = [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
icon: <homeLogo />,
|
||||||
|
logo: homeLogo,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
icon: <calendarLogo />,
|
||||||
|
logo: calendarLogo,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
icon: <planLogo />,
|
||||||
|
logo: planLogo,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
icon: <pieLogo />,
|
||||||
|
logo: pieLogo,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
icon: <plusLogo />,
|
||||||
|
logo: plusLogo,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="h-[500px] w-fit bg-slate-950 p-4 flex flex-col items-center gap-2">
|
||||||
|
{menuItems.map((item) => (
|
||||||
|
<NavItem
|
||||||
|
key={item.id}
|
||||||
|
icon={item.icon}
|
||||||
|
selected={selected === item.id}
|
||||||
|
id={item.id}
|
||||||
|
setSelected={setSelected}
|
||||||
|
logo={item.logo}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const NavItem = ({ icon, selected, id, setSelected, logo }) => {
|
||||||
|
return (
|
||||||
|
<motion.button
|
||||||
|
className="p-3 text-xl bg-slate-800 hover:bg-slate-700 rounded-md transition-colors relative"
|
||||||
|
onClick={() => setSelected(id)}
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<AnimatePresence>
|
||||||
|
{selected && (
|
||||||
|
<motion.span
|
||||||
|
className="absolute inset-0 rounded-md bg-indigo-600 z-0"
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
exit={{ scale: 0 }}
|
||||||
|
></motion.span>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
<span className="block relative z-10">
|
||||||
|
{icon}
|
||||||
|
<img src={logo} alt="Logo" className="h-8 w-8 mx-auto my-2" />
|
||||||
|
</span>
|
||||||
|
</motion.button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export default IconSideNav;
|
||||||
@ -1,12 +1,7 @@
|
|||||||
import React from 'react';
|
import React from "react";
|
||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from "react-dom";
|
||||||
import './index.css';
|
import App from "./App";
|
||||||
import App from './App';
|
|
||||||
|
|
||||||
ReactDOM.createRoot(
|
|
||||||
document.getElementById("root"),
|
|
||||||
)
|
|
||||||
.render(
|
|
||||||
<App />
|
|
||||||
);
|
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||||
|
<App />
|
||||||
|
);
|
||||||
30
frontend/tailwind.config.js
Normal file
30
frontend/tailwind.config.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: ['./src/**/*.{html,js}'],
|
||||||
|
theme: {
|
||||||
|
colors: {
|
||||||
|
'blue': '#1fb6ff',
|
||||||
|
'purple': '#7e5bef',
|
||||||
|
'pink': '#ff49db',
|
||||||
|
'orange': '#ff7849',
|
||||||
|
'green': '#13ce66',
|
||||||
|
'yellow': '#ffc82c',
|
||||||
|
'gray-dark': '#273444',
|
||||||
|
'gray': '#8492a6',
|
||||||
|
'gray-light': '#d3dce6',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Graphik', 'sans-serif'],
|
||||||
|
serif: ['Merriweather', 'serif'],
|
||||||
|
},
|
||||||
|
extend: {
|
||||||
|
spacing: {
|
||||||
|
'8xl': '96rem',
|
||||||
|
'9xl': '128rem',
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
'4xl': '2rem',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import react from '@vitejs/plugin-react'
|
import react from '@vitejs/plugin-react-swc'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user