feat: added sticky header

- added frosted glass styling
- sticky header
- fixed margin-auto issue

GUI/ETVR/src/components/header/index.tsx

@@ -8,14 +8,14 @@ interface Iprops {
 
 export default function Header(props: Iprops) {
     return (
-        <header>
-            <div class="flex flex-grow justify-between items-center mt-[1rem]">
+        <header class='pr-4 pl-4 grow content-center'>
+            <div class="flex grow justify-between items-center mt-[1rem]">
                 <div>
                     <Logo />
                 </div>
                 <div class="flex h-[55%] content-center items-center mt-[5px]">
-                    <div class="flex flex-grow justify-center border-none shadow-lg content-center leading-5 font-sans font-medium text-[.75rem] rounded-[15px] h-[100%] w-[100%] bg-[#0e0e0e] text-[#5f5f5f]">
-                        <div class="flex flex-grow content-center justify-between h-[100%] leading-5 font-sans font-medium rounded-[14px] p-[5px] bg-[#0e0e0e] w-[145px]">
+                    <div class="flex grow justify-center border-none shadow-lg content-center leading-5 font-sans font-medium text-[.75rem] rounded-[15px] h-[100%] w-[100%] bg-[#0e0e0e] text-[#5f5f5f]">
+                        <div class="flex grow content-center justify-between h-[100%] leading-5 font-sans font-medium rounded-[14px] p-[5px] bg-[#0e0e0e] w-[145px]">
                             <CustomPopover
                                 icon={icons.cameraSolid}
                                 popoverContent="Tracker manager"

GUI/ETVR/src/routes/Routes.tsx

@@ -17,8 +17,12 @@ const AppRoutes = () => {
     })
 
     return (
-        <main class="pb-[5rem] w-[100%] m-auto  px-8 max-w-[1920px]" style={{ margin: 'auto' }}>
-            <Header name={connectedUserName() ? `Welcome ${connectedUserName()}` : 'Welcome!'} />
+        <main class="pb-[5rem] w-[100%] px-8 max-w-[1920px]">
+            <div class="header-wrapper">
+                <Header
+                    name={connectedUserName() ? `Welcome ${connectedUserName()}` : 'Welcome!'}
+                />
+            </div>
             <Path />
         </main>
     )

GUI/ETVR/src/styles/header-wrapper.css

@@ -0,0 +1,24 @@
+.header-wrapper {
+    /* @apply --layout-horizontal; */
+    height: 100px;
+    width: 100%;
+    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
+    background-color: rgba(32, 34, 44, .15);
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+    backdrop-filter: blur(10px);
+    user-select: none;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    flex-grow: 1;
+    flex-direction: row;
+    justify-content: space-between;
+    position: fixed;
+    top: calc(titlebar - 35px);
+    left: 0;
+    right: 0;
+    z-index: 1;
+    overflow: hidden;
+    padding-bottom: 15px;
+}

GUI/ETVR/src/styles/imports.css

@@ -14,4 +14,5 @@
 /* Custom Imports */
 @import 'index.css';
 @import 'titlebar.css';
+@import 'header-wrapper.css';
 @import 'scrollbar.css';