update

integr-dev · integr-dev · commit 793c279b4953 · 2025-06-10T11:09:51.000+02:00
diff --git a/src/App.css b/src/App.css
@@ -142,7 +142,7 @@ footer {
     position: fixed;
     height: 2px;
     width: 100%;
-    top: 3.8rem;
+    top: 4.355rem;
     transform-origin: 0 50%;
     z-index: 20;
     animation: scaleProgress auto linear;
@@ -155,7 +155,7 @@ footer {
     position: fixed;
     height: 5px;
     width: 100%;
-    top: 3.745rem;
+    top: 4.25rem;
     transform-origin: 0 50%;
     z-index: 15;
     animation: scaleProgress auto linear;
diff --git a/src/assets/NavBar.tsx b/src/assets/NavBar.tsx
@@ -1,18 +1,21 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
     faBars,
     faBook, faBoxesStacked, faClock,
     faCode, faFolder,
     faMagnifyingGlass,
     faPalette
 } from "@fortawesome/free-solid-svg-icons";
-import {faGithub} from "@fortawesome/free-brands-svg-icons";
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
 
 export interface Props {
     searchCallback: (search: string) => void
 }
 
 export default function NavBar(props: Props) {
+    const [searchFocused, setSearchFocused] = useState(false);
+
     const onThemeChange = () => {
         const theme = (document.querySelector('input[name="theme-dropdown"]:checked')! as HTMLInputElement).value;
         localStorage.setItem('theme', JSON.stringify(theme));
@@ -43,11 +46,10 @@ export default function NavBar(props: Props) {
         }
     }
 
-
     return (
         <>
             <div>
-                <div className="navbar bg-base-100 fixed z-10 border-b-2 border-b-base-300 h-14" id="navbar_anchor">
+                <div className="navbar bg-base-100 fixed z-10 border-b-2 border-b-base-300 h-[4.5rem]" id="navbar_anchor">
                     <div className="navbar-start">
                         <div className="dropdown">
                             <div tabIndex={0} role="button" className="btn btn-ghost btn-circle">
@@ -118,10 +120,19 @@ export default function NavBar(props: Props) {
                         </div>
                     </div>
                     <div className="navbar-center">
-                        <label className="cursor-text input input-bordered hidden items-center gap-2 lg:w-96 lg:flex">
+                        <label
+                            className={`cursor-text input input-bordered hidden items-center gap-2 lg:w-96 lg:flex${searchFocused ? " input-primary" : ""}`}
+                        >
                             <FontAwesomeIcon icon={faMagnifyingGlass}/>
-                            <input type="text" className="grow" id="search_bar" placeholder="Search"
-                                   onKeyUp={() => props.searchCallback((document.getElementById("search_bar")! as HTMLInputElement).value)}/>
+                            <input
+                                type="text"
+                                className="grow"
+                                id="search_bar"
+                                placeholder="Search"
+                                onKeyUp={() => props.searchCallback((document.getElementById("search_bar")! as HTMLInputElement).value)}
+                                onFocus={() => setSearchFocused(true)}
+                                onBlur={() => setSearchFocused(false)}
+                            />
                             <kbd className="kbd kbd-sm select-none cursor-text">ctrl</kbd>
                             <kbd className="kbd kbd-sm select-none cursor-text">k</kbd>
                         </label>
