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

add responsiveness

Browse Source
This commit is contained in:
Laux Dev
2026-03-13 14:38:46 +08:00
parent 4478a74ece
commit f44258d134
28 changed files with 617 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/buttons/primarybutton/styles.module.css
View File

@@ -1,6 +1,6 @@
.button {
display: flex;
padding: 7px 15px;
padding: 8px 12px;
justify-content: center;
align-items: center;
gap: 10px;

22
frontend/src/app/components/icons/publish.jsx Normal file
View File

@@ -0,0 +1,22 @@
import React from "react";
const PublishIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M20 8L20 6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4L6 4C5.46957 4 4.96086 4.21072 4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6L4 8M17 14L12 9M12 9L7 14M12 9L12 21"
stroke="#D2D3E0"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default PublishIcon;

23
frontend/src/app/components/icons/viewLogs.jsx Normal file
View File

@@ -0,0 +1,23 @@
import React from "react";
const ViewLogsIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M14.5 4H17C17.7956 4 18.5587 4.31607 19.1213 4.87868C19.6839 5.44129 20 6.20435 20 7V17C20 17.7956 19.6839 18.5587 19.1213 19.1213C18.5587 19.6839 17.7956 20 17 20H7C6.20435 20 5.44129 19.6839 4.87868 19.1213C4.31607 18.5587 4 17.7956 4 17V12M6 5L4 7L6 9M10 9L12 7L10 5"
stroke="#D2D3E0"
style={{ stroke: "#D2D3E0", strokeOpacity: 1 }}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default ViewLogsIcon;

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

@@ -1,5 +1,5 @@
"use client";
import React from "react";
import React, { useState } from "react";
import styles from "./styles.module.css";
import { usePathname, useRouter } from "next/navigation";
@@ -15,6 +15,7 @@ import LogoIcon from "../icons/logo";
const Sidebar = () => {
const router = useRouter();
const [isCollapsed, setIsCollapsed] = useState(false);
const navToHome = () => {
router.push("/home");
};
@@ -40,15 +41,19 @@ const Sidebar = () => {
const pathname = usePathname();
console.log(pathname);
return (
<div className={styles.mainContainer}>
<div
className={`${styles.mainContainer} ${isCollapsed ? styles.collapsed : ""}`}
>
<div className={styles.topContainer}>
{/* Logo Container */}
<div className={styles.logoContainer}>
<div>
<div className={styles.logoIconContainer}>
<LogoIcon />
<LogoIcon onClick={() => setIsCollapsed(!isCollapsed)} />
</div>
<div className={styles.logoDescription}>
<div
className={`${styles.logoDescription} ${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
<p>Internal Developer Platform</p>
<p>By Project Moonshot Inc.</p>
</div>
@@ -61,49 +66,77 @@ const Sidebar = () => {
onClick={navToHome}
>
<HomeIcon />
<p>Home</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Home
</p>
</div>
<div
className={`${styles.nav} ${pathname.includes("/organization") ? styles.active : ""}`}
onClick={navToOrganization}
>
<OrganizationIcon />
<p>Organization</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Organization
</p>
</div>
<div
onClick={navToProject}
className={`${styles.nav} ${pathname.includes("/projects") ? styles.active : ""}`}
>
<ProjectIcon />
<p>Project</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Project
</p>
</div>
<div
onClick={navToUsers}
className={`${styles.nav} ${pathname.includes("/users") ? styles.active : ""}`}
>
<UserIcon />
<p>Users</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Users
</p>
</div>
<div
onClick={navToRoles}
className={`${styles.nav} ${pathname.includes("/roles") ? styles.active : ""}`}
>
<RolesIcon />
<p>Roles</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Roles
</p>
</div>
<div
onClick={navToCredentials}
className={`${styles.nav} ${pathname.includes("/credentials") ? styles.active : ""}`}
>
<CredentialsIcon />
<p>Credentials</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Credentials
</p>
</div>
<div
onClick={navToAgents}
className={`${styles.nav} ${pathname.includes("/agents") ? styles.active : ""}`}
>
<AgentIcon />
<p>Agents</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Agents
</p>
</div>
</div>
</div>
@@ -111,7 +144,11 @@ const Sidebar = () => {
<div className={styles.navFooterContainer}>
<div>
<div>
<p>Download ICTL v3</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Download ICTL v3
</p>
<DownloadIcon />
</div>
</div>

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

@@ -11,6 +11,7 @@
user-select: none;
border-right: 1px solid #2c2d3d;
background: #191a24;
transition: all 150ms;
}
.topContainer {
display: flex;
@@ -142,7 +143,7 @@
}
.navFooterContainer > div > div {
display: flex;
width: 186px;
width: 100%;
justify-content: space-between;
align-items: center;
flex: 1 0 0;
@@ -155,3 +156,28 @@
font-weight: 500;
line-height: normal;
}
.collapsed {
width: 80px;
}
.noDisplay {
display: none;
}
.blockDisplay {
display: block;
}
@media (max-width: 1050px) {
.mainContainer {
width: 80px;
}
.label {
display: none;
}
}
@media (max-width: 768px) {
.mainContainer {
display: none;
}
.label {
display: none;
}
}

18
frontend/src/app/components/topHeader/TopHeader.jsx
View File

@@ -21,6 +21,9 @@ import EditIcon from "../icons/edit";
import UpdateIcon from "../icons/update";
import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
import SearchBar from "../searchbar/SearchBar";
import ViewLogsIcon from "../icons/viewLogs";
import PublishIcon from "../icons/publish";
import useIsMobile from "@/app/hooks/useIsMobile";
const TopHeader = (props) => {
const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
@@ -32,6 +35,7 @@ const TopHeader = (props) => {
const handleNavigateToAdd = () => {
router.push(`${pathName}/add`);
};
const isMobile = useIsMobile();
return (
<>
{triggerAlert && (
@@ -83,7 +87,7 @@ const TopHeader = (props) => {
{props?.requiredButtons.includes("add") && (
<PrimaryButton
icon={<AddIcon />}
text={props?.buttonText}
text={isMobile ? "" : props?.buttonText}
onClick={handleNavigateToAdd}
/>
)}
@@ -167,6 +171,18 @@ const TopHeader = (props) => {
</div>
{triggerDropDownMenu && (
<div className={styles.dropDown}>
<div>
<div>
<ViewLogsIcon />
<p>View Logs</p>
</div>
</div>
<div>
<div>
<PublishIcon />
<p>Publish Service</p>
</div>
</div>
<div>
<div>
<OutlineDownloadIcon />

7
frontend/src/app/components/topHeader/styles.module.css
View File

@@ -35,9 +35,9 @@
.title > div:hover path {
stroke: white;
}
.title > p {
.title p {
color: #d2d3e1;
font-size: 24px;
font-size: var(--title-font-size);
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -120,7 +120,7 @@
flex-direction: column;
align-items: flex-start;
gap: 6px;
z-index: 2;
z-index: 11;
border-radius: 6px;
background: #2d3144;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
@@ -167,4 +167,5 @@
font-style: normal;
font-weight: 500;
line-height: normal;
z-index: 13;
}