fixing mobile updates for anchor theme

thedevdojo · Oct 3, 2024 · c648d8a · c648d8a
1 parent f07a74e
commit c648d8a
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 47 deletions.
diff --git a/public/build/assets/app-CLeA4e8z.css b/public/build/assets/app-CLeA4e8z.css
diff --git a/public/build/assets/app-JJAUob5D.css b/public/build/assets/app-JJAUob5D.css
diff --git a/public/build/manifest.json b/public/build/manifest.json
@@ -5,7 +5,7 @@
     "isEntry": true
   },
   "resources/themes/anchor/assets/css/app.css": {
-    "file": "assets/app-JJAUob5D.css",
+    "file": "assets/app-CLeA4e8z.css",
     "src": "resources/themes/anchor/assets/css/app.css",
     "isEntry": true
   },

diff --git a/resources/themes/anchor/components/app/message-for-admin.blade.php b/resources/themes/anchor/components/app/message-for-admin.blade.php
@@ -1,4 +1,4 @@
 <p>You're logged in with an <strong>Admin</strong> role. Did you know that you can use <a href="https://devdojo.com/wave/docs/blade-directives" target="_blank" class="underline">custom blade directives</a> to check if a user is an admin user</p>
-<pre class="p-5 font-mono text-xs text-gray-600 bg-gray-50 rounded-lg border dark:bg-zinc-700/50 dark:border-gray-600 dark:text-gray-100 dark:border-gray-800 border-gray-200/80"><code>&#64;admin
+<pre class="p-5 overflow-x-auto font-mono text-xs text-gray-600 border rounded-lg bg-gray-50 dark:bg-zinc-700/50 dark:border-gray-600 dark:text-gray-100 dark:border-gray-800 border-gray-200/80"><code>&#64;admin
     &lt;p&gt;Only you as an admin will see this message&lt;/p&gt;
 &#64;notadmin</code></pre>
diff --git a/resources/themes/anchor/components/app/sidebar.blade.php b/resources/themes/anchor/components/app/sidebar.blade.php
@@ -4,54 +4,56 @@
 
     {{-- Sidebar --}} 
     <div :class="{ '-translate-x-full': !sidebarOpen }"
-        class="fixed top-0 left-0 flex -translate-x-full lg:translate-x-0 flex-col pt-4 pb-2.5 z-50 justify-between h-screen overflow-x-hidden overflow-auto transition-[width,transform] duration-150 ease-out bg-zinc-50 dark:bg-zinc-900 items-between w-64 group @if(config('wave.dev_bar')){{ 'pb-10' }}@endif">  
-        <div class="relative flex flex-col">
-            <button x-on:click="sidebarOpen=false" class="flex items-center justify-center flex-shrink-0 w-10 h-10 ml-4 rounded-md lg:hidden text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200 dark:hover:bg-zinc-700/70 hover:bg-gray-200/70">
-                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
-            </button>
+        class="fixed top-0 left-0 flex items-stretch -translate-x-full overflow-hidden lg:translate-x-0 z-50 h-dvh md:h-screen transition-[width,transform] duration-150 ease-out bg-zinc-50 dark:bg-zinc-900 w-64 group @if(config('wave.dev_bar')){{ 'pb-10' }}@endif">  
+        <div class="flex flex-col justify-between w-full overflow-auto md:h-full h-svh pt-4 pb-2.5">
+            <div class="relative flex flex-col">
+                <button x-on:click="sidebarOpen=false" class="flex items-center justify-center flex-shrink-0 w-10 h-10 ml-4 rounded-md lg:hidden text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200 dark:hover:bg-zinc-700/70 hover:bg-gray-200/70">
+                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+                </button>
 
-            <div class="flex items-center px-5 space-x-2">
-                <a href="/dashboard" wire:navigate class="flex justify-center items-center py-4 pl-0.5 space-x-1 font-bold text-zinc-900">
-                    <x-logo class="w-auto h-7" />
-                </a>
-            </div>
-            <div class="flex items-center px-4 pt-1 pb-3">
-                <div class="relative flex items-center w-full h-full rounded-lg">
-                    <x-phosphor-magnifying-glass class="absolute left-0 w-5 h-5 ml-2 text-gray-400 -translate-y-px" />
-                    <input type="text" class="w-full py-2 pl-8 text-sm border rounded-lg bg-zinc-200/70 focus:bg-white duration-50 dark:bg-zinc-950 ease border-zinc-200 dark:border-zinc-700/70 dark:ring-zinc-700/70 focus:ring dark:text-zinc-200 dark:focus:ring-zinc-700/70 dark:focus:border-zinc-700 focus:ring-zinc-200 focus:border-zinc-300 dark:placeholder-zinc-400" placeholder="Search">
+                <div class="flex items-center px-5 space-x-2">
+                    <a href="/" class="flex justify-center items-center py-4 pl-0.5 space-x-1 font-bold text-zinc-900">
+                        <x-logo class="w-auto h-7" />
+                    </a>
+                </div>
+                <div class="flex items-center px-4 pt-1 pb-3">
+                    <div class="relative flex items-center w-full h-full rounded-lg">
+                        <x-phosphor-magnifying-glass class="absolute left-0 w-5 h-5 ml-2 text-gray-400 -translate-y-px" />
+                        <input type="text" class="w-full py-2 pl-8 text-sm border rounded-lg bg-zinc-200/70 focus:bg-white duration-50 dark:bg-zinc-950 ease border-zinc-200 dark:border-zinc-700/70 dark:ring-zinc-700/70 focus:ring dark:text-zinc-200 dark:focus:ring-zinc-700/70 dark:focus:border-zinc-700 focus:ring-zinc-200 focus:border-zinc-300 dark:placeholder-zinc-400" placeholder="Search">
+                    </div>
                 </div>
-            </div>
 
-            <div class="flex flex-col justify-start items-center px-4 space-y-1.5 w-full h-full text-slate-600 dark:text-zinc-400">
-                <x-app.sidebar-link href="/dashboard" icon="phosphor-house" :active="Request::is('dashboard')">Dashboard</x-app.sidebar-link>
-                <x-app.sidebar-dropdown text="Projects" icon="phosphor-stack" id="projects_dropdown" :active="(Request::is('projects'))" :open="(Request::is('project_a') || Request::is('project_b') || Request::is('project_c')) ? '1' : '0'">
-                    <x-app.sidebar-link onclick="event.preventDefault(); new FilamentNotification().title('Modify this button inside of sidebar.blade.php').send()" icon="phosphor-cube" :active="(Request::is('project_a'))">Project A</x-app.sidebar-link>
-                    <x-app.sidebar-link onclick="event.preventDefault(); new FilamentNotification().title('Modify this button inside of sidebar.blade.php').send()" icon="phosphor-cube" :active="(Request::is('project_b'))">Project B</x-app.sidebar-link>
-                    <x-app.sidebar-link onclick="event.preventDefault(); new FilamentNotification().title('Modify this button inside of sidebar.blade.php').send()" icon="phosphor-cube" :active="(Request::is('project_c'))">Project C</x-app.sidebar-link>
-                </x-app.sidebar-dropdown>
-                <x-app.sidebar-link onclick="event.preventDefault(); new FilamentNotification().title('Modify this button inside of sidebar.blade.php').send()" icon="phosphor-pencil-line" active="false">Stories</x-app.sidebar-link>
-                <x-app.sidebar-link  onclick="event.preventDefault(); new FilamentNotification().title('Modify this button inside of sidebar.blade.php').send()" icon="phosphor-users" active="false">Users</x-app.sidebar-link>
+                <div class="flex flex-col justify-start items-center px-4 space-y-1.5 w-full h-full text-slate-600 dark:text-zinc-400">
+                    <x-app.sidebar-link href="/dashboard" icon="phosphor-house" :active="Request::is('dashboard')">Dashboard</x-app.sidebar-link>
+                    <x-app.sidebar-dropdown text="Projects" icon="phosphor-stack" id="projects_dropdown" :active="(Request::is('projects'))" :open="(Request::is('project_a') || Request::is('project_b') || Request::is('project_c')) ? '1' : '0'">
+                        <x-app.sidebar-link onclick="event.preventDefault(); new FilamentNotification().title('Modify this button inside of sidebar.blade.php').send()" icon="phosphor-cube" :active="(Request::is('project_a'))">Project A</x-app.sidebar-link>
+                        <x-app.sidebar-link onclick="event.preventDefault(); new FilamentNotification().title('Modify this button inside of sidebar.blade.php').send()" icon="phosphor-cube" :active="(Request::is('project_b'))">Project B</x-app.sidebar-link>
+                        <x-app.sidebar-link onclick="event.preventDefault(); new FilamentNotification().title('Modify this button inside of sidebar.blade.php').send()" icon="phosphor-cube" :active="(Request::is('project_c'))">Project C</x-app.sidebar-link>
+                    </x-app.sidebar-dropdown>
+                    <x-app.sidebar-link onclick="event.preventDefault(); new FilamentNotification().title('Modify this button inside of sidebar.blade.php').send()" icon="phosphor-pencil-line" active="false">Stories</x-app.sidebar-link>
+                    <x-app.sidebar-link  onclick="event.preventDefault(); new FilamentNotification().title('Modify this button inside of sidebar.blade.php').send()" icon="phosphor-users" active="false">Users</x-app.sidebar-link>
+                </div>
             </div>
-        </div>
 
-        <div class="relative px-2.5 space-y-1.5 text-zinc-700 dark:text-zinc-400">
-
-            <x-app.sidebar-link href="https://devdojo.com/wave/docs" target="_blank" icon="phosphor-book-bookmark-duotone" active="false">Documentation</x-app.sidebar-link>
-            <x-app.sidebar-link href="https://devdojo.com/questions" target="_blank" icon="phosphor-chat-duotone" active="false">Questions</x-app.sidebar-link>
-            <x-app.sidebar-link :href="route('changelogs')" icon="phosphor-book-open-text-duotone" active="false">Changelog</x-app.sidebar-link>
+            <div class="relative px-2.5 space-y-1.5 text-zinc-700 dark:text-zinc-400">
+                
+                <x-app.sidebar-link href="https://devdojo.com/wave/docs" target="_blank" icon="phosphor-book-bookmark-duotone" active="false">Documentation</x-app.sidebar-link>
+                <x-app.sidebar-link href="https://devdojo.com/questions" target="_blank" icon="phosphor-chat-duotone" active="false">Questions</x-app.sidebar-link>
+                <x-app.sidebar-link :href="route('changelogs')" icon="phosphor-book-open-text-duotone" :active="Request::is('changelog') || Request::is('changelog/*')">Changelog</x-app.sidebar-link>
 
-            <div x-show="sidebarTip" x-data="{ sidebarTip: $persist(true) }" class="px-1 py-3" x-collapse x-cloak>
-                <div class="relative w-full px-4 py-3 space-y-1 border rounded-lg bg-zinc-50 text-zinc-700 dark:text-zinc-100 dark:bg-zinc-800 border-zinc-200/60 dark:border-zinc-700">
-                    <button @click="sidebarTip=false" class="absolute top-0 right-0 z-50 p-1.5 mt-2.5 mr-2.5 rounded-full opacity-80 cursor-pointer hover:opacity-100 hover:bg-zinc-100 hover:dark:bg-zinc-700 hover:dark:text-zinc-300 text-zinc-500 dark:text-zinc-400">
-                        <x-phosphor-x-bold class="w-3 h-3" />
-                    </button>
-                    <h5 class="pb-1 text-sm font-bold -translate-y-0.5">Edit This Section</h5>
-                    <p class="block pb-1 text-xs opacity-80 text-balance">You can edit any aspect of your user dashboard. This section can be found inside your theme component/app/sidebar file.</p>
+                <div x-show="sidebarTip" x-data="{ sidebarTip: $persist(true) }" class="px-1 py-3" x-collapse x-cloak>
+                    <div class="relative w-full px-4 py-3 space-y-1 border rounded-lg bg-zinc-50 text-zinc-700 dark:text-zinc-100 dark:bg-zinc-800 border-zinc-200/60 dark:border-zinc-700">
+                        <button @click="sidebarTip=false" class="absolute top-0 right-0 z-50 p-1.5 mt-2.5 mr-2.5 rounded-full opacity-80 cursor-pointer hover:opacity-100 hover:bg-zinc-100 hover:dark:bg-zinc-700 hover:dark:text-zinc-300 text-zinc-500 dark:text-zinc-400">
+                            <x-phosphor-x-bold class="w-3 h-3" />
+                        </button>
+                        <h5 class="pb-1 text-sm font-bold -translate-y-0.5">Edit This Section</h5>
+                        <p class="block pb-1 text-xs opacity-80 text-balance">You can edit any aspect of your user dashboard. This section can be found inside your theme component/app/sidebar file.</p>
+                    </div>
                 </div>
-            </div>
 
-            <div class="w-full h-px my-2 bg-slate-100 dark:bg-zinc-700"></div>
-            <x-app.user-menu />
+                <div class="w-full h-px my-2 bg-slate-100 dark:bg-zinc-700"></div>
+                <x-app.user-menu />
+            </div>
         </div>
     </div>
 </div>
diff --git a/resources/themes/anchor/components/marketing/elements/header.blade.php b/resources/themes/anchor/components/marketing/elements/header.blade.php
@@ -155,6 +155,18 @@ class="top-0 left-0 w-screen space-y-3 transition-transform duration-300 ease-ou
                     <li class="flex-shrink-0 h-16 border-b border-gray-100 md:border-b-0 md:h-full">
                         <a href="{{ route('blog') }}" class="flex items-center h-full text-sm font-semibold text-gray-700 transition duration-300 md:px-0 px-7 hover:bg-gray-100 md:hover:bg-transparent hover:text-gray-900">Blog</a>
                     </li>
+
+                    @guest
+                        <li class="relative z-30 flex flex-col items-center justify-center flex-shrink-0 w-full h-auto pt-3 space-y-3 text-sm md:hidden px-7">
+                            <x-button href="{{ route('login') }}" tag="a" class="w-full text-sm" color="secondary">Login</x-button>
+                            <x-button href="{{ route('register') }}" tag="a" class="w-full text-sm">Sign Up</x-button>
+                        </li>
+                    @else
+                        <li class="flex items-center justify-center w-full pt-3 md:hidden px-7">
+                            <x-button href="{{ route('login') }}" tag="a" class="w-full text-sm">View Dashboard</x-button>
+                        </li>
+                    @endguest
+
                 </ul>
             </nav>
 
@@ -164,7 +176,7 @@ class="top-0 left-0 w-screen space-y-3 transition-transform duration-300 ease-ou
                     <x-button href="{{ route('register') }}" tag="a" class="text-sm">Sign Up</x-button>
                 </div>
             @else
-                <x-button href="{{ route('login') }}" tag="a" class="text-sm" class="relative z-20 flex-shrink-0 ml-2">View Dashboard</x-button>
+                <x-button href="{{ route('login') }}" tag="a" class="text-sm" class="relative z-20 flex-shrink-0 hidden ml-2 md:block">View Dashboard</x-button>
             @endguest
 
         </div>

diff --git a/resources/themes/anchor/components/marketing/sections/hero.blade.php b/resources/themes/anchor/components/marketing/sections/hero.blade.php
@@ -2,13 +2,13 @@
 
         <div class="flex flex-col items-center justify-between flex-1 w-full max-w-2xl gap-6 px-8 pt-32 mx-auto text-left md:px-12 xl:px-20 lg:pt-32 lg:pb-16 lg:max-w-7xl lg:flex-row">
             <div class="w-full lg:w-1/2">
-                <h1 class="font-bold tracking-tighter text-left text-7xl md:text-8xl sm:text-center lg:text-left text-zinc-900 text-balance">
-                    <span class="block origin-left lg:scale-90 text-nowrap">Ship In Days</span> <span class="pr-4 text-transparent text-neutral-600 bg-clip-text bg-gradient-to-b from-neutral-900 to-neutral-500">Not Weeks</span>
+                <h1 class="text-6xl font-bold tracking-tighter text-left sm:text-7xl md:text-8xl sm:text-center lg:text-left text-zinc-900 text-balance">
+                    <span class="block origin-left lg:scale-90 text-nowrap">Ship in Days</span> <span class="pr-4 text-transparent text-neutral-600 bg-clip-text bg-gradient-to-b from-neutral-900 to-neutral-500">Not Weeks</span>
                 </h1>
                 <p class="mx-auto mt-5 text-2xl font-normal text-left sm:max-w-md lg:ml-0 lg:max-w-md sm:text-center lg:text-left text-zinc-500">
                     Customize this to highlight your product’s unique selling points<span class="hidden sm:inline"> and features</span>.
                 </p>
-                <div class="flex flex-col items-center justify-center gap-2 mx-auto mt-8 lg:justify-start md:ml-0 md:flex-row">
+                <div class="flex flex-col items-center justify-center gap-3 mx-auto mt-8 md:gap-2 lg:justify-start md:ml-0 md:flex-row">
                     <x-button size="lg" class="w-full lg:w-auto">Primary Button</x-button>
                     <x-button size="lg" color="secondary" class="w-full lg:w-auto">Secondary Button</x-button>
                 </div>