Merge pull request #21 from charangirijala/darkmode

Dark mode impl-2 🌘

src/modules/my/app/app.css

@@ -20,6 +20,9 @@
 .first-header.hidden {
     opacity: 0;
     transform: translateY(-50px); /* Slide up */
+    transition:
+        opacity 0.3s ease,
+        transform 0.3s ease;
 }
 
 /* Second Header */
@@ -30,16 +33,16 @@
     width: 100%;
     justify-content: space-between;
     align-items: center;
-    background-color: #1b96ff;
-    color: var(--text-color-base);
+    background-color: var(--slds-g-color-neutral-base-100);
     /* padding: 10px 20px; */
     z-index: 999;
     height: 40px; /* Fixed height */
-    transition: top 0.3s ease; /* Smooth transition for position change */
+    transition: top 0.3s ease opacity 0.3s ease; /* Smooth transition for top and opacity */
 }
 
 .second-header.move-to-top {
     top: 0; /* Move to the top when the first header is hidden */
+    opacity: 1;
 }
 
 /* Content Section */
@@ -72,3 +75,98 @@
         opacity: 1;
     }
 }
+
+/* Logo Animation */
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    transition:
+        transform 0.3s ease,
+        opacity 0.3s ease;
+}
+
+.move-to-second-header {
+    animation: moveLogoToSecondHeader 0.5s ease forwards;
+}
+
+@keyframes moveLogoToSecondHeader {
+    from {
+        transform: translateY(-50px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Second Header */
+.second-header {
+    position: fixed;
+    top: 50px;
+    left: 0;
+    width: 100%;
+    background-color: var(--slds-g-color-neutral-base-100);
+    border-bottom: 3px solid #1b96ff;
+    z-index: 999;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start; /* Align content to the left */
+    padding: 0 20px; /* Add padding for spacing */
+    transition: top 0.3s ease;
+}
+
+.second-header-content {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem; /* Spacing between logo and navigation */
+}
+
+/* Logo Styling */
+.logo-container img {
+    height: 22px; /* Adjust size of the logo */
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.logo-container {
+    display: none;
+}
+/* Navigation Styling */
+my-app-navigation {
+    display: flex;
+    align-items: center;
+    transition:
+        transform 0.3s ease,
+        opacity 0.3s ease; /* Smooth transform and opacity */
+}
+
+.logo {
+    transition:
+        transform 0.3s ease,
+        opacity 0.3s ease;
+}
+
+.logo-container {
+    transition:
+        opacity 0.3s ease,
+        transform 0.3s ease;
+}
+
+@keyframes smoothSlide {
+    from {
+        transform: translateY(-10px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.logo-container,
+my-app-navigation {
+    animation: smoothSlide 0.3s ease forwards;
+}

src/modules/my/app/app.html

@@ -1,10 +1,27 @@
 <template>
     <div class="first-header">
-        <my-app-header></my-app-header>
+        <div class="logo first-header-logo">
+            <img
+                src="https://res.cloudinary.com/dxnxpimpv/image/upload/v1735788146/DebugForce_rpqubu.svg"
+                alt="Logo"
+                style="height: 22px"
+            />
+        </div>
+        <my-app-header theme={theme}></my-app-header>
     </div>
     <div class="second-header">
-        <my-app-navigation></my-app-navigation>
+        <div class="second-header-content">
+            <div class="logo-container">
+                <img
+                    class="logo move-to-second-header"
+                    src="https://res.cloudinary.com/dxnxpimpv/image/upload/v1735788146/DebugForce_rpqubu.svg"
+                    alt="Logo"
+                />
+            </div>
+            <my-app-navigation></my-app-navigation>
+        </div>
     </div>
+
     <div class="content">
         <my-app-content></my-app-content>
     </div>

src/modules/my/app/app.js

@@ -1,61 +1,31 @@
 import { LightningElement } from 'lwc';
 import { initTheme } from 'services/theme';
-
 export default class App extends LightningElement {
+    theme;
     connectedCallback() {
-        initTheme();
-        // window.addEventListener('scroll', this.handleScroll);
+        this.theme = initTheme();
+        window.addEventListener('scroll', this.handleScroll);
     }
-
     disconnectedCallback() {
-        // window.removeEventListener('scroll', this.handleScroll);
+        window.removeEventListener('scroll', this.handleScroll);
     }
 
     handleScroll = () => {
         const firstHeader = this.template.querySelector('.first-header');
         const secondHeader = this.template.querySelector('.second-header');
-
-        const firstHeaderLogo =
-            this.template.querySelector('#first-header-logo');
-        const secondHeaderLogoContainer = this.template.querySelector(
-            '#second-header-logo'
-        );
-        console.log(
-            'headers: ',
-            firstHeader,
-            '2nd: ',
-            secondHeader,
-            '1st logo: ',
-            firstHeaderLogo,
-            ' 2nd logo: ',
-            secondHeaderLogoContainer
-        );
-        if (firstHeader && secondHeader) {
-            console.log('scroll: ', window.scrollY);
+        const logoContainer = this.template.querySelector('.logo-container');
+        const content = this.template.querySelector('.content');
+        if (firstHeader && secondHeader && logoContainer && content) {
             if (window.scrollY > 0) {
-                // Hide the first header
+                this.headerMinimized = true;
                 firstHeader.classList.add('hidden');
-
-                // Move the second header to the top
                 secondHeader.classList.add('move-to-top');
-
-                // // Move the logo to the second header
-                // if (!secondHeaderLogoContainer.querySelector('.logo')) {
-                //     const clonedLogo = firstHeaderLogo.cloneNode(true);
-                //     clonedLogo.classList.add('move-to-second-header'); // Add animation class
-                //     secondHeaderLogoContainer.appendChild(clonedLogo);
-                //}
+                logoContainer.style.display = 'inline-block';
             } else {
-                // Show the first header
+                this.headerMinimized = false;
                 firstHeader.classList.remove('hidden');
-
-                // Move the second header back to its default position
                 secondHeader.classList.remove('move-to-top');
-
-                // Remove the logo from the second header
-                // if (secondHeaderLogoContainer.querySelector('.logo')) {
-                //     secondHeaderLogoContainer.innerHTML = '';
-                // }
+                logoContainer.style.display = 'none';
             }
         }
     };

src/modules/my/appHeader/appHeader.css

@@ -9,9 +9,32 @@
     align-items: center;
     border-bottom: none;
 }
+.navLeft {
+    display: flex;
+}
 
 .navRight {
     display: flex;
     align-items: center;
-    justify-content: end;
+    justify-content: flex-end; /* Ensures the content is pushed to the right */
+    gap: 0.75rem; /* Adds spacing between the links */
+    margin-left: auto; /* Pushes the navRight to the far right */
+}
+
+.first-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between; /* Ensures proper alignment of left and right elements */
+    align-items: center;
+    background-color: var(--slds-g-color-neutral-base-100);
+    color: var(--text-color-base);
+    padding: 10px 20px;
+    z-index: 1000;
+    height: 50px; /* Fixed height */
+    transition:
+        opacity 0.3s ease,
+        transform 0.3s ease;
 }

src/modules/my/appHeader/appHeader.html

@@ -1,32 +1,49 @@
 <template>
-    <div class="slds-no-print">
-        <div class="slds-context-bar mainHeader">
-            <div class="slds-context-bar__primary navLeft">
-                <img
-                    src="https://res.cloudinary.com/dxnxpimpv/image/upload/v1735788146/DebugForce_rpqubu.svg"
-                    class="slds-m-right_medium"
-                    style="height: 22px"
-                    alt=""
-                />
-                <h1
-                    class="appName slds-context-bar__label-action slds-context-bar__app-name"
-                >
-                    <span class="slds-truncate">DebugForce</span>
-                </h1>
-            </div>
-            <div class="navRight">
-                <a href="#">Changelog</a>
-                <a href="#">Docs</a>
-                <button
-                    class="slds-button slds-button_icon-border action-bar-action-searchTable reportAction report-action-searchTable filtersButton"
-                    type="button"
-                    lwc-4330t3iuo3k=""
-                >
+    <div class="first-header">
+        <div class="navLeft">
+            <img
+                src="https://res.cloudinary.com/dxnxpimpv/image/upload/v1735788146/DebugForce_rpqubu.svg"
+                class="slds-m-right_medium"
+                style="height: 22px"
+                alt="DebugForce Logo"
+            />
+            <h1
+                class="appName slds-context-bar__label-action slds-context-bar__app-name"
+            >
+                <span class="slds-truncate">DebugForce</span>
+            </h1>
+        </div>
+        <div class="navRight">
+            <a href="#">Changelog</a>
+            <a href="#">Docs</a>
+            <button
+                class="slds-button slds-button_icon-border"
+                type="button"
+                onclick={toggleMode}
+            >
+                <template lwc:if={isDark}>
+                    <svg
+                        height="20"
+                        stroke-linejoin="round"
+                        viewBox="0 0 16 16"
+                        width="20"
+                        style="color: currentcolor"
+                    >
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M10.5 0.25V1V1.5H11L11.75 1.5V3H11H10.5V3.5V4.25H9V3.5V3H8.5H7.75V1.5H8.5H9V1V0.25H10.5ZM3.25514 2.75496C2.33413 3.53491 1.75 4.69972 1.75 6C1.75 8.34721 3.65279 10.25 6 10.25C7.30029 10.25 8.4651 9.66587 9.24505 8.74485C9.16377 8.74827 9.08207 8.74999 9 8.74999C5.82436 8.74999 3.25 6.17563 3.25 2.99999C3.25 2.91792 3.25172 2.83623 3.25514 2.75496ZM0.25 6C0.25 3.51072 1.83142 1.39271 4.042 0.592193L5.00256 1.55275C4.83933 2.00347 4.75 2.49047 4.75 2.99999C4.75 5.3472 6.65279 7.24999 9 7.24999C9.50953 7.24999 9.99653 7.16065 10.4473 6.99743L11.4078 7.95798C10.6073 10.1686 8.48929 11.75 6 11.75C2.82436 11.75 0.25 9.17564 0.25 6Z"
+                            fill="currentColor"
+                            transform="translate(2.25, 2.25)"
+                        ></path>
+                    </svg>
+                </template>
+                <template lwc:else>
                     <svg
-                        height="16"
+                        height="20"
                         stroke-linejoin="round"
                         viewBox="0 0 16 16"
-                        width="16"
+                        width="20"
                         style="color: currentcolor"
                     >
                         <path
@@ -37,15 +54,15 @@
                             transform="translate(1.25, 1.25)"
                         ></path>
                     </svg>
-                </button>
-                <span class="slds-avatar slds-avatar_circle">
-                    <abbr
-                        class="slds-avatar__initials slds-avatar__initials_inverse"
-                        title="Person name"
-                        >AB</abbr
-                    >
-                </span>
-            </div>
+                </template>
+            </button>
+            <span class="slds-avatar slds-avatar_circle">
+                <abbr
+                    class="slds-avatar__initials slds-avatar__initials_inverse"
+                    title="Charan Girijala"
+                    >CG</abbr
+                >
+            </span>
         </div>
     </div>
 </template>

src/modules/my/appHeader/appHeader.js

@@ -1,3 +1,17 @@
-import { LightningElement } from 'lwc';
+import { LightningElement, api } from 'lwc';
+import { applyTheme, saveThemePreference } from 'services/theme';
 
-export default class AppHeader extends LightningElement {}
+export default class AppHeader extends LightningElement {
+    @api theme;
+    isDark = false;
+    connectedCallback() {
+        this.isDark = this.theme === 'dark' ? true : false;
+    }
+    toggleMode() {
+        this.isDark = !this.isDark;
+        const theme = this.isDark ? 'dark' : 'light';
+        console.log('theme: ', theme);
+        applyTheme(theme);
+        saveThemePreference(theme);
+    }
+}

src/modules/my/appNavigation/appNavigation.css

@@ -18,3 +18,13 @@ a:hover {
     width: 100%;
     z-index: 1000;
 }
+
+.bar-styles {
+    padding: 0px;
+    height: 37px;
+    border-bottom: none;
+}
+
+.slds-context-bar__item:not(.slds-no-hover):hover:after {
+    background: none;
+}