Skip to content

feat: add fixed sidebar and login redirect options to desk theme #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bhushan-barbuddhe merged 4 commits into from
Mar 2, 2026
Merged

feat: add fixed sidebar and login redirect options to desk theme #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6694446
feat: add fixed sidebar and login redirect options to desk theme
bhushan-barbuddhe Feb 27, 2026
a1d5a06
feat: enhance desk theme with new navbar and button styles, and add d…
bhushan-barbuddhe Feb 28, 2026
c6b1853
feat: streamline page routing in sidebar and main script for improved…
bhushan-barbuddhe Mar 1, 2026
4641b24
refactor: improve readability of conditional checks in sidebar behavi…
bhushan-barbuddhe Mar 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 35 additions & 1 deletion frappe_desk_theme/frappe_desk_theme/doctype/desk_theme/desk_theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
"default_app",
"column_break_jevx",
"navbar_text_color",
"navbar_toggler_border_color",
"navbar_breadcrumb_disabled_color",
"hide_search",
"buttons_tab",
"primary_button_section",
Expand Down Expand Up @@ -86,7 +88,10 @@
"sticky_footer",
"column_break_footer",
"footer_powered_by",
"footer_text_color"
"footer_text_color",
"desk_behavior_tab",
"fixed_sidebar",
"redirect_to_sidebar_on_login"
],
"fields": [
{
Expand All @@ -103,6 +108,16 @@
"fieldtype": "Color",
"label": "Text Color"
},
{
"fieldname": "navbar_toggler_border_color",
"fieldtype": "Color",
"label": "Toggler Border Color"
},
{
"fieldname": "navbar_breadcrumb_disabled_color",
"fieldtype": "Color",
"label": "Breadcrumb Disabled Color"
},
{
"fieldname": "column_break_jevx",
"fieldtype": "Column Break"
Expand Down Expand Up @@ -515,6 +530,25 @@
"fieldname": "sidebar_hover_text_color",
"fieldtype": "Color",
"label": "Hover Text Color"
},
{
"fieldname": "desk_behavior_tab",
"fieldtype": "Tab Break",
"label": "Desk Behavior"
},
{
"description": "Fixed workspace sidebar to show for all modules",
"fieldname": "fixed_sidebar",
"fieldtype": "Link",
"label": "Fixed Workspace Sidebar",
"options": "Workspace Sidebar"
},
{
"default": "0",
"description": "If enabled, after login redirect to the first item from the fixed sidebar instead of the default desktop screen",
"fieldname": "redirect_to_sidebar_on_login",
"fieldtype": "Check",
"label": "Redirect to Sidebar After Login"
}
],
"grid_page_length": 50,
Expand Down
69 changes: 45 additions & 24 deletions frappe_desk_theme/public/css/frappe_desk_theme.bundle.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,10 +154,10 @@ label.control-label {
}

/* ========================================
NAVIGATION BAR STYLING
NAVIGATION BAR STYLING (Desk Theme > Navbar)
======================================== */

/* Main navigation bar - top-level container with custom background */
/* Main navigation bar - Background Color, Text Color, Toggler Border, Breadcrumb Disabled */
.navbar {
background-color: var(--navbar-bg, #fff);
}
Expand All @@ -177,24 +177,46 @@ label.control-label {
stroke-width: 0;
}

/* Mobile menu toggle button - border color for hamburger menu */
/* Mobile menu toggle button - border color for hamburger menu (theme: Navbar > Toggler Border Color) */
button.navbar-toggler {
border-color: var(--navbar-color) !important;
border-color: var(--navbar-toggler-border, var(--navbar-color, #dee2e6)) !important;
}

/* Breadcrumb navigation links - maintains consistent color scheme */
#navbar-breadcrumbs li a {
color: var(--navbar-color);
/* Page head bar - navbar background only (override any body-bg inheritance or other rules) */
.page-head,
.page-head.flex {
background-color: var(--navbar-bg, #fff) !important;
}

/* Breadcrumb separators - adds arrow separators between breadcrumb items */
#navbar-breadcrumbs li a::before {
content: '›';
/* Page head breadcrumbs - override Frappe's ink-gray vars; use Desk Theme Navbar colors */
.page-head .navbar-breadcrumbs li a {
color: var(--navbar-color, #555) !important;
}

/* Disabled breadcrumb items - styling for non-clickable breadcrumb elements */
#navbar-breadcrumbs li.disabled a {
color: var(--navbar-color) !important;
.page-head .navbar-breadcrumbs li a svg,
.page-head .navbar-breadcrumbs li a svg use {
fill: var(--navbar-color, #555) !important;
stroke: var(--navbar-color, #555) !important;
}

/* Breadcrumb separators - match navbar color (Frappe uses "/", we keep theme color) */
.page-head .navbar-breadcrumbs li a::before {
color: var(--navbar-color, #555) !important;
}

/* Last/current breadcrumb item - Desk Theme Breadcrumb Disabled Color (overrides Frappe's li:last-child) */
.page-head .navbar-breadcrumbs li.disabled a,
.page-head .navbar-breadcrumbs li:last-child a {
color: var(--breadcrumb-disabled-color, var(--navbar-color, #6c757d)) !important;
}

/* Sidebar toggle in page head - match navbar color */
.page-head .sidebar-toggle-btn.navbar-brand,
.page-head .sidebar-toggle-btn.navbar-brand svg,
.page-head .sidebar-toggle-btn.navbar-brand svg use {
color: var(--navbar-color, #555) !important;
fill: var(--navbar-color, #555) !important;
stroke: var(--navbar-color, #555) !important;
}

/* Navigation link buttons - text and icon color consistency */
Expand All @@ -210,10 +232,10 @@ button.navbar-toggler {
}

/* ========================================
BUTTON STYLING
BUTTON STYLING (Desk Theme > Buttons)
======================================== */

/* Primary buttons - main action buttons throughout the application */
/* Primary buttons - Background/Text/Hover from theme */
.btn-primary,
.btn-primary:active {
background-color: var(--btn-primary-bg,#171717) !important;
Expand All @@ -225,14 +247,14 @@ button.navbar-toggler {
color: var(--btn-primary-color) !important;
}

/* Primary button hover state - provides visual feedback on mouse over */
/* Primary button hover state - fallback to primary when not set in theme */
.btn-primary:hover {
background-color: var(--btn-primary-hover-bg);
background-color: var(--btn-primary-hover-bg, var(--btn-primary-bg, #171717));
}

/* Primary button hover text - maintains readability during hover state */
/* Primary button hover text - fallback to primary color when not set in theme */
.btn-primary:hover span {
color: var(--btn-primary-hover-color);
color: var(--btn-primary-hover-color, var(--btn-primary-color, #fff));
}

/* Secondary/default buttons - alternative action buttons with distinct styling */
Expand All @@ -243,11 +265,11 @@ button.navbar-toggler {
color: var(--btn-secondary-color);
}

/* Secondary button hover effects - consistent interaction feedback */
/* Secondary button hover effects - fallback to secondary when not set in theme */
.btn.btn-default.ellipsis:hover,
.btn-default:hover {
background-color: var(--btn-secondary-hover-bg,#f3f3f3);
color: var(--btn-secondary-hover-color);
background-color: var(--btn-secondary-hover-bg, var(--btn-secondary-bg, #f3f3f3));
color: var(--btn-secondary-hover-color, var(--btn-secondary-color, inherit));
}

/* ========================================
Expand All @@ -260,8 +282,7 @@ body {
}

/* Page containers - main content wrapper background */
.content.page-container,
.page-head {
.content.page-container {
background-color: var(--body-bg,#fff);
}

Expand Down
Loading