Added CSS and changed header style.

src/assets/css/Header.css

@@ -0,0 +1,61 @@
+*{
+    box-sizing: border-box;
+}
+
+body{
+    margin: 0;
+}
+
+.site-title{
+    font-size: 4rem;
+
+}
+
+.header-nav{
+    border-left: #E4F2E7;
+    border-left-style: solid;
+    margin: 4rem;
+}
+.header{
+    background-color: #2D3E40;
+    color: #E4F2E7;
+    display: flex;
+    gap: 2rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+
+.site-title:hover{
+    color: #E4F2E7;
+}
+
+.header a{
+    color: #E4F2E7;
+    text-decoration: none;
+
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: .25rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+}
+
+.header-item:hover{
+    color: #2D3E40;
+    background-color: #E4F2E7;
+}
+
+.header ul{
+    padding-left: 1rem;
+    margin: 0;
+    list-style: none;
+    display: flex;
+    gap: 1rem;
+}
+
+.header li:active{
+    background-color: #E4F2E7;
+    color: #2D3E40;
+}

src/components/Header.tsx

@@ -1,4 +1,5 @@
 import useWindowDimensions from "../hooks/WindowDimensionsHook.tsx";
+import "../assets/css/Header.css"
 
 interface Props {
     user?: string
@@ -7,46 +8,24 @@ interface Props {
 export function Header({ user }: Props) {
     const {width, height} = useWindowDimensions();
     const aspect_ratio = (width == 0 ? 1 : width) / (height == 0 ? 1 : height);
-    const use_narrow = aspect_ratio < 1.3;
+    const use_narrow = aspect_ratio < 0.7;
 
-    return <header className="p-3 text-bg-dark">
-
-        <div className="container">
-            <div className="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+    return <header className="header">
 
                 {/*App Name reloads home page*/}
-                <div className="col-sm-auto" style={{marginRight:"20px"}}>
-                    <a href="/" className="d-flex align-items-center mb-2 mb-lg-0 text-white" style={{textDecoration: "none"}}>
-                        <h3 style={{marginBottom:"0", textAlign:"center"}}>{use_narrow ? "Narrow" : "Budget19"}</h3>
+                    <a href="/" className="site-title">
+                        <h3>{use_narrow ? "B-19" : "Budget-19"}</h3>
                     </a>
-                </div>
 
                 {/*Pages*/}
-                <ul className={"nav " + (use_narrow ? "me-3 " : "col-12 ") + "col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"}>
+                <ul className="header-nav">
 
                     {/*Links to dashboard with tiles*/}
-                    <li><a href="/dash" className="nav-link px-2 text-white">Dashboard</a></li>
+                    <li><a href="/dash" className="header-item">Dashboard</a></li>
 
                     {/*Links to transactions page with table of expenses*/}
-                    <li><a href="/transactions" className="nav-link px-2 text-white">Transactions</a></li>
+                    <li><a href="/transactions" className="header-item">Transactions</a></li>
 
                 </ul>
-
-                <div className="text-end">
-                    {user ?
-                        <>
-                            <label className="label fw-bold text-white" style={{marginRight: "10px"}}>{user}</label>
-                            <a href="/">
-                                <button type="button" className="btn btn-outline-light me-2">Logout</button>
-                            </a>
-                        </>
-                        :
-                        <a href="/user-test">
-                        <button type="button" className="btn btn-light me-2">Login</button>
-                        </a>
-                    }
-                </div>
-            </div>
-        </div>
     </header>;
 }