issue-#1, #2 - Added basic top-nav toggle.

- Removed some unused css files.
elycruz · Jun 6, 2023 · da624fa · da624fa
1 parent 02e681d
commit da624fa
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 73 deletions.
diff --git a/apps/atomic-ui-js-site/src/app/globals.css b/apps/atomic-ui-js-site/src/app/globals.css
diff --git a/apps/atomic-ui-js-site/src/app/layout.tsx b/apps/atomic-ui-js-site/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import '../css/index.scss';
 import {AppNav} from '../features/app-nav';
+import {AppNavToggle} from '@/components/app-nav-toggle';
 
 export const metadata = {
   title: 'Atomic UI Js'
@@ -17,11 +18,12 @@ export default function RootLayout({
     <html lang="en">
       <body>
         <header className="x-app-header">
-          <div>
-            <div className="x-app-header__title x-flex x-flex-row x-align-items-center">
-              <button className="x-hamburger-btn x-btn"><i className="mds-icon">menu</i></button>
-              <h1>Atomic UI Js</h1>
-            </div>
+          <div className=" x-flex x-flex-row x-align-items-center">
+            <AppNavToggle />
+
+            <hgroup className="x-app-header__start">
+              <a href="/atomic-ui-js"><h1 className="x-app-header__title">Atomic UI Js</h1></a>
+            </hgroup>
           </div>
         </header>
 

diff --git a/apps/atomic-ui-js-site/src/components/app-nav-toggle/index.tsx b/apps/atomic-ui-js-site/src/components/app-nav-toggle/index.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import React from 'react';
+
+export function AppNavToggle() {
+  const onClick = e => {
+    e.preventDefault();
+    e.currentTarget.ownerDocument.documentElement.classList.toggle('with-app-nav-hidden');
+  };
+
+  return (
+    <button className="x-hamburger-btn x-btn"
+      onClick={onClick}><i className="mds-icon">menu</i></button>
+  );
+}
diff --git a/apps/atomic-ui-js-site/src/css/index.scss b/apps/atomic-ui-js-site/src/css/index.scss
@@ -1,4 +1,4 @@
- @use "atomic-ui-js/dist/index.min.css";
+@use "atomic-ui-js/dist/index.min.css";
 
 * {
   box-sizing: border-box;
@@ -19,16 +19,9 @@ body > * > * {
 body > .x-app-header {
   grid-area: app-header;
   border-bottom: var(--x-1px) solid;
-}
-
-body .x-app-header__title {
   gap: 0.5rem;
 }
 
-body .x-app-header__title > * {
-  display: inline-block;
-}
-
 body > div {
   grid-area: app-main;
   display: inline-grid;
@@ -57,6 +50,6 @@ body > .x-app-content > .x-app-nav {
   padding: var(--x-8px);
 }
 
-html.x-nav-hidden main {
-  width: 100vw;
+html.with-app-nav-hidden .x-app-nav {
+  display: none;
 }
diff --git a/apps/atomic-ui-js-site/src/features/ripple-page-contents/index.tsx b/apps/atomic-ui-js-site/src/features/ripple-page-contents/index.tsx
diff --git a/packages/atomic-ui-js/index.stories.js → ...es/atomic-ui-js/archived/index.stories.js b/packages/atomic-ui-js/index.stories.js → ...es/atomic-ui-js/archived/index.stories.js
@@ -1,4 +1,4 @@
-import {debounce, $, $$} from './utils/index.js';
+import {debounce, $, $$} from '../utils/index.js';
 
 // Init
 // ----

diff --git a/packages/atomic-ui-js/css/base/copy.css b/packages/atomic-ui-js/css/base/copy.css
@@ -1,54 +1,54 @@
-h1, h2, h3, h4, h5, h6, figure {
-  margin: 0;
-}
-
-h1,
-.x-h1 {
-  font-size: var(--x-72px);
-  line-height: var(--x-72px);
-}
-
-h2,
-.x-h2 {
-  font-size: var(--x-48px);
-  line-height: var(--x-48px);
-}
-
-h3,
-.x-h3 {
-  font-size: var(--x-36px);
-  line-height: var(--x-36px);
-}
-
-h4,
-.x-h4 {
-  font-size: var(--x-24px);
-  line-height: var(--x-24px);
-}
-
-h5,
-.x-h5 {
-  font-size: var(--x-18px);
-  line-height: var(--x-18px);
-}
-
-h6,
-.x-h6 {
-  font-size: var(--x-16px);
-  line-height: var(--x-16px);
-}
-
-a, p {
-  font-size: var(--x-16px);
-  line-height: var(--x-24px);
-}
-
-dl dd + *,
-dl dt + *,
-dl + dl {
-  margin-top: var(--x-21px);
-}
-
-dt, label {
-  font-weight: bold;
-}
+h1, h2, h3, h4, h5, h6, figure {
+  margin: 0;
+}
+
+h1,
+.x-h1 {
+  font-size: var(--x-72px);
+  line-height: var(--x-72px);
+}
+
+h2,
+.x-h2 {
+  font-size: var(--x-48px);
+  line-height: var(--x-48px);
+}
+
+h3,
+.x-h3 {
+  font-size: var(--x-36px);
+  line-height: var(--x-36px);
+}
+
+h4,
+.x-h4 {
+  font-size: var(--x-24px);
+  line-height: var(--x-24px);
+}
+
+h5,
+.x-h5 {
+  font-size: var(--x-18px);
+  line-height: var(--x-18px);
+}
+
+h6,
+.x-h6 {
+  font-size: var(--x-16px);
+  line-height: var(--x-16px);
+}
+
+a, p {
+  font-size: var(--x-16px);
+  line-height: var(--x-24px);
+}
+
+dl dd + *,
+dl dt + *,
+dl + dl {
+  margin-top: var(--x-21px);
+}
+
+dt, label {
+  font-weight: bold;
+}