diff --git a/src/App.tsx b/src/App.tsx index 3dd7453..80f2e51 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,8 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +// Import global CSS reset first +import './index.css'; + import Login from './pages/Login'; import Register from './pages/Register'; diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css index f69c064..b88cd57 100644 --- a/src/components/Sidebar/Sidebar.module.css +++ b/src/components/Sidebar/Sidebar.module.css @@ -5,15 +5,18 @@ background: var(--color-bg); box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10); width: 240px; - flex-shrink: 0; margin-top: 51px; margin-left: 49px; padding-bottom: 1px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; } .sidebar { display: flex; - width: 200px; + width: 240px; flex-direction: column; align-items: flex-start; flex-shrink: 0; diff --git a/src/components/Sidebar/SidebarData.tsx b/src/components/Sidebar/SidebarData.tsx index 53c3f5e..0f279d1 100644 --- a/src/components/Sidebar/SidebarData.tsx +++ b/src/components/Sidebar/SidebarData.tsx @@ -50,7 +50,7 @@ const useSidebarData = () => { { id: '7', name: 'Settings', - link: 'einstellungen', + link: '/einstellungen', icon: GoGear, }, { diff --git a/src/components/Sidebar/SidebarUser.module.css b/src/components/Sidebar/SidebarUser.module.css index 6e8cc22..e6e9e41 100644 --- a/src/components/Sidebar/SidebarUser.module.css +++ b/src/components/Sidebar/SidebarUser.module.css @@ -1,6 +1,6 @@ .user_section { display: flex; - width: 200px; + width: 240px; height: auto; min-height: 100px; padding: 20px; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..34d6aee --- /dev/null +++ b/src/index.css @@ -0,0 +1,18 @@ +/* Global CSS Reset */ +* { + box-sizing: border-box; +} + +html, body { + margin: 0; + padding: 0; + height: 100%; + overflow: hidden; +} + +#root { + height: 100vh; + width: 100vw; + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/src/pages/Home.module.css b/src/pages/Home.module.css index 7fef3c5..10d4319 100644 --- a/src/pages/Home.module.css +++ b/src/pages/Home.module.css @@ -1,14 +1,13 @@ .homeContainer { position: relative; background-color: var(--color-surface); - min-height: calc(100vh - 15px); - max-height: calc(100vh - 15px); - width: 100%; + min-height: 100vh; + max-height: 100vh; + width: 100vw; font-family: var(--font-family); z-index: 0; overflow: hidden; - padding: 0 49px 0 36px; - width: calc(100% - 49px - 36px); + padding: 0 49px 0 0; } .homeContainer::before { @@ -34,4 +33,5 @@ .body { display: flex; max-width: 100vw; + height: 100vh; } \ No newline at end of file