Update Components

src/components/PortfolioHeader.tsx

@@ -9,11 +9,18 @@ import { LinguiLocaleChangeForm } from "./wrappers/LinguiJSWrappers";
 export default function PortfolioHeader(){
   return(
     <Header sx={{
-      paddingBottom: 2,
-      bg: "header.default"
+      position: 'sticky',
+      top: 0,
+      height: 64,
+      placeItems: 'center',
+      backgroundColor: 'canvas.subtle',
+      borderBottom: '1px solid',
+      borderColor: 'border.default',
+      zIndex: 1,
+      color: 'fg.default'
     }}>
-      <Header.Item full sx={{ textShadow: "shadow.medium" }}>
-        <Header.Link href='#'>A/O</Header.Link>
+      <Header.Item full sx={{ textShadow: "shadow.medium"}}>
+        <Header.Link href='#' sx={{color: "fg.default"}}>A/O</Header.Link>
       </Header.Item>
       <Header.Item sx={{ mr: 0 }}>
         <Header.Item sx={{ mr: 2 }}>

src/components/phoneComponents/PhoneComponent.tsx

@@ -0,0 +1,22 @@
+import { Box, PageLayout } from "@primer/react";
+import PortfolioHeader from '../PortfolioHeader';
+
+export default function PhoneComponent(){
+  return(
+    <PageLayout columnGap="condensed" sx={{
+      border: "1px solid",
+      borderColor: "cyan",
+      minHeight: "80vh",
+      minWidth: "100%"
+    }}>
+      <PageLayout.Header sx={{
+        border: "1px solid",
+        borderColor: "border.default"
+      }}>
+        <Box>
+          Test Header
+        </Box>
+      </PageLayout.Header>
+    </PageLayout>
+  )
+}

src/components/wrappers/DevDebugWrappers.tsx

@@ -0,0 +1,32 @@
+// NextJS Imports
+import { Box } from "@primer/react";
+import { Children } from "react";
+
+export default function DevDebugComponents({
+  children
+}: {
+  children: any
+}){
+
+  console.log(`[DEBUG]: ${Children.count(children)}`);
+
+  function getRandomColor() {
+    var letters = '0123456789ABCDEF';
+    var color = '#';
+    for (var i = 0; i < 6; i++) {
+      color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+  }
+
+  return(
+    <Box sx={{
+      borderColor: `${getRandomColor()}`,
+    }}>
+      {children &&
+        <DevDebugComponents>
+        children
+        </DevDebugComponents>}
+    </Box>
+  )
+}

src/components/wrappers/LinguiJSWrappers.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 // NextJS
 import { FormControl, Select, Box } from "@primer/react";
 import { dynamicLoadNActivateLocale } from "@/headers/i18n";