mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-09-30 11:33:12 +00:00
2477bcf5a6
- Click user section to open dropdown with profile, settings, password, sign out - Shows user avatar, name, and email in dropdown header - Click notification bell to open panel showing empty state - Both use portal-rendered dropdowns, close on outside click - Removed standalone logout button, moved into user dropdown
537 lines
8.9 KiB
CSS
537 lines
8.9 KiB
CSS
/* =========================================================
|
|
ROOT + RESET
|
|
========================================================= */
|
|
:root {
|
|
--sidebar-w: 220px;
|
|
--sidebar-collapsed-w: 56px;
|
|
--topbar-h: 64px;
|
|
|
|
--blue-main: #0c4f6f;
|
|
--blue-dark: #083a52;
|
|
--border: #d9dde0;
|
|
--bg: #f4f6f7;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body, #root {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: 13px;
|
|
background: var(--bg);
|
|
color: #333;
|
|
}
|
|
|
|
/* =========================================================
|
|
APP LAYOUT
|
|
========================================================= */
|
|
.app {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
}
|
|
|
|
/* =========================================================
|
|
SIDEBAR
|
|
========================================================= */
|
|
.sidebar {
|
|
width: var(--sidebar-w);
|
|
height: 100vh;
|
|
background: #fbfbfb;
|
|
border-right: 1px solid var(--border);
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
transition: width .25s ease;
|
|
}
|
|
|
|
/* Collapsed width */
|
|
.app.nav-collapsed .sidebar {
|
|
width: var(--sidebar-collapsed-w);
|
|
}
|
|
/* Sidebar logo */
|
|
.sidebarLogo {
|
|
max-width: 140px;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
/* Center logo when collapsed */
|
|
.app.nav-collapsed .sidebarLogo {
|
|
max-width: 32px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* =========================================================
|
|
LOGO
|
|
========================================================= */
|
|
.logoRow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.logoMark {
|
|
font-size: 26px;
|
|
font-weight: bold;
|
|
color: #e74c3c;
|
|
}
|
|
|
|
.logoText {
|
|
font-size: 17px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.logoText span {
|
|
font-size: 13px;
|
|
color: #666;
|
|
}
|
|
|
|
/* =========================================================
|
|
NAVIGATION
|
|
========================================================= */
|
|
.navTitle {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
letter-spacing: 1.5px;
|
|
color: #888;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.navList {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* Reset anchor defaults */
|
|
.navList a,
|
|
.navList a:visited,
|
|
.navList a:hover,
|
|
.navList a:active {
|
|
text-decoration: none;
|
|
color: #333;
|
|
}
|
|
|
|
/* Nav item */
|
|
.navItem {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 14px;
|
|
border-radius: 6px;
|
|
margin-bottom: 6px;
|
|
font-weight: normal;
|
|
transition: background-color .15s ease;
|
|
}
|
|
|
|
/* Hover */
|
|
.navItem:hover {
|
|
background: #eef2f4;
|
|
}
|
|
|
|
/* Active (expanded only) */
|
|
.navItem.active {
|
|
background: #e6f1f7;
|
|
font-weight: 600;
|
|
border-left: 3px solid #0b80b5;
|
|
}
|
|
|
|
/* Icon */
|
|
.glyph {
|
|
font-size: 18px;
|
|
width: 22px;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
margin-right: 12px;
|
|
color: #8c949a;
|
|
}
|
|
|
|
/* Label */
|
|
.navLabel {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* =========================================================
|
|
COLLAPSED SIDEBAR (LEGACY BEHAVIOR)
|
|
========================================================= */
|
|
|
|
/* Hide text only */
|
|
.app.nav-collapsed .navLabel,
|
|
.app.nav-collapsed .logoText,
|
|
.app.nav-collapsed .navTitle {
|
|
display: none;
|
|
}
|
|
|
|
/* Center icons */
|
|
.app.nav-collapsed .navItem {
|
|
justify-content: center;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.app.nav-collapsed .glyph {
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* 🔥 REMOVE ACTIVE STYLING WHEN COLLAPSED (CRITICAL FIX) */
|
|
.app.nav-collapsed .navItem.active {
|
|
background: transparent;
|
|
border-left: none;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Hover only (legacy) */
|
|
.app.nav-collapsed .navItem:hover {
|
|
background: #eef2f4;
|
|
}
|
|
|
|
/* =========================================================
|
|
MAIN AREA (NEVER MOVES)
|
|
========================================================= */
|
|
.mainArea {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* =========================================================
|
|
TOPBAR
|
|
========================================================= */
|
|
.topbar {
|
|
height: var(--topbar-h);
|
|
background: linear-gradient(var(--blue-main), var(--blue-dark));
|
|
border-bottom: 1px solid #062c3e;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 16px;
|
|
color: #fff;
|
|
}
|
|
|
|
.topLeft {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.hamburger {
|
|
background: none;
|
|
border: none;
|
|
color: #fff;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.topRight {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.topbarIconBtn {
|
|
background: none;
|
|
border: none;
|
|
color: rgba(255,255,255,0.7);
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
padding: 6px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.topbarIconBtn:hover {
|
|
color: #fff;
|
|
background: rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.topbarLogout {
|
|
color: rgba(255,255,255,0.5);
|
|
}
|
|
|
|
.topbarLogout:hover {
|
|
color: #ff6b6b;
|
|
background: rgba(255,100,100,0.1);
|
|
}
|
|
|
|
.notifDropdown {
|
|
position: fixed;
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
|
z-index: 99999;
|
|
width: 300px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.notifHeader {
|
|
padding: 12px 16px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.notifEmpty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 30px 16px;
|
|
color: #999;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.notifEmptyIcon {
|
|
font-size: 24px;
|
|
color: #ccc;
|
|
}
|
|
|
|
.topbarUserBtn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.topbarUserBtn:hover {
|
|
background: rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.topbarUserCaret {
|
|
color: rgba(255,255,255,0.5);
|
|
font-size: 12px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.userDropdown {
|
|
position: fixed;
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
|
z-index: 99999;
|
|
width: 260px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.userDropdownHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.userDropdownAvatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: #1fa8de;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.userDropdownName {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.userDropdownEmail {
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
|
|
.userDropdownDivider {
|
|
height: 1px;
|
|
background: #eee;
|
|
}
|
|
|
|
.userDropdownItem {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
padding: 10px 16px;
|
|
border: none;
|
|
background: #fff;
|
|
font-size: 13px;
|
|
color: #333;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
|
|
.userDropdownItem:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.userDropdownItem i {
|
|
width: 16px;
|
|
text-align: center;
|
|
color: #999;
|
|
}
|
|
|
|
.userDropdownLogout {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.userDropdownLogout:hover {
|
|
background: #fff5f5;
|
|
}
|
|
|
|
.userDropdownLogout i {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.topbarDivider {
|
|
width: 1px;
|
|
height: 24px;
|
|
background: rgba(255,255,255,0.15);
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.topbarUser {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: #1fa8de;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.topbarUserInfo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.topbarUserName {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
.topbarUserRole {
|
|
font-size: 11px;
|
|
color: rgba(255,255,255,0.5);
|
|
}
|
|
|
|
/* =========================================================
|
|
CONTENT
|
|
========================================================= */
|
|
.contentWrapper {
|
|
padding: 10px;
|
|
}
|
|
|
|
/* =========================================================
|
|
TABLE (CONTACTS / EMPLOYEES)
|
|
========================================================= */
|
|
.contactTable {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.contactTable thead th {
|
|
padding: 10px 12px;
|
|
background: linear-gradient(#a9bdca, #8fa6b4);
|
|
color: #fff;
|
|
font-weight: 600;
|
|
border-bottom: 1px solid #7d96a6;
|
|
}
|
|
|
|
.contactTable tbody td {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.contactTable tbody tr:nth-child(odd) {
|
|
background: #fff;
|
|
}
|
|
|
|
.contactTable tbody tr:nth-child(even) {
|
|
background: #fbfbfb;
|
|
}
|
|
|
|
.controlsTop {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.leftControls {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.filter {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.filter select {
|
|
height: 34px;
|
|
border: 1px solid #ccc;
|
|
border-right: none;
|
|
border-radius: 4px 0 0 4px;
|
|
padding: 6px 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.filter input {
|
|
height: 34px;
|
|
width: 260px;
|
|
border: 1px solid #ccc;
|
|
border-left: none;
|
|
border-right: none;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.searchBtn {
|
|
height: 34px;
|
|
padding: 0 14px;
|
|
border: 1px solid #0073aa;
|
|
background-color: #0073aa;
|
|
color: #fff;
|
|
border-radius: 0 4px 4px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.searchBtn:hover {
|
|
background-color: #005f8d;
|
|
}
|
|
|
|
.rightControls {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|