rankrunners-dev/next-cochise
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: header nav all style

Browse Source
This commit is contained in:
RizqiSyahrendra 2025-03-12 15:26:50 +07:00
parent 1b686cd912
commit a863466b94
8 changed files with 37 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/assets/css/bootstrap.min.css vendored
View File

@ -47,8 +47,9 @@
--bs-black-rgb: 0, 0, 0;
--bs-body-color-rgb: 33, 37, 41;
--bs-body-bg-rgb: 255, 255, 255;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
"Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-sans-serif:
system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
@ -70,7 +71,6 @@
}
body {
margin: 0;
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
line-height: var(--bs-body-line-height);
@ -172,10 +172,7 @@ address {
font-style: normal;
line-height: inherit;
}
ol,
ul {
padding-left: 2rem;
}
dl,
ol,
ul {
@ -2535,7 +2532,8 @@ textarea.form-control.is-valid {
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
padding-right: 4.125rem;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),
background-image:
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-position:
right 0.75rem center,
@ -2634,7 +2632,8 @@ textarea.form-control.is-invalid {
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
padding-right: 4.125rem;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),
background-image:
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-position:
right 0.75rem center,

3
public/assets/css/demo-slick/demo-slick.css
View File

@ -1,6 +1,4 @@
.theme-slick {
--font-global: "Plus Jakarta Sans", sans-serif;
--font-alt: "Plus Jakarta Sans", sans-serif;
--section-padding-y: 50px;
--color-teal-1: #64b3b4;
--color-dark-1: #1e2432;
@ -75,7 +73,6 @@
--box-shadow-block: 0px 10px 30px 0px rgba(30, 36, 50, 0.07), 0px 0px 1px 0px rgba(30, 36, 50, 0.1);
--box-shadow-block-strong: 0px 15px 50px 0px rgba(30, 36, 50, 0.14), 0px 0px 1px 0px rgba(30, 36, 50, 0.15);
color: var(--color-dark-1);
font-family: var(--font-global);
font-size: 17px;
font-weight: 400;
line-height: 1.725;

2
public/assets/css/style.css
View File

@ -746,7 +746,6 @@ video {
body {
color: var(--color-dark-1);
font-family: var(--font-global);
font-size: 18px;
font-weight: 400;
letter-spacing: normal;
@ -3835,7 +3834,6 @@ a.logo:hover {
.inner-nav ul {
margin: auto;
font-size: 17px;
font-weight: 500;
text-align: center;
letter-spacing: 0;
line-height: 1.3;

21
src/app/(main)/layout.tsx
View File

@ -8,14 +8,27 @@ import { getDefaultMetadata } from "@/utils/metadata";
import "@public/assets/css/styles.css";
import "jarallax/dist/jarallax.min.css";
import { Metadata } from "next";
import { Roboto } from "next/font/google";
import { Roboto, Noto_Sans } from "next/font/google";
import "photoswipe/dist/photoswipe.css";
import "react-modal-video/css/modal-video.css";
import "swiper/css";
import "swiper/css/effect-fade";
import "tippy.js/dist/tippy.css";
const roboto = Roboto({ subsets: ["latin"] });
const roboto = Roboto({
weight: ["400", "500", "600", "700", "800"],
style: ["normal", "italic"],
subsets: ["latin"],
display: "swap",
variable: "--font-roboto",
});
const notoSans = Noto_Sans({
weight: ["400", "500", "600"],
style: ["normal", "italic"],
subsets: ["latin"],
display: "swap",
variable: "--font-noto-sans",
});
export async function generateMetadata(): Promise<Metadata> {
const metadata = await getDefaultMetadata();
@ -28,9 +41,9 @@ export default function MainLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en" className={`no-mobile no-touch ${roboto.className}`}>
<html lang="en" className={`no-mobile no-touch ${roboto.variable} ${notoSans.variable}`}>
<InitialScript />
<body className="appear-animate body">
<body className="appear-animate body font-fontMain">
<div className="theme-slick">
<div className="page" id="top">
<Header links={navMenuData} />

1
src/app/globals.css
View File

@ -33,7 +33,6 @@
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}
@layer components {

8
src/components/Header.tsx
View File

@ -11,8 +11,8 @@ const shareIcons: Record<string, any> = {
phone: {
link: "tel:+15208036644",
dom: (
<span className="social-nav flex gap-1 text-2xl lg:text-white">
<Image src="/assets/icons/phone.png" alt="Phone" width={32} height={22} />
<span className="social-nav flex text-2xl text-white space-x-3 lg:space-x-1">
<Image src="/assets/icons/phone.png" alt="Phone" width={30} height={25} />
<b className="text-[17px]">(520) 803-6644</b>
</span>
),
@ -20,7 +20,7 @@ const shareIcons: Record<string, any> = {
facebook: {
link: "https://www.facebook.com/p/Cochise-Oncology-61556262839823",
dom: (
<span className="social-nav flex gap-3 text-2xl lg:text-white">
<span className="social-nav flex text-2xl text-white space-x-3 lg:space-x-1">
<FaFacebook size={25} />
<b className="text-[17px] lg:hidden">Facebook</b>
</span>
@ -29,7 +29,7 @@ const shareIcons: Record<string, any> = {
linkedin: {
link: "https://linkedin.com/company/cochise-oncology",
dom: (
<span className="social-nav flex gap-3 text-2xl lg:text-white">
<span className="social-nav flex text-2xl text-white space-x-3 lg:space-x-1">
<FaLinkedin size={25} />
<b className="text-[17px] lg:hidden">Linkedin</b>
</span>

8
src/components/HeaderNav.tsx
View File

@ -71,7 +71,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
{link.text} <FaCaretDown className="ml-2" />
</Link>
<ul
className={`mn-sub to-right mt-2 ${isDropdownOpen.includes(link.text) && "open"} !bg-extColorPrimary8 ${hoveredNavItem.includes(`${index}`) ? "lg:visible lg:opacity-100 lg:z-10" : "lg:invisible lg:opacity-0"} !transition-all !duration-300 lg:shadow-nav`}
className={`font-fontSecondary mn-sub to-right mt-2 ${isDropdownOpen.includes(link.text) && "open"} !bg-extColorPrimary8 ${hoveredNavItem.includes(`${index}`) ? "lg:visible lg:opacity-100 lg:z-10" : "lg:invisible lg:opacity-0"} !transition-all !duration-300 lg:shadow-nav`}
ref={dropdownRef}
>
{link.child.map((subLink: any, subLinkIdx: number) => (
@ -84,7 +84,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
<Link
href={subLink?.href}
onClick={() => toggleMobileMenu()}
className="!text-[14px] !text-white hover:!text-extColorPrimary3 !transition-all !duration-500"
className="!text-[14px] !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 !transition-all !duration-500"
>
{subLink?.text}
</Link>
@ -93,7 +93,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
<>
<Link
href={subLink?.href ?? "#"}
className="mn-has-sub !flex !justify-between !items-center !text-white hover:!text-extColorPrimary3 transition-all duration-500"
className="mn-has-sub !flex !justify-between !items-center !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 transition-all duration-500"
onClick={() => setIsSubDropdownOpen(`${index}-${subLinkIdx}`)}
>
<span className="!text-[14px]">{subLink.text}</span>
@ -107,7 +107,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
<li key={subLinkIdx2}>
<Link
href={subLink2?.href}
className="!text-[14px] !items-center !text-white hover:!text-extColorPrimary3 transition-all duration-500"
className="!text-[14px] !items-center !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 transition-all duration-500"
onClick={() => toggleMobileMenu()}
>
{subLink2?.text}

4
tailwind.config.ts
View File

@ -8,6 +8,10 @@ export default {
],
theme: {
extend: {
fontFamily: {
fontMain: ["var(--font-noto-sans)"],
fontSecondary: ["var(--font-roboto)"],
},
colors: {
background: "var(--background)",
foreground: "var(--foreground)",