Merge pull request #2184 from HarshMN2345/fix-SER-207-fix-settings-not-visible-on-tablet

Author: ItzNotABug

src/lib/components/sidebar.svelte

@@ -124,7 +124,7 @@
                 </Link.Button>
             </div>
         </div>
-        <div slot="middle" class:icons={state === 'icons'}>
+        <div slot="middle" class="middle-container" class:icons={state === 'icons'}>
             {#if progressCard}
                 <Tooltip placement="right" disabled={state !== 'icons'}>
                     <a
@@ -240,26 +240,27 @@
                             <span slot="tooltip">{projectOption.name}</span>
                         </Tooltip>
                     {/each}
-                    <div class="only-mobile divider">
-                        <Divider />
-                    </div>
-                    <div class="only-mobile">
-                        <Tooltip placement="right" disabled={state !== 'icons'}>
-                            <a
-                                href={`/console/project-${project.region}-${project.$id}/settings`}
-                                on:click={() => {
-                                    trackEvent('click_menu_settings');
-                                }}
-                                class="link"
-                                ><span class="link-icon"><Icon icon={IconCog} size="s" /></span
-                                ><span
-                                    class:no-text={state === 'icons'}
-                                    class:has-text={state === 'open'}
-                                    class="link-text">Settings</span
-                                ></a>
-                            <span slot="tooltip">Settings</span>
-                        </Tooltip>
-                    </div>
+                    {#if project}
+                        <div class="mobile-tablet-settings">
+                            <Tooltip placement="right" disabled={state !== 'icons'}>
+                                <a
+                                    href={`/console/project-${project.region}-${project.$id}/settings`}
+                                    on:click={() => {
+                                        trackEvent('click_menu_settings');
+                                        sideBarIsOpen = false;
+                                    }}
+                                    class="link"
+                                    class:active={isSelected('/settings') && !isSelected('sites')}
+                                    ><span class="link-icon"><Icon icon={IconCog} size="s" /></span
+                                    ><span
+                                        class:no-text={state === 'icons'}
+                                        class:has-text={state === 'open'}
+                                        class="link-text">Settings</span
+                                    ></a>
+                                <span slot="tooltip">Settings</span>
+                            </Tooltip>
+                        </div>
+                    {/if}
                 </Layout.Stack>
             {:else if $isSmallViewport}
                 <div class="action-buttons">
@@ -359,6 +360,29 @@
 {/if}
 
 <style lang="scss">
+    .middle-container {
+        flex: 1;
+        overflow-y: visible;
+        max-height: none;
+    }
+
+    .mobile-tablet-settings {
+        display: block;
+        margin-top: var(--space-6, 12px);
+
+        &::before {
+            content: '';
+            display: block;
+            height: 1px;
+            background: var(--border-neutral, #ededf0);
+            margin-bottom: var(--space-6, 12px);
+        }
+
+        @media (min-width: 1024px) {
+            display: none;
+        }
+    }
+
     .link {
         display: flex;
         height: 32px;
@@ -578,12 +602,6 @@
         width: 100%;
     }
 
-    .bottom {
-        @media (min-width: 1024px) {
-            height: var(--base-32, 32px);
-        }
-    }
-
     :global(button.collapse) {
         transform: translateX(-10px);
     }