ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve UX of sidebar

Browse Source
This commit is contained in:
Rotimi Best
2023-08-07 11:24:48 +01:00
parent 8465ba5371
commit b14d66cf3b
2 changed files with 22 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Org/SideBar.svelte
+2 -2
View File
@@ -104,7 +104,7 @@
<ul class="my-5 pb-5 px-4"> <ul class="my-5 pb-5 px-4">
<a href={$currentOrgPath} class="text-black no-underline"> <a href={$currentOrgPath} class="text-black no-underline">
<li <li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500" class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800"
> >
<HelpIcon size={20} class="carbon-icon dark:text-white" /> <HelpIcon size={20} class="carbon-icon dark:text-white" />
<p class="dark:text-white ml-2">Help</p> <p class="dark:text-white ml-2">Help</p>
@@ -112,7 +112,7 @@
</a> </a>
<a href="{$currentOrgPath}/settings" class="text-black no-underline"> <a href="{$currentOrgPath}/settings" class="text-black no-underline">
<li <li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive( class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800 {isActive(
$page.url.pathname, $page.url.pathname,
`${$currentOrgPath}/settings` `${$currentOrgPath}/settings`
) && activeClass}" ) && activeClass}"
src/lib/components/OrgSelector/OrgSelector.svelte
+20 -13
View File
@@ -1,5 +1,5 @@
<script> <script>
import { Popover } from 'carbon-components-svelte'; import { Popover, SkeletonText } from 'carbon-components-svelte';
import CaretSortIcon from 'carbon-icons-svelte/lib/CaretSort.svelte'; import CaretSortIcon from 'carbon-icons-svelte/lib/CaretSort.svelte';
import OrgSelectorItem from './OrgSelectorItem.svelte'; import OrgSelectorItem from './OrgSelectorItem.svelte';
import Modal from '../Modal/index.svelte'; import Modal from '../Modal/index.svelte';
@@ -26,18 +26,25 @@
</script> </script>
<div class="mt-5 relative" data-outline> <div class="mt-5 relative" data-outline>
<button {#if $currentOrg.name}
class="flex items-center cursor-pointer max-w-[219px]" <button
on:click={(e) => { class="flex items-center cursor-pointer max-w-[219px]"
e.stopPropagation(); on:click={(e) => {
open = !open; e.stopPropagation();
}} open = !open;
> }}
<p class="dark:text-white text-lg font-bold whitespace-nowrap truncate"> >
{$currentOrg.name} <p class="dark:text-white text-lg font-bold whitespace-nowrap truncate">
</p> {$currentOrg.name}
<CaretSortIcon size={16} class="ml-2" /> </p>
</button> <CaretSortIcon size={16} class="ml-2" />
</button>
{:else}
<div class="w-[219px] h-[30px]">
<SkeletonText style="width: 100%; height: 100%;" />
</div>
{/if}
<Popover bind:open closeOnOutsideClick align="bottom-left"> <Popover bind:open closeOnOutsideClick align="bottom-left">
<OrgSelectorItem <OrgSelectorItem
size="sm" size="sm"