@djb25/digit-ui-css 1.0.31 → 1.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djb25/digit-ui-css",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "satyam",

package/src/components/card.scss

@@ -421,7 +421,7 @@
 }
 
 .home-page-info-banner-wrap {
-  margin: "0px 16px 24px 16px";
+  margin: 0px 16px 24px 16px;
 }
 
 @media (min-width: 780px) {
@@ -1207,13 +1207,15 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: var(--bg-color);
-  border-right: 1px solid var(--border-color);
-  transition: width var(--transition-slow);
+  background-color: #ffffff;
+  border-right: 1px solid rgba(0, 0, 0, 0.05);
+  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   overflow-x: hidden;
   box-sizing: border-box;
-  font-family: "Inter", system-ui, -apple-system, sans-serif;
-  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.02);
+  font-family: inherit;
+  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.04);
+  position: relative;
+  z-index: 101;
 }
 
 /* Width Control */
@@ -1396,6 +1398,14 @@
   padding: 12px 0;
 }
 
+.mobile-only {
+  display: none !important;
+}
+
+.desktop-only {
+  display: flex !important;
+}
+
 .module-sidebar-toggle {
   display: none;
 }
@@ -1404,143 +1414,105 @@
   display: none;
 }
 
-@media (max-width: 768px) {
-
-  /* Wrapper becomes a sticky top bar, not a flex column member */
-  .module-sidebar-wrapper {
-    position: sticky;
-    top: 0;
-    z-index: 200;
-    width: 100%;
-    height: auto;
-    flex-shrink: 0;
-  }
-
-  /* Hide desktop sidebar — zero dimensions so flex row is unaffected */
-  .premium-sidebar {
-    display: none !important;
-    width: 0 !important;
-    min-width: 0 !important;
-    height: 0 !important;
-    overflow: hidden !important;
-    border: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
-  }
-
-  /* Hide old toggle + backdrop */
-  .module-sidebar-toggle,
-  .module-sidebar-backdrop,
-  .collapse-toggle {
-    display: none !important;
-  }
+@media (max-width: 780px) {
 
-  /* Show the horizontal scrollable tab bar */
-  .mobile-tab-bar {
+  /* Toggle Button */
+  .module-sidebar-toggle {
     display: flex;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    gap: 6px;
-    padding: 8px 12px;
-    background-color: #ffffff;
-    border-bottom: 1px solid #e5e7eb;
-    width: 100%;
-    box-sizing: border-box;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
-  }
-
-  .mobile-tab-bar::-webkit-scrollbar {
-    display: none;
+    position: fixed;
+    top: 68px;
+    /* Slightly below the top header */
+    left: 12px;
+    z-index: 50;
+    width: 44px;
+    height: 44px;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    color: #1e293b;
+    cursor: pointer;
+    transition: all 0.3s ease;
   }
 
-  .mobile-tab-wrapper {
-    flex-shrink: 0;
+  .module-sidebar-toggle.hidden {
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(0.8);
   }
 
-  .mobile-tab-wrapper a {
-    text-decoration: none;
-    color: inherit;
+  /* Backdrop Overlay */
+  .module-sidebar-backdrop {
     display: block;
-  }
-
-  .mobile-tab-wrapper.disabled {
-    opacity: 0.5;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    z-index: 99;
+    opacity: 0;
     pointer-events: none;
+    transition: opacity 0.4s ease;
   }
 
-  .mobile-tab-item {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 7px 14px;
-    border-radius: 999px;
-    border: 1px solid #e5e7eb;
-    background-color: #f9fafb;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-
-  .mobile-tab-item.active {
-    background-color: #eff6ff;
-    border-color: #bfdbfe;
-    color: #1a67a3;
+  .module-sidebar-backdrop.visible {
+    opacity: 1;
+    pointer-events: auto;
   }
 
-  .mobile-tab-icon {
-    width: 16px;
-    height: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
+  /* Sidebar Wrapper & Mobile Off-canvas Drawer */
+  .module-sidebar-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    z-index: 100;
+    pointer-events: none;
+    /* Let clicks pass through when hidden */
   }
 
-  .mobile-tab-icon svg {
-    width: 16px;
-    height: 16px;
+  .module-sidebar-wrapper.mobile-open {
+    pointer-events: auto;
   }
 
-  .mobile-tab-initial {
-    font-size: 11px;
-    font-weight: 700;
-    color: #6b7280;
+  .premium-sidebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 280px !important;
+    /* Force fixed width on mobile drawer */
+    transform: translateX(-100%);
+    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
   }
 
-  .mobile-tab-item.active .mobile-tab-initial {
-    color: #1a67a3;
+  .premium-sidebar.mobile-open {
+    transform: translateX(0);
   }
 
-  .mobile-tab-label {
-    font-size: 13px;
-    font-weight: 500;
-    color: #374151;
-    line-height: 1;
+  .mobile-only {
+    display: flex !important;
   }
 
-  .mobile-tab-item.active .mobile-tab-label {
-    color: #1a67a3;
-    font-weight: 600;
+  .desktop-only {
+    display: none !important;
   }
 
-  /* expanded page container stacks vertically */
-  .expanded-page-container {
-    flex-direction: column !important;
-    gap: 0 !important;
-    width: 100% !important;
+  .brand-name {
+    opacity: 1 !important;
+    width: auto !important;
+    margin-left: 16px !important;
   }
 
-
-  /* expanded sidebar NOT hidden on mobile to allow hamburger menu */
-
-  /* expanded content full width */
-  .expanded-content {
-    width: 100% !important;
-    padding: 16px !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
+  .nav-text {
+    opacity: 1 !important;
+    width: auto !important;
+    margin-left: 16px !important;
   }
 }
 

package/src/components/staticSideBar.scss

@@ -44,10 +44,12 @@
   flex-direction: column;
   gap: 8px;
   padding: 10px 8px 14px;
-  transition: width 0.3s ease, box-shadow 0.3s ease;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
- 
+  position: relative;
+  z-index: 101;
   padding-top: 56px;
+  height: 100vh;
 }
 
 .citizen-static-sidebar.expanded {
@@ -129,6 +131,7 @@
   border: 1px solid #eef2f7;
   flex: 1;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .citizen-static-sidebar .drawer-desktop .sidebar-list {
@@ -137,7 +140,7 @@
 
 .citizen-static-sidebar .drawer-desktop .sidebar-list.active {
   border-left: none;
-  background: #eef6ff;
+
   border-radius: 12px;
   padding-left: 4px;
 }
@@ -156,7 +159,7 @@
   float: none;
 }
 
-.citizen-static-sidebar .drawer-desktop .menu-item .icon + .menu-label {
+.citizen-static-sidebar .drawer-desktop .menu-item .icon+.menu-label {
   margin-left: 0;
 }
 
@@ -194,10 +197,10 @@
   align-items: center;
   width: 100%;
   padding: 10px 0;
+  margin-left: 7px;
 }
 
 .citizen-static-sidebar.collapsed .drawer-desktop .sidebar-list.active {
-  background: #e0efff;
   padding: 6px 4px;
 }
 
@@ -226,8 +229,109 @@
   display: none;
 }
 
+.citizen-mobile-toggle {
+  display: none;
+}
+
+.citizen-sidebar-backdrop {
+  display: none;
+}
+
 @media (max-width: 780px) {
   .citizen-sidebar-toggle {
     display: none;
   }
-}
+
+  .citizen-mobile-toggle {
+    display: flex;
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 50;
+    height: 48px;
+    padding: 0 24px;
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    border-radius: 999px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    box-shadow: 0 8px 32px rgba(30, 58, 138, 0.15), 0 2px 8px rgba(30, 58, 138, 0.1);
+    color: #1e3a8a;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    .toggle-label {
+      font-size: 14px;
+      font-weight: 700;
+      letter-spacing: 0.5px;
+    }
+
+    &:active {
+      transform: translateX(-50%) scale(0.95);
+    }
+  }
+
+  .citizen-mobile-toggle.hidden {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(-50%) translateY(20px) scale(0.9);
+  }
+
+  .citizen-sidebar-backdrop {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    z-index: 99;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.4s ease;
+  }
+
+  .citizen-sidebar-backdrop.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .citizen-static-sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 280px !important;
+    transform: translateX(-100%);
+    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
+  }
+
+  .citizen-static-sidebar.mobile-open {
+    transform: translateX(0);
+    margin-top: 40px;
+  }
+
+  /* When on mobile, drawer is always expanded visually inside */
+  .citizen-static-sidebar .citizen-sidebar-brand-text,
+  .citizen-static-sidebar .drawer-desktop .menu-label {
+    opacity: 1 !important;
+    width: auto !important;
+    margin-left: 0 !important;
+    pointer-events: auto !important;
+  }
+
+  .citizen-static-sidebar .drawer-desktop .menu-item {
+    justify-content: flex-start !important;
+    padding: 8px 10px !important;
+  }
+
+  .citizen-static-sidebar .profile-section .label-container {
+    display: flex !important;
+  }
+}

package/src/pages/citizen/HomePageWrapper.scss

@@ -323,8 +323,17 @@
 }
 
 @media (max-width: 780px) {
+
+  /* On mobile, SideBarStatic shouldn't prevent the drawer from appearing. */
   .SideBarStatic {
-    display: none;
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    width: 0;
+    /* No physical width so it doesn't push map content */
+    height: 100vh;
   }
 }
 
@@ -342,7 +351,6 @@
     top: -5%;
     width: 50vw;
     height: 50vw;
-    background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 70%);
     border-radius: 50%;
     opacity: 0.8;
     z-index: 0;
@@ -368,36 +376,71 @@
   flex: 1;
   min-width: 0;
   margin-top: -25px;
+  position: relative;
 
   img {
     height: 33vw;
-    filter: grayscale(100%);
-    @apply w-full object-cover;
+    min-height: 220px;
+    filter: brightness(0.65) contrast(1.1);
+    @apply w-full object-cover rounded-b-2xl;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    transition: filter 0.3s ease;
   }
 
   h1 {
     position: absolute;
     top: 100px;
+    /* Base position */
     left: 21px;
-    @apply text-heading-xl text-white font-bold;
+    @apply text-heading-xl;
+    /* Kept this as it's likely a custom framework class */
+    color: #ffffff;
+    /* text-white equivalent */
+    font-weight: 800;
+    /* font-extrabold equivalent */
+    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    letter-spacing: 0.5px;
   }
 
   .moduleLinkHomePageBackButton {
     border: none;
-    top: 76px;
+    position: absolute;
+    top: 80px;
+    /* Align nicer */
+    left: 16px;
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background 0.2s ease;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.4);
+    }
 
     svg {
-      fill: theme(colors.white);
+      fill: #ffffff !important;
     }
 
-    @apply absolute text-white text-heading-s ml-md;
+    /* remove ml-md inside so it centers */
   }
 }
 
 .moduleLinkHomePageModuleLinks {
-  @apply mt-md;
+  @apply mt-md mx-sm;
 
   .CitizenHomeCard {
+    background: rgba(255, 255, 255, 0.8) !important;
+    backdrop-filter: blur(12px);
+    border-radius: 16px !important;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
+    border: 1px solid rgba(255, 255, 255, 0.9);
+
     .header {
       @apply hidden;
     }
@@ -438,21 +481,26 @@
     img {
       min-width: 100vw;
       height: 20vw;
+      border-radius: 0 0 24px 24px;
+      /* Smoother curve on desktop */
     }
 
     h1 {
-      top: calc(10vw + 40px);
-      left: 15.8rem;
+      top: calc(10vw + 60px);
+      left: calc(15.8rem + 40px);
+      /* Align slightly right of back button */
+      font-size: 38px;
     }
 
     .moduleLinkHomePageBackButton {
       top: calc(10vw + 16px);
-      @apply ml-md;
+      left: 15.8rem;
     }
   }
 
   .moduleLinkHomePageModuleLinks {
     width: 100%;
+    padding: 0 2rem;
   }
 }