Refine Guides & Concepts Section (#88)

* refine docu section #71 * update json version
Sonatai · Jun 1, 2023 · c4622c2 · c4622c2
1 parent 77d1d64
commit c4622c2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "test-vite-react-github-pages",
-    "version": "0.2.2",
+    "version": "0.2.3",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

diff --git a/src/components/MainNav/MainNav.tsx b/src/components/MainNav/MainNav.tsx
@@ -16,22 +16,22 @@ export const MainNav = (props: IMainNav) => {
     return (
         <div className="main">
             <div className="main__logo">Neureka</div>
-            <div className="main__nav__search">
+            <div className="main__search">
                 <Search summary={summary} />
             </div>
-            <nav className="main__nav">
-                <h4>Examples</h4>
 
+            <nav className="main__nav">
                 <ul className="main__list">
-                    <li className="main__list__item pb-[0.5rem]">
+                    <li className="main__list__item">
                         <Link to="/">Home</Link>
                     </li>
+                </ul>
 
+                <h4>Guides & Concepts</h4>
+
+                <ul className="main__list">
                     {summary.specifications.map((spec) => (
-                        <li
-                            className="main__list__item pb-[0.5rem]"
-                            key={nanoid()}
-                        >
+                        <li className="main__list__item" key={nanoid()}>
                             <Link to={spec.className}>
                                 {spec.title !== ''
                                     ? spec.title

diff --git a/src/components/MainNav/styles.css b/src/components/MainNav/styles.css
@@ -4,30 +4,41 @@
     @apply z-20;
     @apply inset-0;
     @apply left-[max(0px,calc(50%-45rem))] right-auto w-[19.5rem];
-    @apply pb-10 px-8;
+    @apply px-8;
+    @apply h-screen;
+    @apply flex;
+    @apply flex-col;
+    @apply overflow-hidden;
+}
+
+.main__search {
+    @apply top-0;
+    @apply -ml-0.5;
 }
 
 .main__nav {
     @apply lg:text-sm;
     @apply lg:leading-6;
-    @apply relative;
-    @apply h-full;
     @apply overflow-auto;
 }
 
-.main__nav__search {
-    @apply sticky;
-    @apply top-0;
-    @apply -ml-0.5;
+.main__nav > h4 {
+    @apply mt-3;
+    @apply mb-2;
+}
+
+.main__list {
+    @apply m-0;
+    @apply text-[0.875rem];
 }
 
 .main__list__item::before {
     display: none !important;
 }
 
-.main__list {
-    @apply m-0;
-    @apply text-[0.875rem];
+.main__list__item {
+    @apply pb-2;
+    @apply px-2;
 }
 
 .main__logo {