Skip to content

Commit

Permalink
moves top bar and main menu to docs/layout.svelte
Browse files Browse the repository at this point in the history
  • Loading branch information
@sdwalker62
sdwalker62 committed May 13, 2024
1 parent 4dfcd45 commit f433966
Show file tree
Hide file tree
Showing 2 changed files with 275 additions and 257 deletions.
269 changes: 12 additions & 257 deletions frontend/src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,12 @@
<script lang="ts">
import { beforeUpdate } from 'svelte';
import {
colorTheme,
showMainMenu,
showCodeOutlineElements,
showMathOutlineElements,
showTableOutlineElements,
leftPanelActive,
rightPanelActive,
libraryVisible,
serverVisible
colorTheme
} from '$lib/data/shared.js';
import MainModalMenu from '$lib/components/MainModalMenu/MainModalMenu.svelte';
import SiteNavigationLink from '$lib/components/MainModalMenu/SiteNavigationLink.svelte';
import ExternalNavigationLink from '$lib/components/MainModalMenu/ExternalNavigationLink.svelte';
import TopBar from '$lib/components/TopMenuBar/TopBar.svelte';
import ToggleMenuItem from '$lib/components/TopMenuBar/ToggleMenuItem.svelte';
import ActionMenuItem from '$lib/components/TopMenuBar/ActionMenuItem.svelte';
import Cookies from 'js-cookie';
import LeftPanelIcon from '$lib/assets/icons/LeftPanelIcon.svelte';
// import ServerIcon from '$lib/assets/icons/ServerIcon.svelte';
import DriveIcon from '$lib/assets/icons/DriveIcon.svelte';
import CodeIcon from '$lib/assets/icons/CodeIcon.svelte';
import MathIcon from '$lib/assets/icons/MathIcon.svelte';
import TableIcon from '$lib/assets/icons/TableIcon.svelte';
import RightPanelIcon from '$lib/assets/icons/RightPanelIcon.svelte';
import MenuIcon from '$lib/assets/icons/MenuIcon.svelte';
// import DecreaseFontIcon from '$lib/assets/icons/DecreaseFontIcon.svelte';
// import IncreaseFontIcon from '$lib/assets/icons/IncreaseFontIcon.svelte';
import HomeIcon from '$lib/assets/icons/HomeIcon.svelte';
import LibraryIcon from '$lib/assets/icons/LibraryIcon.svelte';
import LibraryIcon2 from '$lib/assets/icons/LibraryIcon2.svelte';
import WhiteboardIcon from '$lib/assets/icons/WhiteboardIcon.svelte';
// import Cookie from 'js-cookie';
// import type { LayoutData } from './$types';
import { page } from '$app/stores';
export let data;
$colorTheme = data.colorMode;
$showCodeOutlineElements = data.showCodeOutlineElements;
$showMathOutlineElements = data.showMathOutlineElements;
$showTableOutlineElements = data.showTableOutlineElements;
$leftPanelActive = data.leftPanelActive;
$rightPanelActive = data.rightPanelActive;
let folderActive = true;
// let serverActive = false;
let pageHome = false;
let pageDocs = false;
let pageBoard = false;
let showOutLineButtons = true;
if ($page.url.pathname.endsWith('.pdf')) {
Expand All @@ -61,225 +17,24 @@
document.documentElement.setAttribute('data-theme', $colorTheme);
});
$: renderMenu = $showMainMenu;
</script>

<main>
<TopBar>
<svelte:fragment slot="left-cluster">
<ToggleMenuItem
tip="Toggle Left Panel"
active={$leftPanelActive}
onClickFunction={() => {
$leftPanelActive = !$leftPanelActive;
Cookies.set('leftPanelActive', $leftPanelActive ? 'true' : 'false');
}}
>
<LeftPanelIcon active={$leftPanelActive} />
</ToggleMenuItem>
<ToggleMenuItem
tip="Library"
active={$libraryVisible}
onClickFunction={() => {
$libraryVisible = !$libraryVisible;
$serverVisible = !$serverVisible;
}}
>
<LibraryIcon active={$libraryVisible} />
</ToggleMenuItem>
<ToggleMenuItem
tip="Remote Servers"
active={$serverVisible}
onClickFunction={() => {
$libraryVisible = !$libraryVisible;
$serverVisible = !$serverVisible;
}}
>
<DriveIcon active={$serverVisible} />
</ToggleMenuItem>
<!-- <ToggleMenuItem active={serverActive}>
<ServerIcon active={serverActive} />
</ToggleMenuItem> -->
</svelte:fragment>

<svelte:fragment slot="left-search">
<ActionMenuItem
tip="Main Menu"
onClickFunction={() => {
$showMainMenu = true;
}}
>
<MenuIcon />
</ActionMenuItem>
</svelte:fragment>

<svelte:fragment slot="right-search">
<!-- <ActionMenuItem tip="Decrease Document Font Size">
<DecreaseFontIcon />
</ActionMenuItem>
<ActionMenuItem tip="Increase Document Font Size">
<IncreaseFontIcon />
</ActionMenuItem> -->
</svelte:fragment>

<svelte:fragment slot="right-cluster">
{#if showOutLineButtons}
<ToggleMenuItem
tip="Toggle Code Blocks"
active={$showCodeOutlineElements}
onClickFunction={() => {
$showCodeOutlineElements = !$showCodeOutlineElements;
Cookies.set(
'showCodeOutlineElements',
$showCodeOutlineElements ? 'true' : 'false'
);
}}
>
<CodeIcon active={$showCodeOutlineElements} />
</ToggleMenuItem>
<ToggleMenuItem
tip="Toggle Math"
active={$showMathOutlineElements}
onClickFunction={() => {
$showMathOutlineElements = !$showMathOutlineElements;
Cookies.set(
'showMathOutlineElements',
$showMathOutlineElements ? 'true' : 'false'
);
}}
>
<MathIcon active={$showMathOutlineElements} />
</ToggleMenuItem>
<ToggleMenuItem
tip="Toggle Table Previews"
active={$showTableOutlineElements}
onClickFunction={() => {
$showTableOutlineElements = !$showTableOutlineElements;
Cookies.set(
'showTableOutlineElements',
$showTableOutlineElements ? 'true' : 'false'
);
}}
>
<TableIcon active={$showTableOutlineElements} />
</ToggleMenuItem>
{/if}
<ToggleMenuItem
tip="Toggle Right Panel"
active={$rightPanelActive}
onClickFunction={() => {
$rightPanelActive = !$rightPanelActive;
Cookies.set('rightPanelActive', $rightPanelActive ? 'true' : 'false');
}}
>
<RightPanelIcon active={$rightPanelActive} />
</ToggleMenuItem>
</svelte:fragment>
</TopBar>
<nav>
<menu>
<menuitem>Home</menuitem>
<menuitem>Docs</menuitem>
<menuitem>Board</menuitem>
</menu>
</nav>

<slot />
</main>

<MainModalMenu bind:renderMenu>
<svelte:fragment slot="site-navigation">
<SiteNavigationLink bind:active={pageHome} link={'/'} name={'Home'}>
<HomeIcon active={pageHome} />
</SiteNavigationLink>
<SiteNavigationLink bind:active={pageDocs} link={'/docs'} name={'Docs'}>
<LibraryIcon2 active={pageDocs} />
</SiteNavigationLink>
<SiteNavigationLink
bind:active={pageBoard}
link={'/whiteboard'}
name={'Board'}
>
<WhiteboardIcon active={pageBoard} />
</SiteNavigationLink>
</svelte:fragment>
<svelte:fragment slot="links">
<ExternalNavigationLink
link={'https://huggingface.co/'}
site={'huggingface.co'}
name={'HuggingFace'}
/>
<ExternalNavigationLink
link={'https://hub.docker.com/'}
site={'docker.com'}
name={'Docker Hub'}
/>
<ExternalNavigationLink
link={'https://pytorch.org/'}
site={'pytorch.org'}
name={'PyTorch'}
/>
<ExternalNavigationLink
link={'https://www.tensorflow.org/'}
site={'tensorflow.org'}
name={'TensorFlow'}
/>
<ExternalNavigationLink
link={'https://jax.readthedocs.io/en/latest/'}
site={'jax.readthedocs.io'}
name={'JAX'}
/>
<ExternalNavigationLink
link={'https://numpy.org/'}
site={'numpy.org'}
name={'NumPy'}
/>
<ExternalNavigationLink
link={'https://pandas.pydata.org/docs/index.html'}
site={'pandas.pydata.org'}
name={'Pandas'}
/>
<ExternalNavigationLink
link={'https://unify.ai/'}
site={'unify.ai'}
name={'Unify'}
/>
<ExternalNavigationLink
link={'https://www.ray.io/'}
site={'ray.io'}
name={'Ray'}
/>
<ExternalNavigationLink
link={'https://www.ultralytics.com/'}
site={'ultralytics.com'}
name={'Ultralytics'}
/>
<ExternalNavigationLink
link={'https://pola.rs/'}
site={'pola.rs'}
name={'Polars'}
/>
<ExternalNavigationLink
link={'https://jupyter.org/'}
site={'jupyter.org'}
name={'Jupyter'}
/>
<ExternalNavigationLink
link={'https://colab.research.google.com/'}
site={'colab.research.google.com'}
name={'Google Colab'}
/>
<ExternalNavigationLink
link={'https://www.paperspace.com/'}
site={'paperspace.com'}
name={'Paperspace'}
/>
<ExternalNavigationLink
link={'https://www.langchain.com/'}
site={'langchain.com'}
name={'LangChain'}
/>
<ExternalNavigationLink
link={'https://milvus.io/'}
site={'milvus.io'}
name={'Milvus'}
/>
</svelte:fragment>
</MainModalMenu>

<style>

<style lang="scss">
main {
background-color: var(--background-2);
overflow: hidden;
Expand Down
Loading

0 comments on commit f433966

Please sign in to comment.