Skip to content

Commit 77ae6c0

Browse files
AllanKoderAllanKoder
committed
navbar
1 parent 4e9d069 commit 77ae6c0

1 file changed

Lines changed: 57 additions & 29 deletions

File tree

‎resources/js/Components/Navigation/Navbar.vue‎

Lines changed: 57 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const { isDark, toggleDark } = useDarkMode();
3636
</div>
3737

3838
<!-- Navigation Links -->
39-
<div class="hidden space-x-8 lg:-my-px lg:ms-10 lg:flex">
39+
<div class="hidden space-x-8 xl:-my-px xl:ms-10 xl:flex">
4040
<NavLinkDropdown
4141
label="About"
4242
:active="route().current('about') || route().current('rules')"
@@ -74,24 +74,39 @@ const { isDark, toggleDark } = useDarkMode();
7474
</div>
7575

7676
<!-- Authenticated -->
77-
<div class="hidden lg:flex lg:items-center lg:ms-6">
77+
<div class="hidden xl:flex xl:items-center xl:ms-6">
78+
79+
80+
<!-- GitHub link button -->
81+
<a
82+
href="https://github.com/AllanKoder/ComputerScienceResources.com"
83+
target="_blank"
84+
rel="noopener noreferrer"
85+
class="mx-2 p-2 rounded-full hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none text-primaryDark dark:text-primary"
86+
>
87+
<Icon
88+
icon="mdi:github"
89+
class="size-6"
90+
/>
91+
</a>
92+
7893
<!-- Dark mode icon button -->
7994
<button
80-
@click="toggleDark"
81-
type="button"
82-
class="mx-2 p-2 rounded-full hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none text-primaryDark dark:text-primary"
95+
@click="toggleDark"
96+
type="button"
97+
class="mx-2 p-2 rounded-full hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none text-primaryDark dark:text-primary"
8398
>
84-
<Icon
99+
<Icon
85100
v-if="!isDark"
86101
icon="mdi:weather-night"
87102
class="size-6"
88-
/>
89-
<Icon
103+
/>
104+
<Icon
90105
v-else
91106
icon="mdi:white-balance-sunny"
92107
class="size-6"
93-
/>
94-
</button>
108+
/>
109+
</button>
95110

96111
<template v-if="$page.props.auth.user">
97112
<!-- Create Resource Button -->
@@ -111,7 +126,7 @@ const { isDark, toggleDark } = useDarkMode();
111126
</template>
112127
<!-- Guest -->
113128
<template v-else>
114-
<div class="hidden lg:flex lg:items-center lg:ms-6">
129+
<div class="hidden xl:flex xl:items-center xl:ms-6">
115130
<Link :href="route('login')">
116131
<SecondaryButton
117132
class="dark:bg-primary dark:text-white dark:hover:bg-primary"
@@ -125,7 +140,7 @@ const { isDark, toggleDark } = useDarkMode();
125140
</div>
126141

127142
<!-- Hamburger -->
128-
<div class="-me-2 flex items-center lg:hidden">
143+
<div class="-me-2 flex items-center xl:hidden">
129144
<button
130145
class="inline-flex items-center justify-center p-2 rounded-md text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none focus:bg-accent/30 dark:focus:bg-primaryDark/30 focus:text-primary dark:focus:text-primaryLight transition duration-150 ease-in-out"
131146
@click="
@@ -171,26 +186,39 @@ const { isDark, toggleDark } = useDarkMode();
171186
block: showingNavigationDropdown,
172187
hidden: !showingNavigationDropdown,
173188
}"
174-
class="lg:hidden bg-white dark:bg-gray-900 border-t border-accent dark:border-accent-dark"
189+
class="xl:hidden bg-white dark:bg-gray-900 border-t border-accent dark:border-accent-dark"
175190
>
176191
<div class="pt-2 pb-3 space-y-2">
177-
<!-- Dark mode icon button -->
178-
<button
179-
@click="toggleDark"
180-
type="button"
181-
class="mx-2 p-2 rounded-full hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none text-primaryDark dark:text-primary"
192+
<div class="flex items-center gap-2 px-2">
193+
<!-- Dark mode icon button -->
194+
<button
195+
@click="toggleDark"
196+
type="button"
197+
class="p-2 rounded-full hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none text-primaryDark dark:text-primary"
198+
>
199+
<Icon
200+
v-if="!isDark"
201+
icon="mdi:weather-night"
202+
class="size-6"
203+
/>
204+
<Icon
205+
v-else
206+
icon="mdi:white-balance-sunny"
207+
class="size-6"
208+
/>
209+
</button>
210+
</div>
211+
212+
<ResponsiveNavLink
213+
href="https://github.com/AllanKoder/ComputerScienceResources.com"
214+
class="text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight"
215+
as="a"
216+
target="_blank"
217+
rel="noopener noreferrer"
182218
>
183-
<Icon
184-
v-if="!isDark"
185-
icon="mdi:weather-night"
186-
class="size-6"
187-
/>
188-
<Icon
189-
v-else
190-
icon="mdi:white-balance-sunny"
191-
class="size-6"
192-
/>
193-
</button>
219+
<Icon icon="mdi:github" class="mr-2" />
220+
GitHub
221+
</ResponsiveNavLink>
194222

195223
<ResponsiveNavLink
196224
:href="route('about')"

0 commit comments

Comments
 (0)