btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: improve the mobile layout. (#2153)

Browse Source 
Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
This commit is contained in:
Joel Jacob Stephen
2022-03-21 07:45:10 +05:30
committed by GitHub
parent 376303dd5d
commit d4540a56b9
16 changed files with 118 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/hoppscotch-app/assets/scss/themes.scss
View File

@@ -249,6 +249,11 @@
--upper-primary-sticky-fold: 4.125rem; --upper-primary-sticky-fold: 4.125rem;
--upper-secondary-sticky-fold: 6.125rem; --upper-secondary-sticky-fold: 6.125rem;
--upper-tertiary-sticky-fold: 8.188rem; --upper-tertiary-sticky-fold: 8.188rem;
--upper-mobile-primary-sticky-fold: 6.625rem;
--upper-mobile-secondary-sticky-fold: 8.625rem;
--upper-mobile-tertiary-sticky-fold: 10.625rem;
--upper-mobile-raw-sticky-fold: 10.675rem;
--upper-mobile-raw-tertiary-sticky-fold: 8.188rem;
--lower-primary-sticky-fold: 3rem; --lower-primary-sticky-fold: 3rem;
--lower-secondary-sticky-fold: 5rem; --lower-secondary-sticky-fold: 5rem;
--sidebar-primary-sticky-fold: 2rem; --sidebar-primary-sticky-fold: 2rem;
@@ -261,6 +266,11 @@
--upper-primary-sticky-fold: 4.375rem; --upper-primary-sticky-fold: 4.375rem;
--upper-secondary-sticky-fold: 6.625rem; --upper-secondary-sticky-fold: 6.625rem;
--upper-tertiary-sticky-fold: 8.813rem; --upper-tertiary-sticky-fold: 8.813rem;
--upper-mobile-primary-sticky-fold: 7.125rem;
--upper-mobile-secondary-sticky-fold: 9.375rem;
--upper-mobile-tertiary-sticky-fold: 10.875rem;
--upper-mobile-raw-sticky-fold: 11.695rem;
--upper-mobile-raw-tertiary-sticky-fold: 8.925rem;
--lower-primary-sticky-fold: 3.25rem; --lower-primary-sticky-fold: 3.25rem;
--lower-secondary-sticky-fold: 5.5rem; --lower-secondary-sticky-fold: 5.5rem;
--sidebar-primary-sticky-fold: 2.25rem; --sidebar-primary-sticky-fold: 2.25rem;
@@ -273,6 +283,11 @@
--upper-primary-sticky-fold: 4.625rem; --upper-primary-sticky-fold: 4.625rem;
--upper-secondary-sticky-fold: 7.125rem; --upper-secondary-sticky-fold: 7.125rem;
--upper-tertiary-sticky-fold: 9.5rem; --upper-tertiary-sticky-fold: 9.5rem;
--upper-mobile-primary-sticky-fold: 7.625rem;
--upper-mobile-secondary-sticky-fold: 10.125rem;
--upper-mobile-tertiary-sticky-fold: 11.375rem;
--upper-mobile-raw-sticky-fold: 12.695rem;
--upper-mobile-raw-tertiary-sticky-fold: 9.7rem;
--lower-primary-sticky-fold: 3.5rem; --lower-primary-sticky-fold: 3.5rem;
--lower-secondary-sticky-fold: 6rem; --lower-secondary-sticky-fold: 6rem;
--sidebar-primary-sticky-fold: 2.5rem; --sidebar-primary-sticky-fold: 2.5rem;

4
packages/hoppscotch-app/components/app/Footer.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div> <div class="bg-primary">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex"> <div class="flex">
<ButtonSecondary <ButtonSecondary
@@ -166,7 +166,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')" :title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
svg="columns" svg="columns"
class="transform" class="transform hidden sm:inline"
:class="{ 'rotate-90': !COLUMN_LAYOUT }" :class="{ 'rotate-90': !COLUMN_LAYOUT }"
@click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT" @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
/> />

1
packages/hoppscotch-app/components/app/Sidenav.vue
View File

@@ -71,6 +71,7 @@ const primaryNavigation = [
@apply flex flex-col flex-1; @apply flex flex-col flex-1;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply bg-primary;
@apply hover:(bg-primaryDark text-secondaryDark); @apply hover:(bg-primaryDark text-secondaryDark);
@apply focus-visible:text-secondaryDark; @apply focus-visible:text-secondaryDark;

23
packages/hoppscotch-app/components/http/Authorization.vue
View File

@@ -1,12 +1,12 @@
<template> <template>
<div class="flex flex-col flex-1"> <div class="flex flex-col flex-1">
<div <div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
> >
<span class="flex items-center"> <span class="flex items-center">
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">{{
{{ $t("authorization.type") }} $t("authorization.type")
</label> }}</label>
<tippy <tippy
ref="authTypeOptions" ref="authTypeOptions"
interactive interactive
@@ -107,14 +107,13 @@
@change="setExclude('auth', !$event)" @change="setExclude('auth', !$event)"
> >
{{ $t("authorization.include_in_url") }} {{ $t("authorization.include_in_url") }}
</SmartCheckbox> --> </SmartCheckbox>-->
<SmartCheckbox <SmartCheckbox
:on="authActive" :on="authActive"
class="px-2" class="px-2"
@change="authActive = !authActive" @change="authActive = !authActive"
>{{ $t("state.enabled") }}</SmartCheckbox
> >
{{ $t("state.enabled") }}
</SmartCheckbox>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/authorization" to="https://docs.hoppscotch.io/features/authorization"
@@ -140,9 +139,7 @@
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${$t('empty.authorization')}`" :alt="`${$t('empty.authorization')}`"
/> />
<span class="pb-4 text-center"> <span class="pb-4 text-center">{{ $t("empty.authorization") }}</span>
{{ $t("empty.authorization") }}
</span>
<ButtonSecondary <ButtonSecondary
outline outline
:label="$t('app.documentation')" :label="$t('app.documentation')"
@@ -188,9 +185,9 @@
<SmartEnvInput v-model="apiValue" placeholder="Value" /> <SmartEnvInput v-model="apiValue" placeholder="Value" />
</div> </div>
<div class="flex items-center border-b border-dividerLight"> <div class="flex items-center border-b border-dividerLight">
<label class="ml-4 text-secondaryLight"> <label class="ml-4 text-secondaryLight">{{
{{ $t("authorization.pass_key_by") }} $t("authorization.pass_key_by")
</label> }}</label>
<tippy <tippy
ref="addToOptions" ref="addToOptions"
interactive interactive

6
packages/hoppscotch-app/components/http/Body.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col flex-1"> <div class="flex flex-col flex-1">
<div <div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
> >
<span class="flex items-center"> <span class="flex items-center">
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
@@ -66,9 +66,7 @@
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${$t('empty.body')}`" :alt="`${$t('empty.body')}`"
/> />
<span class="pb-4 text-center"> <span class="pb-4 text-center">{{ $t("empty.body") }}</span>
{{ $t("empty.body") }}
</span>
<ButtonSecondary <ButtonSecondary
outline outline
:label="`${$t('app.documentation')}`" :label="`${$t('app.documentation')}`"

9
packages/hoppscotch-app/components/http/BodyParameters.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileRawStickyFold sm:top-upperMobileRawTertiaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ $t("request.body") }} {{ $t("request.body") }}
@@ -50,9 +50,8 @@
<SmartFileChip <SmartFileChip
v-for="(file, fileIndex) in param.value" v-for="(file, fileIndex) in param.value"
:key="`param-${index}-file-${fileIndex}`" :key="`param-${index}-file-${fileIndex}`"
>{{ file.name }}</SmartFileChip
> >
{{ file.name }}
</SmartFileChip>
</div> </div>
</div> </div>
<span v-else class="flex flex-1"> <span v-else class="flex flex-1">
@@ -130,9 +129,7 @@
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${$t('empty.body')}`" :alt="`${$t('empty.body')}`"
/> />
<span class="pb-4 text-center"> <span class="pb-4 text-center">{{ $t("empty.body") }}</span>
{{ $t("empty.body") }}
</span>
<ButtonSecondary <ButtonSecondary
:label="`${$t('add.new')}`" :label="`${$t('add.new')}`"
filled filled

12
packages/hoppscotch-app/components/http/Headers.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<div class="flex flex-col flex-1"> <div class="flex flex-col flex-1">
<div <div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">{{
{{ t("request.header_list") }} t("request.header_list")
</label> }}</label>
<div class="flex"> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -127,9 +127,7 @@
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.headers')}`" :alt="`${t('empty.headers')}`"
/> />
<span class="pb-4 text-center"> <span class="pb-4 text-center">{{ t("empty.headers") }}</span>
{{ t("empty.headers") }}
</span>
<ButtonSecondary <ButtonSecondary
filled filled
:label="`${t('add.new')}`" :label="`${t('add.new')}`"

6
packages/hoppscotch-app/components/http/Parameters.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col flex-1"> <div class="flex flex-col flex-1">
<div <div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("request.parameter_list") }} {{ t("request.parameter_list") }}
@@ -115,9 +115,7 @@
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.parameters')}`" :alt="`${t('empty.parameters')}`"
/> />
<span class="pb-4 text-center"> <span class="pb-4 text-center">{{ t("empty.parameters") }}</span>
{{ t("empty.parameters") }}
</span>
<ButtonSecondary <ButtonSecondary
:label="`${t('add.new')}`" :label="`${t('add.new')}`"
svg="plus" svg="plus"

8
packages/hoppscotch-app/components/http/PreRequestScript.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<div class="flex flex-col flex-1"> <div class="flex flex-col flex-1">
<div <div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">{{
{{ t("preRequest.javascript_code") }} t("preRequest.javascript_code")
</label> }}</label>
<div class="flex"> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"

2
packages/hoppscotch-app/components/http/RawBody.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col flex-1"> <div class="flex flex-col flex-1">
<div <div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileRawStickyFold sm:top-upperMobileRawTertiaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("request.raw_body") }} {{ t("request.raw_body") }}

13
packages/hoppscotch-app/components/http/Request.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div <div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar" class="sticky top-0 z-10 flex-none sm:flex sm:flex-shrink-0 p-4 overflow-x-auto sm:space-x-2 bg-primary hide-scrollbar"
> >
<div <div
class="flex flex-1 overflow-auto border rounded min-w-52 border-divider whitespace-nowrap hide-scrollbar" class="flex flex-1 overflow-auto border rounded min-w-52 border-divider whitespace-nowrap hide-scrollbar"
@@ -48,7 +48,8 @@
/> />
</div> </div>
</div> </div>
<div class="flex">
<div class="flex mt-2 sm:mt-0">
<ButtonPrimary <ButtonPrimary
id="send" id="send"
class="flex-1 rounded-r-none min-w-20" class="flex-1 rounded-r-none min-w-20"
@@ -117,8 +118,8 @@
</tippy> </tippy>
</span> </span>
<ButtonSecondary <ButtonSecondary
class="ml-2 rounded rounded-r-none" class="flex-1 ml-2 rounded rounded-r-none"
:label="mdAndLarger && COLUMN_LAYOUT ? `${t('request.save')}` : ''" :label="COLUMN_LAYOUT ? `${t('request.save')}` : ''"
filled filled
svg="save" svg="save"
@click.native="saveRequest()" @click.native="saveRequest()"
@@ -207,7 +208,6 @@
import { computed, ref, watch } from "@nuxtjs/composition-api" import { computed, ref, watch } from "@nuxtjs/composition-api"
import { isLeft, isRight } from "fp-ts/lib/Either" import { isLeft, isRight } from "fp-ts/lib/Either"
import * as E from "fp-ts/Either" import * as E from "fp-ts/Either"
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
import { import {
updateRESTResponse, updateRESTResponse,
restEndpoint$, restEndpoint$,
@@ -542,7 +542,4 @@ const isCustomMethod = computed(() => {
const requestName = useRESTRequestName() const requestName = useRESTRequestName()
const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT") const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndLarger = breakpoints.greater("md")
</script> </script>

4
packages/hoppscotch-app/components/http/RequestOptions.vue
View File

@@ -1,5 +1,7 @@
<template> <template>
<SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10"> <SmartTabs
styles="sticky bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
>
<SmartTab <SmartTab
:id="'params'" :id="'params'"
:label="`${$t('tab.parameters')}`" :label="`${$t('tab.parameters')}`"

2
packages/hoppscotch-app/components/http/Tests.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col flex-1"> <div class="flex flex-col flex-1">
<div <div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("test.javascript_code") }} {{ t("test.javascript_code") }}

2
packages/hoppscotch-app/components/http/URLEncodedParams.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col flex-1"> <div class="flex flex-col flex-1">
<div <div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileRawStickyFold sm:top-upperMobileRawTertiaryStickyFold"
> >
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ t("request.body") }} {{ t("request.body") }}

59
packages/hoppscotch-app/layouts/default.vue
View File

@@ -4,7 +4,10 @@
<Pane v-if="!ZEN_MODE" style="height: auto"> <Pane v-if="!ZEN_MODE" style="height: auto">
<AppHeader /> <AppHeader />
</Pane> </Pane>
<Pane class="flex flex-1 hide-scrollbar !overflow-auto"> <Pane
:class="spacerClass"
class="flex flex-1 hide-scrollbar !overflow-auto md:mb-0"
>
<Splitpanes <Splitpanes
class="no-splitter" class="no-splitter"
:dbl-click-splitter="false" :dbl-click-splitter="false"
@@ -12,7 +15,7 @@
> >
<Pane <Pane
style="width: auto; height: auto" style="width: auto; height: auto"
class="hide-scrollbar !overflow-auto flex flex-col" class="hide-scrollbar !overflow-auto hidden md:flex md:flex-col"
> >
<AppSidenav /> <AppSidenav />
</Pane> </Pane>
@@ -31,7 +34,15 @@
</Pane> </Pane>
</Splitpanes> </Splitpanes>
</Pane> </Pane>
<Pane style="height: auto">
<Pane
style="height: auto"
class="hide-scrollbar !overflow-auto flex flex-col md:hidden block fixed inset-x-0 bottom-0 z-10"
>
<AppSidenav />
<AppFooter />
</Pane>
<Pane style="height: auto" class="hidden md:inline-block">
<AppFooter /> <AppFooter />
</Pane> </Pane>
</Splitpanes> </Splitpanes>
@@ -41,6 +52,7 @@
<script lang="ts"> <script lang="ts">
import { import {
defineComponent, defineComponent,
computed,
onBeforeMount, onBeforeMount,
useContext, useContext,
useRouter, useRouter,
@@ -108,6 +120,12 @@ function updateThemes() {
const bgColor = useSetting("BG_COLOR") const bgColor = useSetting("BG_COLOR")
const fontSize = useSetting("FONT_SIZE") const fontSize = useSetting("FONT_SIZE")
const spacerClass = computed(() => {
if (fontSize.value === "small") return "spacer-small"
if (fontSize.value === "large") return "spacer-large"
return "spacer-medium"
})
// Initially apply // Initially apply
onBeforeMount(() => { onBeforeMount(() => {
document.documentElement.setAttribute("data-accent", themeColor.value) document.documentElement.setAttribute("data-accent", themeColor.value)
@@ -123,6 +141,10 @@ function updateThemes() {
watch(fontSize, () => watch(fontSize, () =>
document.documentElement.setAttribute("data-font-size", fontSize.value) document.documentElement.setAttribute("data-font-size", fontSize.value)
) )
return {
spacerClass,
}
} }
function defineJumpActions() { function defineJumpActions() {
@@ -170,7 +192,7 @@ export default defineComponent({
defineJumpActions() defineJumpActions()
updateThemes() const { spacerClass } = updateThemes()
setupSentry() setupSentry()
@@ -179,6 +201,7 @@ export default defineComponent({
return { return {
mdAndLarger, mdAndLarger,
spacerClass,
ZEN_MODE: useSetting("ZEN_MODE"), ZEN_MODE: useSetting("ZEN_MODE"),
} }
}, },
@@ -236,3 +259,31 @@ export default defineComponent({
}, },
}) })
</script> </script>
<style scoped>
.spacer-small {
margin-bottom: 6.1rem;
}
.spacer-medium {
margin-bottom: 6.9rem;
}
.spacer-large {
margin-bottom: 7.8rem;
}
@media screen and (min-width: 768px) {
.spacer-small {
margin-bottom: 0rem;
}
.spacer-medium {
margin-bottom: 0rem;
}
.spacer-large {
margin-bottom: 0rem;
}
}
</style>

8
packages/hoppscotch-app/windi.config.js
View File

@@ -10,6 +10,14 @@ export default defineConfig({
upperPrimaryStickyFold: "var(--upper-primary-sticky-fold)", upperPrimaryStickyFold: "var(--upper-primary-sticky-fold)",
upperSecondaryStickyFold: "var(--upper-secondary-sticky-fold)", upperSecondaryStickyFold: "var(--upper-secondary-sticky-fold)",
upperTertiaryStickyFold: "var(--upper-tertiary-sticky-fold)", upperTertiaryStickyFold: "var(--upper-tertiary-sticky-fold)",
upperMobilePrimaryStickyFold: "var(--upper-mobile-primary-sticky-fold)",
upperMobileSecondaryStickyFold:
"var(--upper-mobile-secondary-sticky-fold)",
upperMobileTertiaryStickyFold:
"var(--upper-mobile-tertiary-sticky-fold)",
upperMobileRawStickyFold: "var(--upper-mobile-raw-sticky-fold)",
upperMobileRawTertiaryStickyFold:
"var(--upper-mobile-raw-tertiary-sticky-fold)",
lowerPrimaryStickyFold: "var(--lower-primary-sticky-fold)", lowerPrimaryStickyFold: "var(--lower-primary-sticky-fold)",
lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)", lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)",
sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)", sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",