X2-6961: Scroll bar to log out from x2-seller is not visible properly (…

…xola#272) * X2-6961: Scroll bar to log out from x2-seller is not visible properly * fix: position of footer on big screens * fix: bring back padding
kirtesh-xola · Oct 4, 2023 · 953d907 · 953d907
1 parent c386b18
commit 953d907
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 16 deletions.
diff --git a/src/components/DatePicker/DatePicker.css b/src/components/DatePicker/DatePicker.css
@@ -127,7 +127,8 @@
 }
 
 /* Change the dates within the date to have the full light blue to show that it's a part of the range */
-.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+.date-range-picker
+    .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
     @apply rounded-none bg-blue-lighter text-black;
 }
 

diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
@@ -12,13 +12,24 @@ import { SidebarFooter } from "./Sidebar.Footer";
 import { SidebarHeading } from "./Sidebar.Heading";
 import { SidebarLink, SidebarSeparator } from "./Sidebar.Link";
 import { SidebarMenu } from "./Sidebar.Menu";
+import sidebarScroll from "./SidebarScroll.module.css";
 
 const LeftDrawerCountStyle = {
     // From Figma
     background: "linear-gradient(138.65deg, #583DFF 19.59%, #F849C7 62.96%, #FFC03D 97.07%)",
 };
 
-export const Sidebar = ({ logo, children, className, footer, notifications, isFixed = true, onLogoClick }) => {
+export const Sidebar = ({
+    logo,
+    children,
+    className,
+    footer,
+    notifications,
+    isFixed = true,
+    onLogoClick,
+    isStickyHeader = true,
+    isStickyFooter = true,
+}) => {
     const [isLeftDrawerOpen, setIsLeftDrawerOpen] = useState(false);
     const [isRightDrawerOpen, setIsRightDrawerOpen] = useState(false);
 
@@ -64,17 +75,26 @@ export const Sidebar = ({ logo, children, className, footer, notifications, isFi
         }
     };
 
+    const isStickyHeaderFooter = isStickyHeader && isStickyFooter;
+
     return (
         <div
             className={clsx(
+                sidebarScroll,
                 "ui-sidebar",
                 isFixed ? "fixed" : "relative",
-                "z-20 flex h-full w-16 flex-col overflow-y-auto bg-black py-2 px-1 text-white md:w-24 xl:w-50",
+                !isStickyHeaderFooter && "overflow-y-auto",
+                "z-20 flex h-full w-16 flex-col bg-black py-2 px-1 text-white md:w-24 xl:w-50",
                 className,
             )}
         >
             {leftDrawer || rightDrawer ? (
-                <div className="flex w-full p-2 sm:justify-center sm:space-x-2 xl:justify-between">
+                <div
+                    className={clsx(
+                        "flex w-full p-2 sm:justify-center sm:space-x-2 xl:justify-between",
+                        isStickyHeader && "sticky top-0 z-50 bg-black",
+                    )}
+                >
                     {leftDrawer && (
                         <div className={clsx("cursor-pointer sm:text-center", leftDrawer.hide && "hidden")}>
                             <Counter style={LeftDrawerCountStyle} onClick={toggleLeftDrawer}>
@@ -117,20 +137,23 @@ export const Sidebar = ({ logo, children, className, footer, notifications, isFi
                 />
             )}
 
-            <div className="mt-4 mb-10 text-center">
-                {logo ?? (
-                    <XolaLogoSimple
-                        className={clsx(
-                            "inline-block h-12 w-12 xl:h-30 xl:w-30",
-                            onLogoClick && "cursor-pointer transition-opacity hover:opacity-80",
-                        )}
-                        onClick={onLogoClick}
-                    />
-                )}
+            <div className={clsx("flex-grow space-y-2", isStickyHeaderFooter && "overflow-y-auto")}>
+                <div className="text-center">
+                    {logo ?? (
+                        <XolaLogoSimple
+                            className={clsx(
+                                "inline-block h-12 w-12 xl:h-30 xl:w-30",
+                                onLogoClick && "cursor-pointer transition-opacity hover:opacity-80",
+                            )}
+                            onClick={onLogoClick}
+                        />
+                    )}
+                </div>
+
+                <div>{children}</div>
             </div>
 
-            <div className="flex-grow space-y-2">{children}</div>
-            {footer}
+            <div className={clsx(isStickyFooter && "sticky bottom-0 bg-black")}>{footer}</div>
         </div>
     );
 };
@@ -141,6 +164,8 @@ Sidebar.propTypes = {
     className: PropTypes.string,
     footer: PropTypes.element.isRequired,
     isFixed: PropTypes.bool,
+    isStickyHeader: PropTypes.bool,
+    isStickyFooter: PropTypes.bool,
     onLogoClick: PropTypes.func.isRequired,
     notifications: PropTypes.shape({
         announcements: PropTypes.shape({

diff --git a/src/components/Sidebar/SidebarScroll.module.css b/src/components/Sidebar/SidebarScroll.module.css
@@ -0,0 +1,3 @@
+::-webkit-scrollbar-thumb {
+    @apply !bg-gray-darker;
+}