Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
PlanTempusApp/PlanTempus.Application/wwwroot/css/sidebar.css
Janus C. H. Knudsen 51f3b92d69 Enhances application menu and adds calendar feature 
Adds new calendar page and module with comprehensive initialization

Introduces quick actions group in side menu with create booking and sale options
Updates menu service to include new menu groups and rearrange sort order
Configures custom npm registry and esbuild configuration
Adds localization for new menu items and calendar section

Implements calendar controller with dependency injection and settings seeding
2026-02-02 22:42:18 +01:00

277 lines
6.6 KiB
CSS
Raw Permalink Blame History

/**
* Sidebar - Side Menu Component
*
* Navigation sidebar med collapse-funktionalitet
*/
/* ===========================================
SIDE MENU CONTAINER
=========================================== */
swp-side-menu {
grid-row: 1 / -1;
display: flex;
flex-direction: column;
background: var(--color-surface);
border-right: 1px solid var(--color-border);
overflow-y: auto;
overflow-x: hidden;
}
/* ===========================================
HEADER
=========================================== */
swp-side-menu-header {
display: flex;
align-items: center;
gap: var(--spacing-5);
height: var(--topbar-height);
padding: 0 var(--spacing-4);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
swp-side-menu-header > i {
font-size: 26px;
color: var(--color-teal);
}
swp-side-menu-logo {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-text);
}
/* Toggle Button */
swp-menu-toggle {
margin-left: auto;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: var(--border-radius);
cursor: pointer;
color: var(--color-text-secondary);
transition: all var(--transition-fast);
& i {
font-size: 18px;
color: inherit;
transition: transform var(--transition-normal);
}
&:hover {
background: var(--color-background-hover);
color: var(--color-text);
}
}
/* ===========================================
NAVIGATION
=========================================== */
swp-side-menu-nav {
flex: 1;
padding: var(--spacing-3) 0;
overflow-y: auto;
}
swp-side-menu-group {
display: block;
margin-bottom: var(--spacing-2);
}
swp-side-menu-label {
display: block;
padding: var(--spacing-2) var(--spacing-4) 6px;
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
}
/* ===========================================
MENU ITEMS
=========================================== */
swp-side-menu-item,
a[is="swp-side-menu-item"] {
display: flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-5) var(--spacing-4);
color: var(--color-text);
cursor: pointer;
transition: all var(--transition-fast);
border-left: 3px solid transparent;
text-decoration: none;
& i {
font-size: 20px;
flex-shrink: 0;
}
&:hover {
background: var(--color-background-hover);
text-decoration: none;
}
&[data-active="true"] {
background: var(--color-teal-light);
border-left-color: var(--color-teal);
color: var(--color-teal);
font-weight: 500;
}
}
/* ===========================================
QUICK ACTIONS GROUP - Highlighted
=========================================== */
swp-side-menu-group[data-group="quickActions"] {
background: rgba(255, 235, 59, 0.15);
margin: var(--spacing-2) var(--spacing-2) var(--spacing-3);
padding: var(--spacing-2) 0;
border-radius: var(--border-radius-lg);
border: 1px solid rgba(255, 193, 7, 0.5);
}
swp-side-menu-group[data-group="quickActions"] swp-side-menu-label {
padding-left: var(--spacing-3);
padding-right: var(--spacing-3);
}
swp-side-menu-group[data-group="quickActions"] a[is="swp-side-menu-item"] {
padding-left: var(--spacing-3);
padding-right: var(--spacing-3);
border-left: none;
}
/* ===========================================
FOOTER
=========================================== */
swp-side-menu-footer {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
padding: var(--spacing-3) var(--spacing-4);
border-top: 1px solid var(--color-border);
margin-top: auto;
flex-shrink: 0;
}
swp-side-menu-action {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-5);
font-size: var(--font-size-md);
color: var(--color-text-secondary);
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
cursor: pointer;
transition: all var(--transition-fast);
font-family: var(--font-family);
& i {
font-size: 18px;
}
&:hover {
background: var(--color-background-hover);
}
&.lock:hover {
color: var(--color-amber);
border-color: var(--color-amber);
}
&.logout:hover {
color: var(--color-red);
border-color: var(--color-red);
}
}
/* ===========================================
COLLAPSED STATE
=========================================== */
swp-app-layout.menu-collapsed swp-side-menu {
overflow: visible;
}
swp-app-layout.menu-collapsed swp-side-menu-logo,
swp-app-layout.menu-collapsed swp-side-menu-label,
swp-app-layout.menu-collapsed swp-side-menu-item span,
swp-app-layout.menu-collapsed swp-side-menu-action span,
swp-app-layout.menu-collapsed a[is="swp-side-menu-item"] span {
display: none;
}
swp-app-layout.menu-collapsed swp-side-menu-header {
justify-content: center;
padding: 0;
}
swp-app-layout.menu-collapsed swp-menu-toggle {
margin-left: 0;
}
swp-app-layout.menu-collapsed swp-menu-toggle i {
transform: rotate(180deg);
}
swp-app-layout.menu-collapsed swp-side-menu-item,
swp-app-layout.menu-collapsed a[is="swp-side-menu-item"] {
justify-content: center;
padding: var(--spacing-3);
border-left: none;
}
swp-app-layout.menu-collapsed swp-side-menu-item[data-active="true"],
swp-app-layout.menu-collapsed a[is="swp-side-menu-item"][data-active="true"] {
border-left: none;
border-radius: var(--border-radius-lg);
margin: 0 var(--spacing-2);
}
swp-app-layout.menu-collapsed swp-side-menu-action {
justify-content: center;
padding: var(--spacing-3);
}
swp-app-layout.menu-collapsed swp-side-menu-footer {
padding: var(--spacing-3) var(--spacing-2);
}
/* Quick Actions - Collapsed State */
swp-app-layout.menu-collapsed swp-side-menu-group[data-group="quickActions"] {
margin: var(--spacing-2) var(--spacing-1);
padding: var(--spacing-2) 0;
}
swp-app-layout.menu-collapsed swp-side-menu-group[data-group="quickActions"] a[is="swp-side-menu-item"] {
padding: var(--spacing-3);
justify-content: center;
}
/* ===========================================
TOOLTIP (Collapsed State)
=========================================== */
.swp-menu-tooltip {
position: fixed;
margin: 0;
padding: 6px var(--spacing-3);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
font-size: var(--font-size-md);
font-family: var(--font-family);
color: var(--color-text);
white-space: nowrap;
box-shadow: var(--shadow-md);
pointer-events: none;
z-index: var(--z-tooltip);
}
Reference in a new issue View git blame Copy permalink