refindments in landing page (85b914c4) · Commits · OOP / code / portal

portal-gui/src/app/apis/[id]/apiPage.module.scss

+5 −2

Original line number	Diff line number	Diff line
		.container {
		padding: 2rem clamp(0.5rem, 10vw, 10rem);
		}

		.btnBox {
		display: flex;
		justify-content: flex-end;
		}

		.back {
		display: inline-block;
		font-size: 0.9rem;
		@@ -72,7 +74,8 @@

		p {
		line-height: 1.5rem;
		color: #333;
		color: var(--dark-grey);
		font-size: 14px;
		}
		}

portal-gui/src/app/apis/[id]/page.tsx

+1 −1

Original line number	Diff line number	Diff line
		@@ -46,7 +46,7 @@ export default async function ApiPage({ params }: ApiPageProps) {
		<div className={styles.functionalities}>
		{api.functionalities.map((func: string) => (
		<span key={func} className={styles.badge}>
		{func}
		{func.toLocaleUpperCase()}
		</span>
		))}
		</div>

portal-gui/src/app/components/TopBar/TopBar.tsx

+17 −20

Original line number	Diff line number	Diff line
		@@ -8,20 +8,13 @@ import { logoIcon, menuCloseIcon, menuIcon, userIcon } from "@/app/utils/icons";
		import { navLinks } from "@/app/utils/constants";
		import { formatName } from "@/app/utils/helpers";
		import { usePathname } from "next/navigation";
		import useOnClickOutside from "@/app/hooks/useOnClickOutside";

		const TopBar = () => {
		const router = useRouter();
		const [isMenuOpen, setMenuOpen] = useState(false);
		const pathname = usePathname();
		const MobileMenuRef: any = useRef(null);

		const user = { name: "Chnarakis Panagiotis", role: "Developer" }; // Example user object

		const toggleMenu = () => setMenuOpen((prev) => !prev);
		useOnClickOutside(MobileMenuRef, () => {
		setMenuOpen(false);
		});
		const renderNavLinks = () =>
		navLinks.map((link) => (
		<Nav.Item
		@@ -74,23 +67,27 @@ const TopBar = () => {
		</Nav.Menu>
		</Nav>
		)}
		<Button
		ref={MobileMenuRef}
		className={styles.menuBtn}
		onClick={toggleMenu}
		>
		{isMenuOpen ? menuCloseIcon : menuIcon}
		</Button>
		</div>

		{/* MOBILE MENU */}
		{isMenuOpen && (
		<div className={styles.mobileMenuContainer}>
		<Nav activeKey={pathname} className={styles.mobileNavLinks}>
		<Nav.Menu
		icon={
		<span className={styles.menuIconWrapper}>
		<span className={styles.menuIconDefault}>{menuIcon}</span>
		<span className={styles.menuIconActive}>
		{menuCloseIcon}
		</span>
		</span>
		}
		aria-label="Mobile navigation"
		noCaret
		placement="bottomEnd"
		>
		{renderNavLinks()}
		</Nav.Menu>
		</Nav>
		</div>
		)}
		</div>
		</header>
		</div>
		);

portal-gui/src/app/components/TopBar/topbar.module.scss

+165 −160

Original line number	Diff line number	Diff line
		/* ------------------------------------------------------------
		TOPBAR CONTAINER
		------------------------------------------------------------ */
		.container {
		top: 0;
		width: 100%;
		height: 100px;

		display: flex;
		justify-content: center;
		align-items: center;

		padding: 2rem clamp(0.5rem, 10vw, 10rem);
		width: 100%;

		background: var(--background-color);
		z-index: 3;
		color: var(--blue-text);
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
		border-radius: 0 0 12px 12px;

		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);

		z-index: 3;

		button {
		height: 100%;
		}

		/* ------------------------------------------------------------
		LOGO
		------------------------------------------------------------ */
		.logo {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: clamp(0.4rem, 1.2vw, 0.56rem);
		color: var(--text-color);
		gap: 0.4rem;

		font-size: clamp(0.4rem, 1.2vw, 0.56rem);
		color: var(--text-color);
		}

		/* ------------------------------------------------------------
		HEADER
		------------------------------------------------------------ */
		header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: max-content;
		width: 100%;
		height: 100%;
		min-width: 95%;
		max-width: 60%;
		}
		min-width: 95%;

		.menuBtn {
		border-radius: 10px;
		background: var(--main-gradient);
		display: flex;
		align-items: center;
		width: 50px;
		height: 50px;
		justify-content: center;
		flex-direction: column;
		transition: all 0.5s;

		svg {

		fill: #fff;
		}

		&:hover {
		background: linear-gradient(360deg, #FDB913 0%, #F15A22 100%);
		}
		}

		.mobileMenuContainer,
		.menuBtn {
		display: none;
		justify-content: space-between;
		}

		.mobileMenuContainer {
		position: absolute;
		border-radius: 10px;
		top: 85px;
		right: 30px;
		height: auto;
		background: var(--background-color);
		backdrop-filter: blur(5px);
		/* ------------------------------------------------------------
		NAV LINKS
		------------------------------------------------------------ */
		.navLinks {
		display: flex;
		align-items: center;
		padding: 1rem 2rem;
		font-size: 16px;
		justify-content: center;
		flex-direction: column;
		box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		transition: all 0.5s;
		border: none !important;
		flex-wrap: wrap;

		:global(.rs-nav-item) {
		position: relative;
		padding: 0 1.5rem 0 1rem;

		.mobileNavLinks {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 1rem;
		&:hover {
		color: var(--orange-color) !important;
		background: none !important;
		}

		:global(.rs-nav-item) {
		&::after {
		display: none !important;
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		width: 8px;
		height: 8px;
		transform: translateY(-50%);
		border-radius: 50%;
		background: var(--main-gradient);
		pointer-events: none;
		}
		}

		:global(.rs-nav-item[aria-selected="true"]:hover) {
		color: var(--blue-color) !important;
		cursor: default;
		:global(.rs-nav-item:last-child)::after {
		display: none;
		}

		:global(.rs-nav-item[aria-selected="true"]) {
		color: var(--blue-color) !important;
		cursor: default;
		}
		}

		&:hover {
		color: var(--blue-color) !important;
		}
		}

		.mobileContainer {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		}

		.mobileUserBtn {
		/* ------------------------------------------------------------
		USER BUTTON (DROPDOWN)
		------------------------------------------------------------ */
		.userBtn {
		:global(.rs-dropdown) {
		background: var(--background-color) !important;
		box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.1);

		&:hover {
		background: var(--rs-navs-bg-hover) !important;
		}

		:global(.rs-dropdown-menu) {
		min-width: 180px;
		right: 0 !important;
		margin-top: 10px !important;
		}

		.rs-dropdown-toggle .rs-nav-item {
		padding: 0.5rem 0.7rem !important;
		width: max-content;
		height: max-content;
		padding: 0.5rem 0.7rem !important;

		}



		}

		svg {
		margin: 0;
		}

		/* ------------------------------------------------------------
		MOBILE CONTAINER
		------------------------------------------------------------ */
		.mobileContainer {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		}

		.mobileUserBtn {
		/* ------------------------------------------------------------
		MOBILE MENU ICON & DROPDOWN
		------------------------------------------------------------ */
		.mobileMenuContainer {
		display: none;
		}
		width: 50px;
		height: 50px;

		.navLinks {
		flex-wrap: wrap;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		:global(.rs-nav-item) {
		position: relative;
		padding: 0 1.5rem 0 1rem;
		border: none !important;
		border-radius: 10px;
		background: var(--main-gradient);

		box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.1);
		transition: all 0.4s ease;

		&:hover {
		color: var(--orange-color) !important;
		background: none !important;
		svg {
		fill: #fff;
		margin: 0 !important;
		}

		&::after {
		content: "";
		position: absolute;
		background: var(--main-gradient);
		height: 8px;
		width: 8px;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		border-radius: 50%;
		pointer-events: none;
		}
		&:hover {
		background: linear-gradient(360deg, #FDB913 0%, #F15A22 100%);
		}

		:global(.rs-nav-item:last-child)::after {
		content: none;
		}
		/* RSuite dropdown override */
		:global(.rs-dropdown .rs-dropdown-menu) {
		right: 0 !important;
		min-width: 200px !important;
		margin-top: 10px !important;

		:global(.rs-nav-item[aria-selected="true"]:hover) {
		color: var(--blue-color) !important;
		cursor: default;
		}

		:global(.rs-nav-item[aria-selected="true"]) {
		color: var(--blue-color) !important;
		cursor: default;
		}
		/* Remove toggle padding */
		:global(.rs-nav .rs-dropdown > .rs-dropdown-toggle) {
		padding: 0.6rem !important;
		height: max-content !important;
		}

		/* Mobile nav links */
		.mobileNavLinks {
		display: flex;
		flex-direction: column;
		width: 100%;

		.userBtn {
		:global(.rs-dropdown) {
		background: var(--background-color) !important;
		box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		gap: 1rem;

		&:hover {
		background: var(--rs-navs-bg-hover) !important;
		:global(.rs-nav-item) {
		&::after {
		display: none !important;
		}

		.rs-dropdown-toggle .rs-nav-item {
		width: max-content;
		height: max-content;
		padding: 0.5rem 0.7rem !important;

		}

		:global(.rs-nav-item[aria-selected="true"]) {
		color: var(--blue-color) !important;

		&:hover {
		color: var(--blue-color) !important;
		}
		}
		}

		/* Menu icon swap */
		.menuIconWrapper {
		position: relative;
		display: inline-flex;


		span {
		display: inline-flex;
		transition: opacity 0.2s ease;
		}

		.username {
		@media (max-width: 600px) {
		display: none;
		.menuIconActive {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		}
		}

		:global(.rs-dropdown-open) {
		.menuIconDefault {
		opacity: 0;
		}

		.menuIconActive {
		opacity: 1;
		}
		}

		//------------------------- Responsive -------------------------//

		@media screen and (max-width: 1025px) {
		padding: 1rem 2rem;


		:global(.rs-nav-item-icon) {
		margin: 0 !important;
		}
		}

		/* ------------------------------------------------------------
		RESPONSIVE
		------------------------------------------------------------ */
		@media (max-width: 1025px) {
		.navLinks {
		display: none !important;
		}

		.mobileMenuContainer,
		.menuBtn {
		.mobileMenuContainer {
		display: flex !important;


		}
		}
		}

		/* ------------------------------------------------------------
		USERNAME HIDE ON MOBILE
		------------------------------------------------------------ */
		.username {
		@media (max-width: 600px) {
		display: none;
		}
		}




		@media screen and (max-width:768px) {
		/* ------------------------------------------------------------
		MOBILE BREAKPOINT STYLES
		------------------------------------------------------------ */
		@media (max-width: 768px) {
		.userBtn {
		svg {
		margin: 0;
		}
		}

		}

		@media screen and (max-width:426px) {
		@media (max-width: 426px) {
		.logo {
		svg {

		transform: scale(0.90) !important;
		transform: scale(0.9) !important;
		}
		}

		.mobileContainer {
		transform: scale(0.90) !important;

		transform: scale(0.9) !important;
		}


		}

		@media screen and (max-width:380px) {
		@media (max-width: 380px) {
		.logo {
		width: 130px;

		svg {

		transform: scale(0.80) !important;
		transform: scale(0.9) !important;
		}
		}


		}
		No newline at end of file

portal-gui/src/app/styles/globals.css

+2 −1

Original line number	Diff line number	Diff line
		@@ -100,7 +100,7 @@ body {
		font-family: "Montserrat", sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;

		width: 100%;
		&::-webkit-scrollbar {
		width: 10px;
		height: 10px;
		@@ -313,4 +313,5 @@ select:-webkit-autofill:focus {
		}

		@media screen and (max-width: 425px) {
		main{ max-width: 100%;}
		}