@@ -45,77 +45,76 @@ export default function MobileMenu() {
45
45
< ul
46
46
className = { cn (
47
47
styles . menu ,
48
- 'flex flex-col absolute bg-gray-100 dark:bg-gray-900' ,
48
+ 'flex flex-col fixed top-16 right-0 left-0 bg-gray-100 dark:bg-gray-900 px-6 z-50 items-center py-4 space-y-4 ' ,
49
49
isMenuRendered && styles . menuRendered
50
50
ED4F
) }
51
51
>
52
52
< li
53
- className = "border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold"
53
+ className = "border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold text-center w-full "
54
54
style = { { transitionDelay : '150ms' } }
55
55
>
56
56
< Link
57
57
href = "/"
58
- className = "flex w-auto pb-4"
58
+ className = "flex w-auto pb-4 justify-center "
59
59
>
60
60
Home
61
61
</ Link >
62
62
</ li >
63
63
< li
64
- className = "border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold"
64
+ className = "border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold text-center w-full "
65
65
style = { { transitionDelay : '175ms' } }
66
66
>
67
67
< Link
68
- href = "/guestbook "
69
- className = "flex w-auto pb-4"
68
+ href = "/about "
69
+ className = "flex w-auto pb-4 justify-center "
70
70
>
71
- Guestbook
71
+ About
72
72
</ Link >
73
73
</ li >
74
74
< li
75
- className = "border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold"
75
+ className = "border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold text-center w-full "
76
76
style = { { transitionDelay : '200ms' } }
77
77
>
78
- < Link href = "/dashboard" legacyBehavior >
79
- < div className = "flex w-auto pb-4" > Dashboard</ div >
80
- </ Link >
81
- </ li >
82
- < li
83
- className = "border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold"
84
- style = { { transitionDelay : '250ms' } }
85
- >
86
- < Link href = "/blog" legacyBehavior >
87
- < div className = "flex w-auto pb-4" > Blog</ div >
78
+ < Link
79
+ href = "/guestbook"
80
+ className = "flex w-auto pb-4 justify-center"
81
+ >
82
+ Guestbook
88
83
</ Link >
89
84
</ li >
90
85
< li
91
- className = "border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold"
92
- style = { { transitionDelay : '275ms ' } }
86
+ className = "border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold text-center w-full "
87
+ style = { { transitionDelay : '225ms ' } }
93
88
>
94
- < Link href = "/snippets" legacyBehavior >
95
- < div className = "flex w-auto pb-4" > Snippets</ div >
89
+ < Link
90
+ href = "/dashboard"
91
+ className = "flex w-auto pb-4 justify-center"
92
+ >
93
+ Dashboard
96
94
</ Link >
97
95
</ li >
98
96
< li
99
- className = "border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold"
100
- style = { { transitionDelay : '300ms ' } }
97
+ className = "border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold text-center w-full "
98
+ style = { { transitionDelay : '250ms ' } }
101
99
>
102
- < Link href = "/newsletter" legacyBehavior >
103
- < div className = "flex w-auto pb-4" > Newsletter</ div >
100
+ < Link
101
+ href = "/blog"
102
+ className = "flex w-auto pb-4 justify-center"
103
+ >
104
+ Blog
104
105
</ Link >
105
106
</ li >
106
107
< li
107
- className = "border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold"
108
- style = { { transitionDelay : '325ms ' } }
108
+ className = "border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold text-center w-full "
109
+ style = { { transitionDelay : '275ms ' } }
109
110
>
110
- < Link href = "/tweets" legacyBehavior >
111
- < div className = "flex w-auto pb-4" > Tweets</ div >
111
+ < Link
112
+ href = "/snippets"
113
+ className = "flex w-auto pb-4 justify-center"
114
+ >
115
+ Snippets
112
116
</ Link >
113
117
</ li >
114
- < li
115
- className = "border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold"
116
- style = { { transitionDelay : '350ms' } }
117
- >
118
- </ li >
119
118
</ ul >
120
119
) }
121
120
</ >
0 commit comments