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">
|
||||
<head>
|
||||
<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" />
|
||||
<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>
|
||||
<body>
|
||||
<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,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
@ -10,30 +10,22 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.11.1",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@material-ui/core": "^4.12.4",
|
||||
"@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",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"framer-motion": "^10.16.4",
|
||||
"postcss": "^8.4.31",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap": "^2.9.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-google-login": "^5.2.2",
|
||||
"react-router-dom": "^6.17.0"
|
||||
"react-icons": "^4.11.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"@vitejs/plugin-react-swc": "^3.3.2",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"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 { Routes, Route, Link } from "react-router-dom";
|
||||
// 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';
|
||||
|
||||
import React from "react";
|
||||
import IconSideNav from "./components/IconSideNav";
|
||||
const App = () => {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<div className="App">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
return (
|
||||
|
||||
<IconSideNav />
|
||||
);
|
||||
};
|
||||
|
||||
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 ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
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 react from '@vitejs/plugin-react'
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user