From 48e5bcf23d353d0093b80984eec7ca69b51ec6e9 Mon Sep 17 00:00:00 2001 From: xenia_grib Date: Fri, 16 Oct 2026 15:05:28 +0200 Subject: [PATCH 1/7] feat: initial navbar and routing without style --- package-lock.json | 60 +++++++++- package.json | 3 +- src/App.tsx | 139 ++++-------------------- src/components/navbar/Navbar.module.css | 89 +++++++++++++++ src/components/navbar/Navbar.tsx | 50 +++++++++ 5 files changed, 222 insertions(+), 119 deletions(-) create mode 100644 src/components/navbar/Navbar.module.css create mode 100644 src/components/navbar/Navbar.tsx diff --git a/package-lock.json b/package-lock.json index e24f242..13b7d30 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,8 @@ ], "dependencies": { "react": "^19.2.8", - "react-dom": "^19.2.8" + "react-dom": "^19.2.8", + "react-router-dom": "^7.18.4" }, "devDependencies": { "@babel/core": "^7.29.7", @@ -2703,6 +2704,19 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz", + "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -4555,6 +4569,44 @@ "react": "^19.3.0" } }, + "node_modules/react-router": { + "version": "7.18.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.4.tgz", + "integrity": "sha512-PUPQcMhMGRAslLcvtlPz/kmzBEWPhLdgLFrL7pLNepBL6dX0lWj4WD2cUYVgYCuT3jxvghYFg81cDTj44DhetQ==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.18.4", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.4.tgz", + "integrity": "sha512-yrfmJHIpDG7taCpqKjT1G5B6q3O2K+RN8/fgNf0lTjCwiPbQ0ei6vXX9ZjQR+7ld8Tr7Z5xmyMnZ8YJrphWQUw==", + "license": "MIT", + "dependencies": { + "react-router": "7.18.4" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/readdirp": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz", @@ -4702,6 +4754,12 @@ "integrity": "sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q==", "devOptional": true }, + "node_modules/set-cookie-parser": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz", + "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index 748a1d5..63f55b2 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ }, "dependencies": { "react": "^19.2.8", - "react-dom": "^19.2.8" + "react-dom": "^19.2.8", + "react-router-dom": "^7.18.4" }, "devDependencies": { "@babel/core": "^7.29.7", diff --git a/src/App.tsx b/src/App.tsx index 9ca8e8d..f7ba97e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,122 +1,27 @@ -import { useState } from 'react' -import heroImg from './assets/hero.png' -import reactLogo from './assets/react.svg' -import viteLogo from './assets/vite.svg' -import './App.css' +import React from 'react'; +import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import { Navbar } from './components/navbar/Navbar'; -function App() { - const [count, setCount] = useState(0) +// Enkle plassholder-sider +const SearchPage = () =>

Search Catalog

; +const CalculatorPage = () =>

Routine Calculator

; +const GymnastsPage = () =>

Gymnasts

; +const AboutPage = () =>

About

; +const NotFoundPage = () =>

404 - Side ikke funnet

; +export function App() { return ( - <> -
-
- - React logo - Vite logo -
-
-

Get started

-

- Edit src/App.tsx and save to test HMR -

-
- -
- -
- -
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
- -
-
- - ) + + + + } /> + } /> + } /> + } /> + } /> + + + ); } -export default App +export default App; \ No newline at end of file diff --git a/src/components/navbar/Navbar.module.css b/src/components/navbar/Navbar.module.css new file mode 100644 index 0000000..bb96ba7 --- /dev/null +++ b/src/components/navbar/Navbar.module.css @@ -0,0 +1,89 @@ +.header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-md) var(--space-xl); + background: var(--header-background); + border-bottom: 1px solid var(--border-subtle); +} + + .logo, .link { + font-family: var(--font-family-text); + color: var(--text-color-primary); + text-decoration: none; + font-weight: 500; +} + + .logo { + font-family: var(--font-family-title); + font-size: 1.25rem; + font-weight: 700; +} + + .nav { + display: flex; + align-items: center; + gap: var(--space-md); +} + + .link { + position: relative; + padding: var(--space-xs) 0; +} + + .active::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: var(--text-color-primary); +} + + .toggle { + width: 48px; + height: 26px; + padding: 2px; + border-radius: var(--corner-radius); + border: 1px solid var(--border-subtle); + background: var(--element-background); + cursor: pointer; + display: flex; + align-items: center; +} + + .thumb { + width: 20px; + height: 20px; + border-radius: 50%; + background: var(--header-background); + display: flex; + align-items: center; + justify-content: center; + font-size: 0.7rem; + transition: transform 0.2s ease; +} + + .toggle[aria-checked="true"] .thumb { + transform: translateX(22px); +} + + .loginBtn { + font-family: var(--font-family-text); + padding: var(--space-xs) var(--space-md); + border-radius: var(--corner-radius); + border: 1px solid var(--border-color); + background: transparent; + color: var(--text-color-primary); + cursor: pointer; +} + + /* Fokusmarkering for tastaturnavigasjon (UU) */ + .logo:focus-visible, + .link:focus-visible, + .toggle:focus-visible, + .loginBtn:focus-visible { + outline: 2px solid var(--text-color-primary); + outline-offset: 2px; +} \ No newline at end of file diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx new file mode 100644 index 0000000..b7c6c9f --- /dev/null +++ b/src/components/navbar/Navbar.tsx @@ -0,0 +1,50 @@ +import React, { useState } from 'react'; +import { NavLink } from 'react-router-dom'; +import styles from './Navbar.module.css'; + +const LINKS = [ + { label: 'Search', path: '/' }, + { label: 'Calculator', path: '/calculator' }, + { label: 'Gymnasts', path: '/gymnasts' }, + { label: 'About', path: '/about' }, +]; + +export const Navbar: React.FC = () => { + const [isDark, setIsDark] = useState(false); + + const toggleTheme = () => { + setIsDark((prev) => !prev); + document.documentElement.setAttribute('data-theme', !isDark ? 'dark' : 'light'); + }; + + return ( +
+ WAG Planner + + +
+ ); +}; \ No newline at end of file From c8075060163759414b4393b356f3618b441fb4a1 Mon Sep 17 00:00:00 2001 From: xenia_grib Date: Tue, 20 Oct 2026 12:28:28 +0200 Subject: [PATCH 2/7] fix: update applicaton name to WAG CoP Planner --- src/components/navbar/Navbar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index b7c6c9f..b695dca 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -19,7 +19,7 @@ export const Navbar: React.FC = () => { return (
- WAG Planner + WAG CoP Planner