markury/shark
1
0
Fork 0
mirror of https://github.com/markuryy/shark.git synced 2025-12-12 19:51:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: update app branding and add menu bar

Browse Source 
Update app name and branding across config, title bar, and HTML.
Add MenuBar component to layout and improve title bar button styles.
This commit is contained in:
Markury
2025-09-30 12:10:39 -04:00
parent c243aedcd7
commit ec11b18d32
7 changed files with 257 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
src/lib/MenuBar.svelte Normal file
View File

@@ -0,0 +1,231 @@
<script lang="ts">
let activeMenu: string | null = $state(null);
let isAnyMenuOpen = $state(false);
function toggleMenu(menuName: string) {
if (activeMenu === menuName) {
activeMenu = null;
isAnyMenuOpen = false;
} else {
activeMenu = menuName;
isAnyMenuOpen = true;
}
}
function closeMenus() {
activeMenu = null;
isAnyMenuOpen = false;
}
function handleMouseEnter(menuName: string) {
if (isAnyMenuOpen) {
activeMenu = menuName;
}
}
</script>
<svelte:window on:click={closeMenus} />
<nav class="menu-bar">
<div class="menu-item">
<button
class="menu-button"
class:active={activeMenu === "file"}
on:click|stopPropagation={() => toggleMenu("file")}
on:mouseenter={() => handleMouseEnter("file")}
>
<u>F</u>ile
</button>
{#if activeMenu === "file"}
<ul class="menu-dropdown" on:click|stopPropagation>
<li><button disabled>New</button></li>
<li><button disabled>Open...</button></li>
<li><button disabled>Save</button></li>
<li class="separator"></li>
<li><button disabled>Exit</button></li>
</ul>
{/if}
</div>
<div class="menu-item">
<button
class="menu-button"
class:active={activeMenu === "edit"}
on:click|stopPropagation={() => toggleMenu("edit")}
on:mouseenter={() => handleMouseEnter("edit")}
>
<u>E</u>dit
</button>
{#if activeMenu === "edit"}
<ul class="menu-dropdown" on:click|stopPropagation>
<li><button disabled>Undo</button></li>
<li><button disabled>Redo</button></li>
<li class="separator"></li>
<li><button disabled>Cut</button></li>
<li><button disabled>Copy</button></li>
<li><button disabled>Paste</button></li>
</ul>
{/if}
</div>
<div class="menu-item">
<button
class="menu-button"
class:active={activeMenu === "view"}
on:click|stopPropagation={() => toggleMenu("view")}
on:mouseenter={() => handleMouseEnter("view")}
>
<u>V</u>iew
</button>
{#if activeMenu === "view"}
<ul class="menu-dropdown" on:click|stopPropagation>
<li><button disabled>Toolbar</button></li>
<li><button disabled>Status Bar</button></li>
<li class="separator"></li>
<li><button disabled>Refresh</button></li>
</ul>
{/if}
</div>
<div class="menu-item">
<button
class="menu-button"
class:active={activeMenu === "playback"}
on:click|stopPropagation={() => toggleMenu("playback")}
on:mouseenter={() => handleMouseEnter("playback")}
>
<u>P</u>layback
</button>
{#if activeMenu === "playback"}
<ul class="menu-dropdown" on:click|stopPropagation>
<li><button disabled>Play</button></li>
<li><button disabled>Pause</button></li>
<li><button disabled>Stop</button></li>
<li class="separator"></li>
<li><button disabled>Next Track</button></li>
<li><button disabled>Previous Track</button></li>
</ul>
{/if}
</div>
<div class="menu-item">
<button
class="menu-button"
class:active={activeMenu === "help"}
on:click|stopPropagation={() => toggleMenu("help")}
on:mouseenter={() => handleMouseEnter("help")}
>
<u>H</u>elp
</button>
{#if activeMenu === "help"}
<ul class="menu-dropdown" on:click|stopPropagation>
<li><button disabled>Help Topics</button></li>
<li class="separator"></li>
<li><button disabled>About</button></li>
</ul>
{/if}
</div>
</nav>
<style>
.menu-bar {
display: flex;
padding: 2px 4px;
gap: 2px;
user-select: none;
}
.menu-item {
position: relative;
}
.menu-button {
background: transparent;
border: none;
box-shadow: none;
padding: 4px 8px;
min-width: auto;
min-height: auto;
font-family: "Pixelated MS Sans Serif", Arial;
font-size: 11px;
cursor: pointer;
color: light-dark(#222, #ddd);
text-shadow: none;
}
.menu-button:hover,
.menu-button.active {
background: light-dark(silver, #2b2b2b);
box-shadow: inset -1px -1px light-dark(#0a0a0a, #000),
inset 1px 1px light-dark(#fff, #525252),
inset -2px -2px light-dark(grey, #232323),
inset 2px 2px light-dark(#dfdfdf, #363636);
}
.menu-button.active {
box-shadow: inset -1px -1px light-dark(#fff, #525252),
inset 1px 1px light-dark(#0a0a0a, #000),
inset -2px -2px light-dark(#dfdfdf, #363636),
inset 2px 2px light-dark(grey, #232323);
}
.menu-dropdown {
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 2px;
list-style: none;
background: light-dark(silver, #2b2b2b);
box-shadow: inset -1px -1px light-dark(#0a0a0a, #000),
inset 1px 1px light-dark(#dfdfdf, #363636),
inset -2px -2px light-dark(grey, #232323),
inset 2px 2px light-dark(#fff, #525252);
min-width: 150px;
z-index: 1000;
}
.menu-dropdown li {
margin: 0;
}
.menu-dropdown li.separator {
height: 1px;
background: light-dark(grey, #232323);
margin: 2px 0;
border-top: 1px solid light-dark(#fff, #525252);
}
.menu-dropdown button {
width: 100%;
text-align: left;
background: transparent;
border: none;
box-shadow: none;
padding: 4px 20px;
min-width: auto;
min-height: auto;
font-family: "Pixelated MS Sans Serif", Arial;
font-size: 11px;
cursor: pointer;
color: light-dark(#222, #ddd);
text-shadow: none;
}
.menu-dropdown button:not(:disabled):hover {
background: light-dark(navy, #0b0b0b);
color: #fff;
box-shadow: none;
text-shadow: none;
}
.menu-dropdown button:disabled {
color: light-dark(grey, #232323);
text-shadow: 1px 1px 0 light-dark(#fff, #525252);
cursor: default;
}
u {
text-decoration: underline;
}
</style>

9
src/lib/TitleBar.svelte
View File

@@ -17,7 +17,7 @@
</script>
<div class="title-bar" data-tauri-drag-region>
<div class="title-bar-text">shark</div>
<div class="title-bar-text">Shark!</div>
<div class="title-bar-controls">
<button aria-label="Minimize" on:click={minimize}></button>
<button aria-label="Maximize" on:click={toggleMaximize}></button>
@@ -30,5 +30,12 @@
position: sticky;
top: 0;
z-index: 1000;
padding: 4px 3px 4px 4px;
}
.title-bar-controls button {
min-height: 16px;
min-width: 18px;
background-position: center !important;
}
</style>