Skip to content
Snippets Groups Projects
Commit 88bf0e66 authored by Planoetscher Daniel (Student Com20)'s avatar Planoetscher Daniel (Student Com20)
Browse files

basic nav for in app

parent 69e1c691
No related branches found
No related tags found
No related merge requests found
......@@ -16,6 +16,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<title>ryoko | plan your projects like a journey</title>
</head>
......
......@@ -8,6 +8,8 @@ const Home = lazy(() => import('pages/Home'));
const Login = lazy(() => import('pages/Login'));
const Register = lazy(() => import('pages/Register'));
const Tasks = lazy(() => import('pages/Tasks'));
const Projects = lazy(() => import('pages/Projects'));
const Stats = lazy(() => import('pages/Stats'));
export default function App() {
return (
......@@ -15,6 +17,8 @@ export default function App() {
<Suspense fallback={false}>
<Switch>
<ProtectedRoute path="/tasks" component={Tasks} />
<ProtectedRoute path="/projects" component={Projects} />
<ProtectedRoute path="/stats" component={Stats} />
<LoginRoute path="/login" component={Login} />
<LoginRoute path="/register" component={Register} />
<Route path="/" component={Home} />
......
import './header.scss';
export default function Header() {
return (
<div></div>
);
}
\ No newline at end of file
import { NavLink } from 'react-router-dom';
import './navigation.scss';
import background from 'images/svg/nav-bg.svg';
export default function Navigation() {
return (
<main>
<h1>Navigation</h1>
</main>
<nav>
<NavLink to="/tasks" activeClassName="active" className="nav-link">
<span className="icon material-icons-outlined">
home
</span>
<span className="label">Home</span>
</NavLink>
<NavLink to="/projects" activeClassName="active" className="nav-link">
<span className="icon material-icons-outlined">
public
</span>
<span className="label">Projects</span>
</NavLink>
<NavLink to="/stats" activeClassName="active" className="nav-link">
<span className="icon material-icons-outlined">
public
</span>
<span className="label">Stats</span>
</NavLink>
<img src={background} alt="Background" className="background" />
</nav>
);
}
\ No newline at end of file
.active {
.icon {
font-family: 'Material Icons';
}
}
\ No newline at end of file
<svg width="411" height="78" viewBox="0 0 411 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_b)">
<path d="M208.5 1.00001C35.5 -4.4826 -0.5 25.5 -0.5 25.5V77.5H411V27C411 27 381.5 6.48262 208.5 1.00001Z" fill="white"/>
</g>
</svg>
import Navigation from 'components/ui/Navigation';
import './projects.scss';
export default function Tasks() {
return (
<div className="projects-page">
<Navigation />
<main>
<h1>Projects</h1>
</main>
</div>
);
}
\ No newline at end of file
import Navigation from 'components/ui/Navigation';
import './stats.scss';
export default function Tasks() {
return (
<div className="stats-page">
<Navigation />
<main>
<h1>Stats</h1>
</main>
</div>
);
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment