Added more sidebar customizations.

shrihari-prakash · Jan 7, 2024 · fd056f0 · fd056f0
1 parent bf23434
commit fd056f0
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 14 deletions.
diff --git a/src/public/components/layout.js b/src/public/components/layout.js
@@ -86,6 +86,9 @@ export default function Layout({ children }) {
       setStyleProperty("--form-input-vertical-padding", getThemeVariable("form.input-vertical-padding"));
       setStyleProperty("--form-input-horizontal-padding", getThemeVariable("form.input-horizontal-padding"));
       setStyleProperty("--app-font-base-size", configuration["theme.app-font-base-size"]);
+      setStyleProperty("--sidebar-width", configuration["sidebar.width"]);
+      setStyleProperty("--sidebar-margin", configuration["sidebar.margin"]);
+      setStyleProperty("--sidebar-border-radius", configuration["sidebar.border-radius"]);
       if (theme === "light") {
         changeToLightVariable("--text-color");
         changeToLightVariable("--text-lighter-color");
@@ -147,19 +150,21 @@ export default function Layout({ children }) {
               <div className="content">{children}</div>
             </div>
             {configuration["content.sidebar.enabled"] && showSidebar && (
-              <div className="sidebar" style={{ backgroundImage: `url(${sidebarImage})` }}>
-                {configuration["system.demo-mode"] &&
-                  <div class="ribbon">
-                    Demo Mode
-                  </div>
-                }
-                {configuration["content.sidebar.content-enabled"] && (
-                  <div className="intro">
-                    <div className="title1">{configuration["content.sidebar.intro.title1"]}</div>
-                    <div className="title2">{configuration["content.sidebar.intro.title2"]}</div>
-                    <div className="description">{configuration["content.sidebar.intro.description"]}</div>
-                  </div>
-                )}
+              <div className="sidebar-wrapper">
+                <div className="sidebar" style={{ backgroundImage: `url(${sidebarImage})` }}>
+                  {configuration["system.demo-mode"] &&
+                    <div class="ribbon">
+                      Demo Mode
+                    </div>
+                  }
+                  {configuration["content.sidebar.content-enabled"] && (
+                    <div className="intro">
+                      <div className="title1">{configuration["content.sidebar.intro.title1"]}</div>
+                      <div className="title2">{configuration["content.sidebar.intro.title2"]}</div>
+                      <div className="description">{configuration["content.sidebar.intro.description"]}</div>
+                    </div>
+                  )}
+                </div>
               </div>
             )}
           </div>

diff --git a/src/public/configuration/options.json b/src/public/configuration/options.json
@@ -147,6 +147,24 @@
     "description": "Specifies if input fields in forms can display placeholder.",
     "default": true
   },
+  {
+    "name": "sidebar.width",
+    "displayName": "Sidebar Margin",
+    "description": "Specifies width of the sidebar.",
+    "default": "35%"
+  },
+  {
+    "name": "sidebar.margin",
+    "displayName": "Sidebar Margin",
+    "description": "Specifies the margin for sidebar. Single value margin in any unit.",
+    "default": "0px"
+  },
+  {
+    "name": "sidebar.border-radius",
+    "displayName": "Sidebar Border Radius",
+    "description": "Specifies the border radius for sidebar.",
+    "default": "0px"
+  },
   {
     "name": "form.animate-entrance",
     "displayName": "Form Animate Entrance",

diff --git a/src/public/css/layout.css b/src/public/css/layout.css
@@ -18,6 +18,10 @@
   --spinner-background-color: #0a0a0a;
   --spinner-primary-color: #ffffff40;
   --spinner-secondary-color: #2b2b2b;
+  /* Common */
+  --sidebar-width: 35%;
+  --sidebar-margin: 3em;
+  --sidebar-border-radius: 1em;
 }
 
 html {
@@ -179,9 +183,22 @@ h3 {
   justify-content: center;
 }
 
+.page .sidebar-wrapper {
+  position: relative;
+  width: var(--sidebar-width);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+  background-position: center;
+}
+
 .page .sidebar {
   position: relative;
-  width: 35%;
+  height: calc(100% - var(--sidebar-margin));
+  width: calc(100% - var(--sidebar-margin));
+  border-radius: var(--sidebar-border-radius);
+  overflow: hidden;
   box-shadow: inset 5px 0px 6px 1px #00000035;
   display: flex;
   align-items: center;