Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Topbar Header every page

Browse Source
This commit is contained in:
Laux Dev
2026-02-24 13:25:40 +08:00
parent a6ae45d9cf
commit 27aef888de
21 changed files with 2512 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/app/agents/page.jsx
View File

@@ -1,7 +1,17 @@
import React from "react";
import styles from "./styles.module.css";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
const AgentsPage = () => {
return <div></div>;
return (
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader buttonText="Add Agents" topbarTitle="Agents" />
</div>
</div>
</div>
);
};
export default AgentsPage;

14
frontend/src/app/components/sidebar/Sidebar.jsx
View File

@@ -91,7 +91,7 @@ const Sidebar = () => {
{/* Navigations */}
<div className={styles.navContainer}>
<div
className={pathname === "/home" ? `${styles.active}` : ""}
className={`${styles.nav} ${pathname === "/home" ? styles.active : ""}`}
onClick={navToHome}
>
<svg
@@ -126,7 +126,7 @@ const Sidebar = () => {
<p>Home</p>
</div>
<div
className={pathname === "/organization" ? `${styles.active}` : ""}
className={`${styles.nav} ${pathname === "/organization" ? styles.active : ""}`}
onClick={navToOrganization}
>
<svg
@@ -147,8 +147,8 @@ const Sidebar = () => {
<p>Organization</p>
</div>
<div
className={pathname === "/projects" ? `${styles.active}` : ""}
onClick={navToProject}
className={`${styles.nav} ${pathname === "/projects" ? styles.active : ""}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -168,8 +168,8 @@ const Sidebar = () => {
<p>Project</p>
</div>
<div
className={pathname === "/users" ? `${styles.active}` : ""}
onClick={navToUsers}
className={`${styles.nav} ${pathname === "/users" ? styles.active : ""}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -189,8 +189,8 @@ const Sidebar = () => {
<p>Users</p>
</div>
<div
className={pathname === "/roles" ? `${styles.active}` : ""}
onClick={navToRoles}
className={`${styles.nav} ${pathname === "/roles" ? styles.active : ""}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -239,8 +239,8 @@ const Sidebar = () => {
<p>Roles</p>
</div>
<div
className={pathname === "/credentials" ? `${styles.active}` : ""}
onClick={navToCredentials}
className={`${styles.nav} ${pathname === "/credentials" ? styles.active : ""}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -260,8 +260,8 @@ const Sidebar = () => {
<p>Credentials</p>
</div>
<div
className={pathname === "/agents" ? `${styles.active}` : ""}
onClick={navToAgents}
className={`${styles.nav} ${pathname === "/agents" ? styles.active : ""}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"

21
frontend/src/app/components/sidebar/styles.module.css
View File

@@ -79,7 +79,7 @@
align-items: flex-start;
align-self: stretch;
}
.navContainer > div {
.nav {
display: flex;
padding: 16px 24px;
align-items: center;
@@ -90,22 +90,16 @@
font-style: normal;
font-weight: 400;
line-height: normal;
border-left: 2px solid #959aff00;
align-self: stretch;
}
.navContainer > div:hover {
.nav:hover {
background: rgba(149, 154, 255, 0.05);
}
.navContainer > div path {
.nav path {
stroke: #858699;
}
.navContainer > div:hover path {
stroke: #d2d3e0;
}
.navContainer > div path {
stroke: #858699;
}
.navContainer > div:hover path {
.nav:hover path {
stroke: #d2d3e0;
}
.active {
@@ -118,7 +112,10 @@
font-weight: 400;
line-height: normal;
}
.active svg path {
.active:hover path {
stroke: #969af9;
}
.active path {
stroke: #969af9;
}
.navFooterContainer {

59
frontend/src/app/components/topHeader/TopHeader.jsx Normal file
View File

@@ -0,0 +1,59 @@
import React from "react";
import styles from "./styles.module.css";
const TopHeader = (props) => {
return (
<div className={styles.container}>
<div className={styles.title}>
<p>{props.topbarTitle}</p>
</div>
<div className={styles.actionBar}>
<div className={styles.searchBarContainer}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path
d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
stroke="#858699"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<div className={styles.button}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path
d="M10 4.41016V15.5907"
stroke="currentColor"
strokeOpacity={1}
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.41016 10H15.5907"
stroke="currentColor"
strokeOpacity={1}
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>{props.buttonText}</p>
</div>
</div>
</div>
);
};
export default TopHeader;

48
frontend/src/app/components/topHeader/styles.module.css Normal file
View File

@@ -0,0 +1,48 @@
.container {
display: flex;
padding: 24px;
justify-content: space-between;
align-items: center;
align-self: stretch;
background: #21232f;
}
.title {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.title > p {
color: #d2d3e1;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.actionBar {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
}
.searchBarContainer {
display: flex;
padding: 6px;
justify-content: flex-end;
align-items: center;
gap: 10px;
}
.button {
display: flex;
padding: 8px 12px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 6px;
border: 0.5px solid #8187ff;
background: rgba(83, 89, 242, 0.25);
cursor: pointer;
}
.button:hover {
background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
}

13
frontend/src/app/credentials/page.jsx
View File

@@ -1,7 +1,16 @@
import React from "react";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
const CredentialsPage = () => {
return <div></div>;
return (
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader buttonText="Add Credentials" topbarTitle="Credentials" />
</div>
</div>
</div>
);
};
export default CredentialsPage;

27
frontend/src/app/globalStyle.module.css Normal file
View File

@@ -0,0 +1,27 @@
.section {
width: 100%;
}
.mainContainer {
display: flex;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
background: #191a24;
width: 100%;
}
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
background: #191a24;
}
.topHeader {
display: flex;
padding: 24px;
justify-content: space-between;
align-items: center;
align-self: stretch;
background: #21232f;
}

1
frontend/src/app/globals.css
View File

@@ -22,6 +22,7 @@ body {
font-family: inter, Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
user-select: none;
}
* {

10
frontend/src/app/organization/page.jsx
View File

@@ -1,11 +1,15 @@
import React from "react";
import styles from "./styles.module.css";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
const OrganizationPage = () => {
return (
<div>
<div className={styles.mainContainer}>
<div></div>
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader buttonText="Add Organization" topbarTitle="Organization" />
</div>
</div>
</div>
);

13
frontend/src/app/projects/page.jsx
View File

@@ -1,7 +1,16 @@
import React from "react";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
const ProjectsPage = () => {
return <div></div>;
return (
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader buttonText="Create Project" topbarTitle="Project" />
</div>
</div>
</div>
);
};
export default ProjectsPage;

13
frontend/src/app/roles/page.jsx
View File

@@ -1,7 +1,16 @@
import React from "react";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
const RolesPage = () => {
return <div></div>;
return (
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader buttonText="Add Role" topbarTitle="Roles" />
</div>
</div>
</div>
);
};
export default RolesPage;

13
frontend/src/app/users/page.jsx
View File

@@ -1,7 +1,16 @@
import React from "react";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
const UsersPage = () => {
return <div></div>;
return (
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader buttonText="Add User" topbarTitle="Users" />
</div>
</div>
</div>
);
};
export default UsersPage;