Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Restructures project with feature-based organization

Browse source 
Refactors project structure to support modular, feature-driven development

Introduces comprehensive language localization support
Adds menu management with role-based access control
Implements dynamic sidebar and theme switching capabilities

Enhances project scalability and maintainability
This commit is contained in:
Janus C. H. Knudsen 2026-01-08 15:44:11 +01:00
parent fac7754d7a
commit d7f3c55a2a
60 changed files with 3214 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

180
app/wwwroot/css/topbar.css Normal file
View file

@ -0,0 +1,180 @@
/**
* Topbar - App Header Bar
*
* Search, notifications og profil-menu
*/
/* ===========================================
TOPBAR CONTAINER
=========================================== */
swp-app-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--spacing-5);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: var(--z-sticky);
}
/* ===========================================
SEARCH
=========================================== */
swp-topbar-search {
display: flex;
align-items: center;
gap: 10px;
padding: var(--spacing-2) var(--spacing-3);
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
width: 320px;
transition: border-color var(--transition-fast);
}
swp-topbar-search:focus-within {
border-color: var(--color-teal);
}
swp-topbar-search i {
font-size: 18px;
color: var(--color-text-secondary);
flex-shrink: 0;
}
swp-topbar-search input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: var(--font-size-md);
font-family: var(--font-family);
color: var(--color-text);
}
swp-topbar-search input::placeholder {
color: var(--color-text-secondary);
}
swp-topbar-search kbd {
font-size: var(--font-size-xs);
font-family: var(--font-mono);
padding: 2px 6px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 4px;
color: var(--color-text-secondary);
}
/* ===========================================
ACTIONS
=========================================== */
swp-topbar-actions {
display: flex;
align-items: center;
gap: var(--spacing-2);
}
/* Action Buttons */
swp-topbar-btn {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: none;
background: transparent;
border-radius: var(--border-radius);
cursor: pointer;
transition: background var(--transition-fast);
position: relative;
color: var(--color-text-secondary);
}
swp-topbar-btn:hover {
background: var(--color-background-hover);
}
swp-topbar-btn i {
font-size: 22px;
}
/* Notification Badge */
swp-notification-badge {
position: absolute;
top: 6px;
right: 6px;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 10px;
font-weight: 600;
background: var(--color-red);
color: white;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
/* Divider */
swp-topbar-divider {
width: 1px;
height: 24px;
background: var(--color-border);
margin: 0 var(--spacing-2);
}
/* ===========================================
PROFILE TRIGGER
=========================================== */
swp-topbar-profile {
display: flex;
align-items: center;
gap: 10px;
padding: 6px var(--spacing-3) 6px 6px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--border-radius);
cursor: pointer;
transition: all var(--transition-fast);
}
swp-topbar-profile:hover {
background: var(--color-background-hover);
border-color: var(--color-border);
}
swp-profile-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-teal);
color: white;
font-size: var(--font-size-sm);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
swp-profile-info {
display: flex;
flex-direction: column;
align-items: flex-start;
}
swp-profile-name {
font-size: var(--font-size-md);
font-weight: 500;
color: var(--color-text);
line-height: var(--line-height-tight);
}
swp-profile-role {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
line-height: var(--line-height-tight);
}