PNSPS-frontend-MaterialUI/src/assets/style/navbarStyles.css

/* assets/style/navbarStyles.css */

/* ===== FIX typo ===== */
#nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0,0,0,0.06); /* <-- fixed */
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 9999;
  border-bottom: 3px solid #1976d2;
  min-height: 77px;
}

#navbar > div > li {
  height: 77px;              /* one single source of truth */
  display: flex;
  align-items: stretch;
  padding: 0;                /* IMPORTANT: stop li padding making different widths */
  margin: 0;
}

#navbar div li{
  padding: 0;   /* override your earlier padding: 0 1vw */
}

/* Make dropdown button identical to anchor */
#navbar > div > li > button.navTrigger {
  background: transparent;
  border: 0;
  padding: 0;              /* remove default button padding */
  margin: 0;
  font: inherit;           /* inherit font from li */
  line-height: 1;          /* normalize */
  height: auto;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* Make both anchor and button same vertical box */
#navbar > div > li > a,
#navbar > div > li > button.navTrigger {
  height: 100% !important;     /* override the old 72px */
  padding: 0 24px !important;  /* bigger hit area */
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* Submenu triggers: same font as app (Noto Sans), bold */
#navbar > div > li > button.navTrigger,
#navbar > div > li > button.navTrigger .MuiTypography-root {
  font-weight: 600 !important;
  font-family: "Noto Sans HK", "Noto Sans SC", sans-serif !important;
  font-size: 1.1rem !important;
}

/* Keep links bold */
#navbar > div > li > a,
#navbar > div > li > a .MuiTypography-root {
  font-weight: 600;
}

#navbar div{
  display: flex;
  align-items: center;
  justify-content: center;
}

#navbar div li{
  list-style: none;
  padding: 0 1vw;
  position: relative;
}

/* keep your <a> styling */
#navbar div li a{
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  color: black;
  transition: 0.3s ease-in-out;
}

/* Dropdown trigger buttons: Noto Sans, bold */
#navbar div li button.navTrigger{
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;

  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: "Noto Sans HK", "Noto Sans SC", sans-serif;
  color: black;
  transition: 0.3s ease-in-out;

  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

#navbar div li a span,
#navbar div li a svg{
  font-size: 1vw !important;
}

#navbar div li a:hover,
#navbar div li button.navTrigger:hover{
  color: #1976d2;
}

#navbar div li a:hover::after,
#navbar div li a:focus-visible::after,
#navbar div li button.navTrigger:hover::after,
#navbar div li button.navTrigger:focus-visible::after{
  content: "";
  width: 80%;
  height: 3px;
  background:#1976d2;
  position: absolute;
  bottom: -5px;
  left: 20px;
}

/* submenu base */
#navbar div li ul{
  background: white;
  visibility: hidden;
  opacity: 0;
  min-width: 18rem;
  position: absolute;
  left: 0;
  display: none;
  padding-left: 0px;
  padding-bottom: 7px;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 0.25rem;
}

/* hover open */
#navbar div li:hover > ul{
  visibility: visible;
  opacity: 1;
  display: block;
}

/* keyboard open */
#navbar div li:focus-within > ul{
  visibility: visible;
  opacity: 1;
  display: block;
}

/* Navbar focus ring */
#navbar a:focus,
#navbar button.navTrigger:focus{
  outline: none;
}

#navbar a:focus-visible,
#navbar button.navTrigger:focus-visible{
  outline: 3px solid #1976d2;
  outline-offset: 2px;
  border-radius: 10px;
}

/* Top-level links (Dashboard, Application, Proof, Logout, etc.) */
#navbar a.dashboard,
#navbar a.application,
#navbar a.proof,
#navbar a.myDocumet,
#navbar a.documentRecord,
#navbar a.manageOrgUser,
#navbar a.manageUser,
#navbar a.systemSetting,
#navbar a.report,
#navbar a.payment,
#navbar a.user,
#navbar a.logout {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

#navbar a.dashboard .MuiTypography-root,
#navbar a.application .MuiTypography-root,
#navbar a.proof .MuiTypography-root,
#navbar a.myDocumet .MuiTypography-root,
#navbar a.documentRecord .MuiTypography-root,
#navbar a.manageOrgUser .MuiTypography-root,
#navbar a.manageUser .MuiTypography-root,
#navbar a.systemSetting .MuiTypography-root,
#navbar a.report .MuiTypography-root,
#navbar a.payment .MuiTypography-root,
#navbar a.user .MuiTypography-root,
#navbar a.logout .MuiTypography-root {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

/* Submenu triggers: Noto Sans, 1.1rem, bold */
#navbar button.navTrigger.paymentTop,
#navbar button.navTrigger.client,
#navbar button.navTrigger.setting,
#navbar button.navTrigger.paymentRecord,
#navbar button.navTrigger.userSetting,
#navbar button.navTrigger.paymentTop .MuiTypography-root,
#navbar button.navTrigger.client .MuiTypography-root,
#navbar button.navTrigger.setting .MuiTypography-root,
#navbar button.navTrigger.paymentRecord .MuiTypography-root,
#navbar button.navTrigger.userSetting .MuiTypography-root {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  font-family: "Noto Sans HK", "Noto Sans SC", sans-serif !important;
}

/* Make them bigger + bold */
#navbar a.login,
#navbar a.register,
#navbar a.login .MuiTypography-root,
#navbar a.register .MuiTypography-root {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

/* ===== your existing sidebar (unchanged) ===== */
#systemTitle{
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1976d2;
  transition: 0.3s ease-in-out;
  text-align: center;
}
#mobileTitle{
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1976d2;
  transition: 0.3s ease-in-out;
  text-align: center;
}
#sidebar{
  font-size: 1.1rem;
  font-weight: 600;
}
#sidebartop{
  align-items: center;
  justify-content: start;
  padding: 0;
  display: flex;
  width: 100%;
}
#logoutContent{
  align-items: center;
  justify-content: center;
  padding: 0;
  display: flex;
  width: 100%;
}
#sidebarbottom{
  align-items: center;
  justify-content: center;
  padding: 0;
  display: flex;
}
#sidebar li{
  list-style: none;
  padding: 0 20px;
  position: relative;
  text-align: left;
}
#sidebar li a{
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: black;
  transition: 0.3s ease-in-out;
}
#sidebar li a:hover{
  color: #1976d2;
}
#sidebar div li ul{
  background: white;
  visibility: hidden;
  opacity: 0;
  min-width: 16rem;
  position: relative;
  left: 0;
  display: none;
  padding-left: 0px;
}
#sidebar div li:hover > ul,
#sidebar div li:focus-within > ul,
#sidebar div li ul:hover,
#sidebar div li ul:focus{
  visibility: visible;
  opacity: 1;
  display: block;
}

/* ===== Mobile Drawer / Sidebar menu styling ===== */
#sidebar ul { 
  width: 100%;
  padding: 0;
  margin: 0;
}

#sidebar li{
  width: 100%;
  padding: 0;                 /* remove the old 0 20px */
  margin: 0;
}

/* Make BOTH links and dropdown buttons look the same */
#sidebar li > a,
#sidebar li > button.navTrigger{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; /* text left, arrow right */
  gap: 12px;

  background: transparent;
  border: 0;                  /* kill grey border */
  box-shadow: none;
  outline: none;

  padding: 14px 20px;
  text-align: left;

  font-size: 1.3rem;
  font-weight: 600;
  color: black;
  cursor: pointer;
}

/* Hover / focus */
#sidebar li > a:hover,
#sidebar li > button.navTrigger:hover{
  color: #1976d2;
}

#sidebar li > a:focus-visible,
#sidebar li > button.navTrigger:focus-visible{
  outline: 3px solid #1976d2;
  outline-offset: 2px;
  border-radius: 10px;
}

/* Submenu (indent + full width) */
#sidebar li ul{
  width: 100%;
  padding: 6px 0 6px 0;
  margin: 0;
  display: none;
  visibility: hidden;
  opacity: 0;
}

/* Open on focus-within (tap/click focuses button) */
#sidebar li:focus-within > ul{
  display: block;
  visibility: visible;
  opacity: 1;
}

#sidebar li ul li > a{
  padding: 12px 20px 12px 40px; /* indent submenu */
  font-size: 1.15rem;
  font-weight: 600;
}