Skip to content

Commit

Permalink
Feat/dark mode (#176)
Browse files Browse the repository at this point in the history
* feat:dwa-starter-vue-app-hello-word

* feat:dwa-starter-vue-app-hello-word

* feat:dwa-starter-vue-app-hello-word

* added tailwind css

* added tailwind css

* added tbd example json for ci integration

* added tbd example json for ci integration

* replaced npm with pnpm in ci/cd file

* fix:pnpm build error in ci/cd

* fix:pnpm build error in ci/cd

* fix:pnpm build error in ci/cd

* break the commands into seperate items

* break the commands into seperate items

* Setup routes for Home, About, Settings and 404 handling

* Setup routes for Home, About, Settings and 404 handling

* remove vite config timestamp file

* remove vite config timestamp file

* initial commit

* initial commit

* fix:layout

* fix:layout

* fix:layout

* fix:layout

* responsive nav menu

* responsive nav menu

* backdrop blur

* remove unused navigation menu component
  • Loading branch information
Johnnyevans32 authored Oct 7, 2024
1 parent 8705626 commit 4262bbb
Show file tree
Hide file tree
Showing 30 changed files with 516 additions and 274 deletions.
3 changes: 3 additions & 0 deletions javascript/dwa-starter-vue/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@
"format": "prettier --write src/"
},
"dependencies": {
"@iconify-json/radix-icons": "^1.2.0",
"@iconify/vue": "^4.1.2",
"@radix-icons/vue": "^1.0.0",
"@vueuse/core": "^11.1.0",
"autoprefixer": "^10.4.20",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
Expand Down
59 changes: 59 additions & 0 deletions javascript/dwa-starter-vue/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 5 additions & 5 deletions javascript/dwa-starter-vue/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import NavMenu from '@/components/NavMenu.vue'
</script>

<template>
<div class="flex lg:flex-row flex-col">
<header class="sticky top-0 lg:h-screen">
<div class="flex min-h-screen lg:flex-row flex-col dark:bg-zinc-950 dark:text-white">
<header class="sticky top-0">
<NavMenu />
</header>

<main class="p-4 overflow-y-auto">
<main class="p-4 lg:h-screen overflow-y-auto">
<RouterView />
</main>
</div>
Expand All @@ -25,14 +25,14 @@ h1 {
}
h2 {
@apply border-b pb-2 text-3xl font-semibold transition-colors first:mt-0;
@apply text-3xl font-semibold;
}
h3 {
@apply text-2xl font-semibold;
}
p {
@apply leading-7 [&:not(:first-child)]:mt-6;
@apply leading-7 [&:not(:first-child)]:my-6;
}
</style>
44 changes: 41 additions & 3 deletions javascript/dwa-starter-vue/src/components/NavList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,16 @@ import { Button } from '@/components/ui/button'
import { useRoute } from 'vue-router'
import { HomeIcon, GearIcon, AvatarIcon, Link2Icon } from '@radix-icons/vue'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'
import { Icon } from '@iconify/vue'
import { useColorMode } from '@vueuse/core'
const route = useRoute()
const navList = [
Expand All @@ -12,12 +22,41 @@ const navList = [
]
const emit = defineEmits(['itemClicked'])
const mode = useColorMode()
</script>

<template>
<nav class="flex flex-col gap-4 h-full">
<h2 class="text-lg">My DWA</h2>

<div class="flex items-center justify-between">
<h2 class="text-lg">My DWA</h2>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost" class="dark:bg-zinc-950 dark:text-white" id="theme-toggle-button">
<Icon
icon="radix-icons:moon"
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
<Icon
icon="radix-icons:sun"
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<span class="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" class="dark:bg-zinc-950 dark:text-white">
<DropdownMenuItem v-bind:id="'light-mode-option'" @click="mode = 'light'">
Light
</DropdownMenuItem>
<DropdownMenuItem v-bind:id="'dark-mode-option'" @click="mode = 'dark'">
Dark
</DropdownMenuItem>
<DropdownMenuItem v-bind:id="'auto-mode-option'" @click="mode = 'auto'">
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div class="flex flex-col gap-2">
<div v-for="item in navList" :key="item.title">
<Button
Expand All @@ -32,7 +71,6 @@ const emit = defineEmits(['itemClicked'])
</Button>
</div>
</div>

<Button variant="ghost" class="w-full justify-start mt-auto">
<Link2Icon class="w-4 h-4 mr-2" />
Connect
Expand Down
4 changes: 2 additions & 2 deletions javascript/dwa-starter-vue/src/components/NavMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const closeDrawer = () => {

<template>
<div class="lg:hidden">
<div class="border-b py-2 backdrop-blur-lg">
<div class="border-b py-2 backdrop-blur-lg dark:border-gray-700">
<Button @click="toggleDrawer" variant="ghost">
<TextAlignLeftIcon class="w-6 h-6" />
</Button>
Expand All @@ -26,7 +26,7 @@ const closeDrawer = () => {

<div
:class="[
'fixed top-0 left-0 z-20 h-full w-64 bg-white shadow-md transition-transform p-4',
'fixed top-0 left-0 z-20 h-full w-64 bg-white dark:bg-zinc-950 shadow-md transition-transform p-4',
isOpen ? 'translate-x-0' : '-translate-x-full'
]"
>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<script setup lang="ts">
import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'
const props = defineProps<DropdownMenuRootProps>()
const emits = defineEmits<DropdownMenuRootEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
<DropdownMenuRoot v-bind="forwarded">
<slot />
</DropdownMenuRoot>
</template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import {
DropdownMenuCheckboxItem,
type DropdownMenuCheckboxItemEmits,
type DropdownMenuCheckboxItemProps,
DropdownMenuItemIndicator,
useForwardPropsEmits,
} from 'radix-vue'
import { CheckIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
<DropdownMenuCheckboxItem
v-bind="forwarded"
:class=" cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50',
props.class,
)"
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicator>
<CheckIcon class="w-4 h-4" />
</DropdownMenuItemIndicator>
</span>
<slot />
</DropdownMenuCheckboxItem>
</template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import {
DropdownMenuContent,
type DropdownMenuContentEmits,
type DropdownMenuContentProps,
DropdownMenuPortal,
useForwardPropsEmits,
} from 'radix-vue'
import { cn } from '@/lib/utils'
const props = withDefaults(
defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
{
sideOffset: 4,
},
)
const emits = defineEmits<DropdownMenuContentEmits>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
<DropdownMenuPortal>
<DropdownMenuContent
v-bind="forwarded"
:class="cn('z-50 min-w-32 overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50', props.class)"
>
<slot />
</DropdownMenuContent>
</DropdownMenuPortal>
</template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script setup lang="ts">
import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'
const props = defineProps<DropdownMenuGroupProps>()
</script>

<template>
<DropdownMenuGroup v-bind="props">
<slot />
</DropdownMenuGroup>
</template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
<DropdownMenuItem
v-bind="forwardedProps"
:class="cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50',
inset && 'pl-8',
props.class,
)"
>
<slot />
</DropdownMenuItem>
</template>
Loading

0 comments on commit 4262bbb

Please sign in to comment.