fix: changed sidebar/body bg color and changed tab active color to black
This commit is contained in:
parent
dbaccdf238
commit
f95d17dca5
@ -7,8 +7,8 @@
|
|||||||
<NavLinks
|
<NavLinks
|
||||||
:links="navigations"
|
:links="navigations"
|
||||||
class="flex items-center rounded px-2 py-1 text-gray-800 transition-all duration-300 ease-in-out"
|
class="flex items-center rounded px-2 py-1 text-gray-800 transition-all duration-300 ease-in-out"
|
||||||
active="bg-gray-100 hover:bg-gray-200"
|
active="bg-white shadow-sm"
|
||||||
inactive="hover:bg-gray-50"
|
inactive="hover:bg-gray-100"
|
||||||
>
|
>
|
||||||
<template v-slot="{ link }">
|
<template v-slot="{ link }">
|
||||||
<div class="flex w-full items-center space-x-2">
|
<div class="flex w-full items-center space-x-2">
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex h-screen w-screen">
|
<div class="flex h-screen w-screen">
|
||||||
<div class="h-full border-r w-[220px]">
|
<div class="h-full border-r bg-gray-50 w-[220px]">
|
||||||
<AppSidebar />
|
<AppSidebar />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 flex flex-col h-full overflow-auto">
|
<div class="flex-1 flex flex-col h-full overflow-auto">
|
||||||
@ -9,5 +9,5 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import AppSidebar from './AppSidebar.vue'
|
import AppSidebar from '@/components/AppSidebar.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -73,15 +73,15 @@
|
|||||||
</Tab>
|
</Tab>
|
||||||
<div
|
<div
|
||||||
ref="indicator"
|
ref="indicator"
|
||||||
class="h-[1px] bg-blue-500 w-[82px] absolute -bottom-[1px]"
|
class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
|
||||||
:style="{ left: `${indicatorLeftValue}px` }"
|
:style="{ left: `${indicatorLeftValue}px` }"
|
||||||
/>
|
/>
|
||||||
</TabList>
|
</TabList>
|
||||||
<TabPanels class="flex h-full bg-gray-50">
|
<TabPanels class="flex h-full">
|
||||||
<TabPanel class="flex-1" v-for="tab in tabs" :key="tab.label">
|
<TabPanel class="flex-1" v-for="tab in tabs" :key="tab.label">
|
||||||
<Activities :activities="tab.content" />
|
<Activities :activities="tab.content" />
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<div class="flex flex-col gap-6.5 border-l px-6 py-3 w-[390px] bg-white">
|
<div class="flex flex-col gap-6.5 border-l px-6 py-3 w-[390px]">
|
||||||
<div
|
<div
|
||||||
v-for="section in detailSections"
|
v-for="section in detailSections"
|
||||||
:key="section.label"
|
:key="section.label"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user