diff --git a/spaces/music_note/src/routes/index.tsx b/spaces/music_note/src/routes/index.tsx index 2494f109..a8e4c54a 100644 --- a/spaces/music_note/src/routes/index.tsx +++ b/spaces/music_note/src/routes/index.tsx @@ -4,28 +4,7 @@ import type { DocumentHead } from "@builder.io/qwik-city"; export default component$(() => { return ( <> -
-
- Home -
-
- - - -
-
-
- -
- {/* class='grow-0 shrink-0 basis-64' == style='flex: 0 0 16rem' - style='flex: 0 0 16rem' can fix column width - ref: https://stackoverflow.com/questions/29885284/how-to-set-a-fixed-width-column-with-css-flexbox - https://tailwindcss.com/docs/flex-basis - */} -
bg-white bg-white bg-white bg-white bg-white bg-white bg-white bg-white bg-white bg-white
-
Github GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub Github v
-
bg-white bg-red bg-white bg-red bg-white bg-red bg-white bg-red bg-white bg-red bg-white bg-red bg-white bg-red bg-white bg-red
-
+
index
); diff --git a/spaces/music_note/src/routes/layout.tsx b/spaces/music_note/src/routes/layout.tsx index 7cea7665..d5a5c0d2 100644 --- a/spaces/music_note/src/routes/layout.tsx +++ b/spaces/music_note/src/routes/layout.tsx @@ -1,5 +1,6 @@ import { component$, Slot } from "@builder.io/qwik"; import type { RequestHandler } from "@builder.io/qwik-city"; +import { Link, useNavigate } from '@builder.io/qwik-city'; export const onGet: RequestHandler = async ({ cacheControl }) => { // Control caching for this request for best performance and to reduce hosting costs: @@ -13,5 +14,59 @@ export const onGet: RequestHandler = async ({ cacheControl }) => { }; export default component$(() => { - return ; + return <> +
+
+ + + Home +
+
+ + + +
+
+
+ +
+ {/* class='grow-0 shrink-0 basis-64' == style='flex: 0 0 16rem' + style='flex: 0 0 16rem' can fix column width + ref: https://stackoverflow.com/questions/29885284/how-to-set-a-fixed-width-column-with-css-flexbox + https://tailwindcss.com/docs/flex-basis + */} +
+
+ +
+ +
    +
  • muisc_note (root)
    • +
  • muisc_basic (prefered)
    • +
+
+
+
+ + + {/* class="basis-full" 中间的内容页面撑开占满除左右导航外的其他空间 */} +
+ +
+
+ +
+ + +
+
+
+
+ + ; }); diff --git a/spaces/music_note/src/routes/music_basic/index.tsx b/spaces/music_note/src/routes/music_basic/index.tsx new file mode 100644 index 00000000..0ebd73a8 --- /dev/null +++ b/spaces/music_note/src/routes/music_basic/index.tsx @@ -0,0 +1,42 @@ +import { component$ } from "@builder.io/qwik"; +import type { DocumentHead } from "@builder.io/qwik-city"; + +export default component$(() => { + return ( + <> +
+
+ Home +
+
+ + + +
+
+
+ music basic +
+ {/* class='grow-0 shrink-0 basis-64' == style='flex: 0 0 16rem' + style='flex: 0 0 16rem' can fix column width + ref: https://stackoverflow.com/questions/29885284/how-to-set-a-fixed-width-column-with-css-flexbox + https://tailwindcss.com/docs/flex-basis + */} +
bg-white bg-white bg-white bg-white bg-white bg-white bg-white bg-white bg-white bg-white
+
Github GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub Github v
+
bg-white bg-red bg-white bg-red bg-white bg-red bg-white bg-red bg-white bg-red bg-white bg-red bg-white bg-red bg-white bg-red
+
+ + + ); +}); + +export const head: DocumentHead = { + title: "Welcome to Qwik", + meta: [ + { + name: "description", + content: "Qwik site description", + }, + ], +};